diff --git a/client/config/webpack.config.js b/client/config/webpack.config.js index c33bfc4a8..3b4b4a595 100644 --- a/client/config/webpack.config.js +++ b/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' + } }, } ); diff --git a/client/package.json b/client/package.json index 91357cf2d..8601ab979 100644 --- a/client/package.json +++ b/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" diff --git a/client/src/common/contactsOptions.js b/client/src/common/contactsOptions.js index 42e86361f..f03a49e22 100644 --- a/client/src/common/contactsOptions.js +++ b/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: formatMessage({ id: 'vendor' }), path: 'vendors' }, + { name: intl.get('customer'), path: 'customers' }, + { name: intl.get('vendor'), path: 'vendors' }, ]; diff --git a/client/src/common/fiscalYearOptions.js b/client/src/common/fiscalYearOptions.js index 1a89aabb7..24043ec80 100644 --- a/client/src/common/fiscalYearOptions.js +++ b/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({ - id: 'december', - })}`, + name: `${intl.get('january')} - ${intl.get('december')}`, value: 'january', }, { id: 1, - name: `${formatMessage({ id: 'february' })} - ${formatMessage({ - id: 'january', - })}`, + name: `${intl.get('february')} - ${intl.get('january')}`, value: 'february', }, { id: 2, - name: `${formatMessage({ id: 'march' })} - ${formatMessage({ - id: 'february', - })}`, + name: `${intl.get('march')} - ${intl.get('february')}`, value: 'March', }, { id: 3, - name: `${formatMessage({ id: 'april' })} - ${formatMessage({ - id: 'march', - })}`, + name: `${intl.get('april')} - ${intl.get('march')}`, value: 'april', }, { id: 4, - name: `${formatMessage({ id: 'may' })} - ${formatMessage({ - id: 'april', - })}`, + name: `${intl.get('may')} - ${intl.get('april')}`, value: 'may', }, { id: 5, - name: `${formatMessage({ id: 'june' })} - ${formatMessage({ - id: 'may', - })}`, + name: `${intl.get('june')} - ${intl.get('may')}`, value: 'june', }, { id: 6, - name: `${formatMessage({ id: 'july' })} - ${formatMessage({ - id: 'june', - })}`, + name: `${intl.get('july')} - ${intl.get('june')}`, value: 'july', }, { id: 7, - name: `${formatMessage({ id: 'august' })} - ${formatMessage({ - id: 'july', - })}`, + name: `${intl.get('august')} - ${intl.get('july')}`, value: 'August', }, { id: 8, - name: `${formatMessage({ id: 'september' })} - ${formatMessage({ - id: 'august', - })}`, + name: `${intl.get('september')} - ${intl.get('august')}`, value: 'september', }, { id: 9, - name: `${formatMessage({ id: 'october' })} - ${formatMessage({ - id: 'november', - })}`, + name: `${intl.get('october')} - ${intl.get('november')}`, value: 'october', }, { id: 10, - name: `${formatMessage({ id: 'november' })} - ${formatMessage({ - id: 'october', - })}`, + name: `${intl.get('november')} - ${intl.get('october')}`, value: 'november', }, { id: 11, - name: `${formatMessage({ id: 'december' })} - ${formatMessage({ - id: 'november', - })}`, + name: `${intl.get('december')} - ${intl.get('november')}`, value: 'december', }, ] \ No newline at end of file diff --git a/client/src/common/homepageOptions.js b/client/src/common/homepageOptions.js index 8389a4a70..82972db3a 100644 --- a/client/src/common/homepageOptions.js +++ b/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: , + title: , description: , link: '/customers', }, { - title: , + title: , description: ( ), diff --git a/client/src/common/keyboardShortcutsOptions.js b/client/src/common/keyboardShortcutsOptions.js index aabf28d7c..4b1b49fa1 100644 --- a/client/src/common/keyboardShortcutsOptions.js +++ b/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'), }, ]; diff --git a/client/src/common/quickNewOptions.js b/client/src/common/quickNewOptions.js index 500800ecd..6ebb1ec57 100644 --- a/client/src/common/quickNewOptions.js +++ b/client/src/common/quickNewOptions.js @@ -1,11 +1,10 @@ -import React from 'react'; -import { formatMessage } from 'services/intl'; +import intl from 'react-intl-universal'; -export default [ - { path: 'invoices/new', name: formatMessage({ id: 'sale_invoice' }) }, - { path: 'bills//new', name: formatMessage({ id: 'purchase_invoice' }) }, - { path: 'make-journal-entry', name: formatMessage({ id: 'manual_journal' }) }, - { path: 'expenses/new', name: formatMessage({ id: 'expense' }) }, - { path: 'customers/new', name: formatMessage({ id: 'customer' }) }, - { path: 'vendors/new', name: formatMessage({ id: 'vendor' }) }, +export const getQuickNewActions = () => [ + { path: 'invoices/new', name: intl.get('sale_invoice') }, + { path: 'bills//new', name: intl.get('purchase_invoice') }, + { path: 'make-journal-entry', name: intl.get('manual_journal') }, + { path: 'expenses/new', name: intl.get('expense') }, + { path: 'customers/new', name: intl.get('customer') }, + { path: 'vendors/new', name: intl.get('vendor') }, ]; diff --git a/client/src/components/AccountsMultiSelect.js b/client/src/components/AccountsMultiSelect.js index d9e24c7e5..071211e5f 100644 --- a/client/src/components/AccountsMultiSelect.js +++ b/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({}); diff --git a/client/src/components/AccountsSelectList.js b/client/src/components/AccountsSelectList.js index 7b173dff2..cddbcbe81 100644 --- a/client/src/components/AccountsSelectList.js +++ b/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'; diff --git a/client/src/components/AccountsSuggestField.js b/client/src/components/AccountsSuggestField.js index bdd1742a5..7e9952bb7 100644 --- a/client/src/components/AccountsSuggestField.js +++ b/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'; /** diff --git a/client/src/components/App.js b/client/src/components/App.js index 9df37df3c..062cbb77c 100644 --- a/client/src/components/App.js +++ b/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 = { - defaultOptions: { - queries: { - refetchOnWindowFocus: true, - staleTime: 30000, - }, - }, - }; + // Query client. const queryClient = new QueryClient(queryConfig); return ( - - -
- - - - - + + + +
+ + + + + + + + - - - - - + +
+ + - -
- - - - + + ); } diff --git a/client/src/components/AppIntlLoader.js b/client/src/components/AppIntlLoader.js new file mode 100644 index 000000000..7fc49b233 --- /dev/null +++ b/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 ( + + {children} + + ); +} \ No newline at end of file diff --git a/client/src/components/Authentication.js b/client/src/components/Authentication.js index 9eb01c6c1..8bbb29515 100644 --- a/client/src/components/Authentication.js +++ b/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 }) { > +
diff --git a/client/src/components/CategoriesSelectList.js b/client/src/components/CategoriesSelectList.js index 1345d1f6c..6cd4f83c5 100644 --- a/client/src/components/CategoriesSelectList.js +++ b/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'; diff --git a/client/src/components/ContactSelecetList.js b/client/src/components/ContactSelecetList.js index d19d4943c..8dfeb32f6 100644 --- a/client/src/components/ContactSelecetList.js +++ b/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'; diff --git a/client/src/components/ContactsMultiSelect.js b/client/src/components/ContactsMultiSelect.js index 3d622af9f..7cbb1c332 100644 --- a/client/src/components/ContactsMultiSelect.js +++ b/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, diff --git a/client/src/components/ContactsSuggestField.js b/client/src/components/ContactsSuggestField.js index 0db5f5184..816619d29 100644 --- a/client/src/components/ContactsSuggestField.js +++ b/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 = [], diff --git a/client/src/components/CurrencySelectList.js b/client/src/components/CurrencySelectList.js index c59c63795..36a90e606 100644 --- a/client/src/components/CurrencySelectList.js +++ b/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'; diff --git a/client/src/components/Dashboard/Dashboard.js b/client/src/components/Dashboard/Dashboard.js index 4488809d3..00a6ab561 100644 --- a/client/src/components/Dashboard/Dashboard.js +++ b/client/src/components/Dashboard/Dashboard.js @@ -30,7 +30,7 @@ export default function Dashboard() { - + diff --git a/client/src/components/Dashboard/DashboardActionViewsList.js b/client/src/components/Dashboard/DashboardActionViewsList.js index 97f0b2836..42c2bcbe7 100644 --- a/client/src/components/Dashboard/DashboardActionViewsList.js +++ b/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'; /** diff --git a/client/src/components/Dashboard/DashboardBackLink.js b/client/src/components/Dashboard/DashboardBackLink.js index 096177057..8e0933433 100644 --- a/client/src/components/Dashboard/DashboardBackLink.js +++ b/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, })), diff --git a/client/src/components/Dashboard/DashboardBreadcrumbs.js b/client/src/components/Dashboard/DashboardBreadcrumbs.js index 840e0b1cd..a27c0ffd2 100644 --- a/client/src/components/Dashboard/DashboardBreadcrumbs.js +++ b/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) diff --git a/client/src/components/Dashboard/DashboardContentRoute.js b/client/src/components/Dashboard/DashboardContentRoute.js index 4951f186b..08ca63f54 100644 --- a/client/src/components/Dashboard/DashboardContentRoute.js +++ b/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 ( diff --git a/client/src/components/Dashboard/DashboardTopbar.js b/client/src/components/Dashboard/DashboardTopbar.js index 32d9b8b18..2422538c6 100644 --- a/client/src/components/Dashboard/DashboardTopbar.js +++ b/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'; diff --git a/client/src/components/Dashboard/DashboardViewsTabs.js b/client/src/components/Dashboard/DashboardViewsTabs.js index bb526d7f8..83c4034cc 100644 --- a/client/src/components/Dashboard/DashboardViewsTabs.js +++ b/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'; diff --git a/client/src/components/Dashboard/GlobalHotkeys.js b/client/src/components/Dashboard/GlobalHotkeys.js index 353c1c755..3ca7a2b0b 100644 --- a/client/src/components/Dashboard/GlobalHotkeys.js +++ b/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) diff --git a/client/src/components/Dashboard/TopbarUser.js b/client/src/components/Dashboard/TopbarUser.js index ab491c629..44e50dd7e 100644 --- a/client/src/components/Dashboard/TopbarUser.js +++ b/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'; diff --git a/client/src/components/DataTable.js b/client/src/components/DataTable.js index c653f2a71..ec0c5bab3 100644 --- a/client/src/components/DataTable.js +++ b/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: {}, }; diff --git a/client/src/components/DataTableCells/ItemsListCell.js b/client/src/components/DataTableCells/ItemsListCell.js index 0413e5fc6..9ff7ddae1 100644 --- a/client/src/components/DataTableCells/ItemsListCell.js +++ b/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} diff --git a/client/src/components/Datatable/TableCell.js b/client/src/components/Datatable/TableCell.js index 46621de5e..84a50a89a 100644 --- a/client/src/components/Datatable/TableCell.js +++ b/client/src/components/Datatable/TableCell.js @@ -46,6 +46,8 @@ export default function TableCell({ ); } + const isRTL = true; + return (
-
{ noResults }
+
{noResultText}
); -} \ No newline at end of file +} diff --git a/client/src/components/Dragzone.js b/client/src/components/Dragzone.js index f7dbe5d21..f62ddce5d 100644 --- a/client/src/components/Dragzone.js +++ b/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, diff --git a/client/src/components/Drawer/DrawerHeaderContent.js b/client/src/components/Drawer/DrawerHeaderContent.js index 648651222..ff506c267 100644 --- a/client/src/components/Drawer/DrawerHeaderContent.js +++ b/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'; diff --git a/client/src/components/DynamicFilter/DynamicFilterCompatatorField.js b/client/src/components/DynamicFilter/DynamicFilterCompatatorField.js index 7559369d6..b1cb3278e 100644 --- a/client/src/components/DynamicFilter/DynamicFilterCompatatorField.js +++ b/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] ); diff --git a/client/src/components/DynamicFilter/DynamicFilterValueField.js b/client/src/components/DynamicFilter/DynamicFilterValueField.js index 1d56e1bbb..10a9877ad 100644 --- a/client/src/components/DynamicFilter/DynamicFilterValueField.js +++ b/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({ diff --git a/client/src/components/FilterDropdown.js b/client/src/components/FilterDropdown.js index 04f387972..4bdd172a9 100644 --- a/client/src/components/FilterDropdown.js +++ b/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: formatMessage({ id: 'or' }) }, + { value: '&&', label: intl.get('and') }, + { 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. diff --git a/client/src/components/FinancialSheet.js b/client/src/components/FinancialSheet.js index 0f2373090..49d10231d 100644 --- a/client/src/components/FinancialSheet.js +++ b/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' }), - accrual: formatMessage({ id: 'accrual' }), + cash: intl.get('cash'), + accrual: intl.get('accrual'), }), - [formatMessage], + [], ); const getBasisLabel = useCallback((b) => methodsLabels[b], [methodsLabels]); const basisLabel = useMemo(() => getBasisLabel(basis), [ diff --git a/client/src/components/FormattedMessage.js b/client/src/components/FormattedMessage.js new file mode 100644 index 000000000..1c181c832 --- /dev/null +++ b/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 }) +} \ No newline at end of file diff --git a/client/src/components/ItemsSuggestField.js b/client/src/components/ItemsSuggestField.js index e1c7178d9..0194b12ea 100644 --- a/client/src/components/ItemsSuggestField.js +++ b/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, diff --git a/client/src/components/ListSelect.js b/client/src/components/ListSelect.js index ebbfb5479..1035d184f 100644 --- a/client/src/components/ListSelect.js +++ b/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'; diff --git a/client/src/components/NumberFormatDropdown/NumberFormatFields.js b/client/src/components/NumberFormatDropdown/NumberFormatFields.js index 776024de3..314a87d01 100644 --- a/client/src/components/NumberFormatDropdown/NumberFormatFields.js +++ b/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, diff --git a/client/src/components/NumberFormatDropdown/NumberFormatFooter.js b/client/src/components/NumberFormatDropdown/NumberFormatFooter.js index bb42b0ca9..cdaad893a 100644 --- a/client/src/components/NumberFormatDropdown/NumberFormatFooter.js +++ b/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. diff --git a/client/src/components/Pagination.js b/client/src/components/Pagination.js index 9be89b476..27f9c3fe2 100644 --- a/client/src/components/Pagination.js +++ b/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'; diff --git a/client/src/components/PaymentReceiveListField.js b/client/src/components/PaymentReceiveListField.js index 6b6b3a34d..9902758b4 100644 --- a/client/src/components/PaymentReceiveListField.js +++ b/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, diff --git a/client/src/components/Preferences/PreferencesSidebar.js b/client/src/components/Preferences/PreferencesSidebar.js index 8c5d3f9d5..6dbb5a20e 100644 --- a/client/src/components/Preferences/PreferencesSidebar.js +++ b/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'; diff --git a/client/src/components/SalutationList.js b/client/src/components/SalutationList.js index ba9661026..a87a9d4d6 100644 --- a/client/src/components/SalutationList.js +++ b/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} /> diff --git a/client/src/components/index.js b/client/src/components/index.js index 5b332d816..c8d56dfe9 100644 --- a/client/src/components/index.js +++ b/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, diff --git a/client/src/config/financialReportsMenu.js b/client/src/config/financialReportsMenu.js index 43bfe4c4a..4c3226a4f 100644 --- a/client/src/config/financialReportsMenu.js +++ b/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: ( ), @@ -107,7 +107,9 @@ export const SalesAndPurchasesReportMenus = [ }, { title: , - desc: 'summerize_the_total_amount_your_business_owes_each_vendor', + desc: ( + + ), link: '/financial-reports/vendors-balance-summary', }, { diff --git a/client/src/config/preferencesMenu.js b/client/src/config/preferencesMenu.js index 019555d4a..3e1b981dd 100644 --- a/client/src/config/preferencesMenu.js +++ b/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 [ { diff --git a/client/src/config/sidebarMenu.js b/client/src/config/sidebarMenu.js index 9edf634de..4938f5cba 100644 --- a/client/src/config/sidebarMenu.js +++ b/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: , children: [ { - text: , + text: , href: '/items', }, { @@ -67,7 +67,7 @@ export default [ newTabHref: '/bills/new', }, { - text: , + text: , href: '/payment-mades', newTabHref: '/payment-mades/new', }, diff --git a/client/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js b/client/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js index e0b3014fa..a061c04ef 100644 --- a/client/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js +++ b/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'; diff --git a/client/src/containers/Accounting/JournalsLanding/ManualJournalsEmptyStatus.js b/client/src/containers/Accounting/JournalsLanding/ManualJournalsEmptyStatus.js index d487a29be..f3d641f22 100644 --- a/client/src/containers/Accounting/JournalsLanding/ManualJournalsEmptyStatus.js +++ b/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(); diff --git a/client/src/containers/Accounting/JournalsLanding/components.js b/client/src/containers/Accounting/JournalsLanding/components.js index 6cb1cdd2f..7a4f70bf7 100644 --- a/client/src/containers/Accounting/JournalsLanding/components.js +++ b/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 = ({ } - text={formatMessage({ id: 'view_details' })} + text={intl.get('view_details')} onClick={safeCallback(onViewDetails, original)} /> } - text={formatMessage({ id: 'publish_journal' })} + text={intl.get('publish_journal')} onClick={safeCallback(onPublish, original)} /> } - text={formatMessage({ id: 'edit_journal' })} + text={intl.get('edit_journal')} onClick={safeCallback(onEdit, original)} /> } intent={Intent.DANGER} onClick={safeCallback(onDelete, original)} diff --git a/client/src/containers/Accounting/JournalsLanding/utils.js b/client/src/containers/Accounting/JournalsLanding/utils.js index aa1540009..dd6f3c21f 100644 --- a/client/src/containers/Accounting/JournalsLanding/utils.js +++ b/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', diff --git a/client/src/containers/Accounting/MakeJournal/MakeJournalEntries.schema.js b/client/src/containers/Accounting/MakeJournal/MakeJournalEntries.schema.js index cec70cb30..796f505f9 100644 --- a/client/src/containers/Accounting/MakeJournal/MakeJournalEntries.schema.js +++ b/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), diff --git a/client/src/containers/Accounting/MakeJournal/MakeJournalEntriesFooter.js b/client/src/containers/Accounting/MakeJournal/MakeJournalEntriesFooter.js index 8752d8ff6..bd541ec64 100644 --- a/client/src/containers/Accounting/MakeJournal/MakeJournalEntriesFooter.js +++ b/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'; diff --git a/client/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.js b/client/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.js index 97658ea6f..9b99ebe64 100644 --- a/client/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.js +++ b/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({ - id: 'should_total_of_credit_and_debit_be_equal', - }), + message: intl.get('should_total_of_credit_and_debit_be_equal'), intent: Intent.DANGER, }); setSubmitting(false); return; } else if (totalCredit === 0 || totalDebit === 0) { AppToaster.show({ - message: formatMessage({ - id: 'amount_cannot_be_zero_or_empty', - }), + message: intl.get('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( - { - id: isNewMode - ? 'the_journal_has_been_created_successfully' - : 'the_journal_has_been_edited_successfully', - }, + message: intl.get( + isNewMode + ? 'the_journal_has_been_created_successfully' + : 'the_journal_has_been_edited_successfully', { number: values.journal_number }, ), intent: Intent.SUCCESS, diff --git a/client/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.js b/client/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.js index d32ceb3c5..9682c0e03 100644 --- a/client/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.js +++ b/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'; diff --git a/client/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.js b/client/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.js index d7ee23438..6ec4d25e4 100644 --- a/client/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.js +++ b/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'; diff --git a/client/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.js b/client/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.js index 4d4c82fdc..a95429551 100644 --- a/client/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.js +++ b/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'; diff --git a/client/src/containers/Accounting/MakeJournal/MakeJournalFormFooter.js b/client/src/containers/Accounting/MakeJournal/MakeJournalFormFooter.js index 14a3e0e4b..fd1315e05 100644 --- a/client/src/containers/Accounting/MakeJournal/MakeJournalFormFooter.js +++ b/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'; diff --git a/client/src/containers/Accounting/MakeJournal/components.js b/client/src/containers/Accounting/MakeJournal/components.js index fe60d16e3..e7a5dbf86 100644 --- a/client/src/containers/Accounting/MakeJournal/components.js +++ b/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 ( - {formatMessage({ id: 'total_currency' }, { currency: currencyCode })} + {intl.get('total_currency', { currency: currencyCode })} ); } @@ -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], + [], ); }; diff --git a/client/src/containers/Accounting/MakeJournal/utils.js b/client/src/containers/Accounting/MakeJournal/utils.js index f8e9ac58b..6a7142f1e 100644 --- a/client/src/containers/Accounting/MakeJournal/utils.js +++ b/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({ - id: 'should_select_customers_with_entries_have_receivable_account', - }), + intl.get('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({ - id: 'receivable_accounts_should_assign_with_customers', - }), + intl.get('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({ - id: 'journal_number_is_already_used', - }), + intl.get('journal_number_is_already_used'), ); } setErrors({ ...newErrors }); diff --git a/client/src/containers/Accounts/AccountsActionsBar.js b/client/src/containers/Accounts/AccountsActionsBar.js index 9920a4f76..25df336fa 100644 --- a/client/src/containers/Accounts/AccountsActionsBar.js +++ b/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'; diff --git a/client/src/containers/Accounts/components.js b/client/src/containers/Accounts/components.js index 741293354..d45fd20cb 100644 --- a/client/src/containers/Accounts/components.js +++ b/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({ } - text={formatMessage({ id: 'view_details' })} + text={intl.get('view_details')} onClick={safeCallback(onViewDetails, original)} /> } - text={formatMessage({ id: 'edit_account' })} + text={intl.get('edit_account')} onClick={safeCallback(onEdit, original)} /> } - text={formatMessage({ id: 'new_child_account' })} + text={intl.get('new_child_account')} onClick={safeCallback(onNewChild, original)} /> } onClick={safeCallback(onInactivate, original)} /> } onClick={safeCallback(onActivate, original)} /> } 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 ( diff --git a/client/src/containers/Accounts/utils.js b/client/src/containers/Accounts/utils.js index 07768af52..47ed45a5f 100644 --- a/client/src/containers/Accounts/utils.js +++ b/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({ - id: 'you_could_not_delete_predefined_accounts', - }), + message: intl.get('you_could_not_delete_predefined_accounts'), intent: Intent.DANGER, }); } if (errors.find((e) => e.type === 'ACCOUNT.HAS.ASSOCIATED.TRANSACTIONS')) { AppToaster.show({ - message: formatMessage({ - id: 'cannot_delete_account_has_associated_transactions', - }), + message: intl.get('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, diff --git a/client/src/containers/Alerts/AccountActivateAlert.js b/client/src/containers/Alerts/AccountActivateAlert.js index 777af9dfa..591efc428 100644 --- a/client/src/containers/Alerts/AccountActivateAlert.js +++ b/client/src/containers/Alerts/AccountActivateAlert.js @@ -1,7 +1,7 @@ import React from 'react'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import intl from 'react-intl-universal'; import { Intent, Alert } from '@blueprintjs/core'; -import { AppToaster } from 'components'; +import { AppToaster, FormattedMessage as T } from 'components'; import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect'; import withAlertActions from 'containers/Alert/withAlertActions'; @@ -20,7 +20,7 @@ function AccountActivateAlert({ // #withAlertActions closeAlert, }) { - const { formatMessage } = useIntl(); + const { mutateAsync: activateAccount, isLoading @@ -35,9 +35,7 @@ function AccountActivateAlert({ const handleConfirmAccountActivate = () => { activateAccount(accountId).then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_account_has_been_successfully_activated', - }), + message: intl.get('the_account_has_been_successfully_activated'), intent: Intent.SUCCESS, }); closeAlert('account-activate'); diff --git a/client/src/containers/Alerts/AccountBulkActivateAlert.js b/client/src/containers/Alerts/AccountBulkActivateAlert.js index da2672003..af3f2c513 100644 --- a/client/src/containers/Alerts/AccountBulkActivateAlert.js +++ b/client/src/containers/Alerts/AccountBulkActivateAlert.js @@ -1,8 +1,8 @@ import React, { useState } from 'react'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import intl from 'react-intl-universal'; import { Intent, Alert } from '@blueprintjs/core'; import { queryCache } from 'react-query'; -import { AppToaster } from 'components'; +import { FormattedMessage as T, AppToaster } from 'components'; import withAccountsActions from 'containers/Accounts/withAccountsActions'; import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect'; @@ -20,7 +20,6 @@ function AccountBulkActivateAlert({ requestBulkActivateAccounts, }) { - const { formatMessage } = useIntl(); const [isLoading, setLoading] = useState(false); const selectedRowsCount = 0; @@ -35,9 +34,7 @@ function AccountBulkActivateAlert({ requestBulkActivateAccounts(accountsIds) .then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_accounts_has_been_successfully_activated', - }), + message: intl.get('the_accounts_has_been_successfully_activated'), intent: Intent.SUCCESS, }); queryCache.invalidateQueries('accounts-table'); @@ -52,9 +49,7 @@ function AccountBulkActivateAlert({ return ( } - confirmButtonText={`${formatMessage({ - id: 'activate', - })} (${selectedRowsCount})`} + confirmButtonText={`${intl.get('activate')} (${selectedRowsCount})`} intent={Intent.WARNING} isOpen={isOpen} onCancel={handleClose} diff --git a/client/src/containers/Alerts/AccountBulkDeleteAlert.js b/client/src/containers/Alerts/AccountBulkDeleteAlert.js index dd18667a1..75c7fc597 100644 --- a/client/src/containers/Alerts/AccountBulkDeleteAlert.js +++ b/client/src/containers/Alerts/AccountBulkDeleteAlert.js @@ -1,5 +1,6 @@ import React, { useState } from 'react'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { Intent, Alert } from '@blueprintjs/core'; import { queryCache } from 'react-query'; import { AppToaster } from 'components'; @@ -29,7 +30,7 @@ function AccountBulkDeleteAlert({ // #withAccountsActions requestDeleteBulkAccounts, }) { - const { formatMessage } = useIntl(); + const [isLoading, setLoading] = useState(false); const selectedRowsCount = 0; @@ -43,9 +44,7 @@ function AccountBulkDeleteAlert({ requestDeleteBulkAccounts(accountsIds) .then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_accounts_has_been_successfully_deleted', - }), + message: intl.get('the_accounts_has_been_successfully_deleted'), intent: Intent.SUCCESS, }); queryCache.invalidateQueries('accounts-table'); @@ -62,9 +61,7 @@ function AccountBulkDeleteAlert({ return ( } - confirmButtonText={`${formatMessage({ - id: 'delete', - })} (${selectedRowsCount})`} + confirmButtonText={`${intl.get('delete')} (${selectedRowsCount})`} icon="trash" intent={Intent.DANGER} isOpen={isOpen} diff --git a/client/src/containers/Alerts/AccountBulkInactivateAlert.js b/client/src/containers/Alerts/AccountBulkInactivateAlert.js index bb58a7072..8031e4074 100644 --- a/client/src/containers/Alerts/AccountBulkInactivateAlert.js +++ b/client/src/containers/Alerts/AccountBulkInactivateAlert.js @@ -1,5 +1,6 @@ import React, { useState } from 'react'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { Intent, Alert } from '@blueprintjs/core'; import { queryCache } from 'react-query'; import { AppToaster } from 'components'; @@ -20,7 +21,7 @@ function AccountBulkInactivateAlert({ closeAlert, }) { - const { formatMessage } = useIntl(); + const [isLoading, setLoading] = useState(false); const selectedRowsCount = 0; @@ -34,9 +35,7 @@ function AccountBulkInactivateAlert({ requestBulkInactiveAccounts(accountsIds) .then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_accounts_have_been_successfully_inactivated', - }), + message: intl.get('the_accounts_have_been_successfully_inactivated'), intent: Intent.SUCCESS, }); queryCache.invalidateQueries('accounts-table'); @@ -51,9 +50,7 @@ function AccountBulkInactivateAlert({ return ( } - confirmButtonText={`${formatMessage({ - id: 'inactivate', - })} (${selectedRowsCount})`} + confirmButtonText={`${intl.get('inactivate')} (${selectedRowsCount})`} intent={Intent.WARNING} isOpen={isOpen} onCancel={handleCancel} diff --git a/client/src/containers/Alerts/AccountDeleteAlert.js b/client/src/containers/Alerts/AccountDeleteAlert.js index 15014af68..229de8e82 100644 --- a/client/src/containers/Alerts/AccountDeleteAlert.js +++ b/client/src/containers/Alerts/AccountDeleteAlert.js @@ -1,10 +1,8 @@ import React from 'react'; -import { - FormattedMessage as T, - FormattedHTMLMessage, - useIntl, -} from 'react-intl'; +import intl from 'react-intl-universal'; +import { FormattedMessage as T, FormattedHTMLMessage } from 'components'; import { Intent, Alert } from '@blueprintjs/core'; + import { AppToaster } from 'components'; import { handleDeleteErrors } from 'containers/Accounts/utils'; @@ -28,7 +26,6 @@ function AccountDeleteAlert({ // #withAlertActions closeAlert, }) { - const { formatMessage } = useIntl(); const { isLoading, mutateAsync: deleteAccount } = useDeleteAccount(); // handle cancel delete account alert. @@ -40,9 +37,7 @@ function AccountDeleteAlert({ deleteAccount(accountId) .then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_account_has_been_successfully_deleted', - }), + message: intl.get('the_account_has_been_successfully_deleted'), intent: Intent.SUCCESS, }); closeAlert(name); diff --git a/client/src/containers/Alerts/AccountInactivateAlert.js b/client/src/containers/Alerts/AccountInactivateAlert.js index e69671850..bea79dd5f 100644 --- a/client/src/containers/Alerts/AccountInactivateAlert.js +++ b/client/src/containers/Alerts/AccountInactivateAlert.js @@ -1,5 +1,6 @@ import React from 'react'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { Intent, Alert } from '@blueprintjs/core'; import { AppToaster } from 'components'; @@ -22,7 +23,7 @@ function AccountInactivateAlert({ // #withAlertActions closeAlert, }) { - const { formatMessage } = useIntl(); + const { mutateAsync: inactivateAccount, isLoading @@ -35,9 +36,7 @@ function AccountInactivateAlert({ const handleConfirmAccountActive = () => { inactivateAccount(accountId).then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_account_has_been_successfully_inactivated', - }), + message: intl.get('the_account_has_been_successfully_inactivated'), intent: Intent.SUCCESS, }); }).catch(() => { diff --git a/client/src/containers/Alerts/Bills/BillDeleteAlert.js b/client/src/containers/Alerts/Bills/BillDeleteAlert.js index 7ec6085a5..7b41e4762 100644 --- a/client/src/containers/Alerts/Bills/BillDeleteAlert.js +++ b/client/src/containers/Alerts/Bills/BillDeleteAlert.js @@ -1,5 +1,6 @@ import React from 'react'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { Intent, Alert } from '@blueprintjs/core'; import { AppToaster } from 'components'; @@ -23,7 +24,7 @@ function BillDeleteAlert({ // #withAlertActions closeAlert, }) { - const { formatMessage } = useIntl(); + const { isLoading, mutateAsync: deleteBillMutate } = useDeleteBill(); // Handle cancel Bill @@ -36,9 +37,7 @@ function BillDeleteAlert({ deleteBillMutate(billId) .then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_bill_has_been_deleted_successfully', - }), + message: intl.get('the_bill_has_been_deleted_successfully'), intent: Intent.SUCCESS, }); }) diff --git a/client/src/containers/Alerts/Bills/BillOpenAlert.js b/client/src/containers/Alerts/Bills/BillOpenAlert.js index 0093b4bb7..6744cd5cc 100644 --- a/client/src/containers/Alerts/Bills/BillOpenAlert.js +++ b/client/src/containers/Alerts/Bills/BillOpenAlert.js @@ -1,5 +1,6 @@ import React from 'react'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { Intent, Alert } from '@blueprintjs/core'; import { AppToaster } from 'components'; @@ -22,7 +23,7 @@ function BillOpenAlert({ // #withAlertActions closeAlert, }) { - const { formatMessage } = useIntl(); + const { isLoading, mutateAsync: openBillMutate } = useOpenBill(); // Handle cancel open bill alert. @@ -35,9 +36,7 @@ function BillOpenAlert({ openBillMutate(billId) .then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_bill_has_been_opened_successfully', - }), + message: intl.get('the_bill_has_been_opened_successfully'), intent: Intent.SUCCESS, }); closeAlert(name); diff --git a/client/src/containers/Alerts/Currencies/CurrencyDeleteAlert.js b/client/src/containers/Alerts/Currencies/CurrencyDeleteAlert.js index 2f89ee8fb..db736b4a5 100644 --- a/client/src/containers/Alerts/Currencies/CurrencyDeleteAlert.js +++ b/client/src/containers/Alerts/Currencies/CurrencyDeleteAlert.js @@ -1,10 +1,8 @@ import React from 'react'; -import { - FormattedMessage as T, - FormattedHTMLMessage, - useIntl, -} from 'react-intl'; +import intl from 'react-intl-universal'; +import { FormattedMessage as T, FormattedHTMLMessage } from 'components'; import { Intent, Alert } from '@blueprintjs/core'; + import { AppToaster } from 'components'; import { useDeleteCurrency } from 'hooks/query'; @@ -27,7 +25,7 @@ function CurrencyDeleteAlert({ // #withAlertActions closeAlert, }) { - const { formatMessage } = useIntl(); + const { mutateAsync: deleteCurrency, isLoading } = useDeleteCurrency(); // handle cancel delete currency alert. @@ -38,9 +36,7 @@ function CurrencyDeleteAlert({ deleteCurrency(currency_code) .then((response) => { AppToaster.show({ - message: formatMessage({ - id: 'the_currency_has_been_deleted_successfully', - }), + message: intl.get('the_currency_has_been_deleted_successfully'), intent: Intent.SUCCESS, }); closeAlert(name); diff --git a/client/src/containers/Alerts/Customers/CustomerBulkDeleteAlert.js b/client/src/containers/Alerts/Customers/CustomerBulkDeleteAlert.js index 232187816..7b71469ac 100644 --- a/client/src/containers/Alerts/Customers/CustomerBulkDeleteAlert.js +++ b/client/src/containers/Alerts/Customers/CustomerBulkDeleteAlert.js @@ -1,5 +1,6 @@ import React, { useCallback, useState } from 'react'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { Intent, Alert } from '@blueprintjs/core'; import { AppToaster } from 'components'; import { transformErrors } from 'containers/Customers/utils'; @@ -22,7 +23,7 @@ function CustomerBulkDeleteAlert({ // #withAlertActions closeAlert, }) { - const { formatMessage } = useIntl(); + const [isLoading, setLoading] = useState(false); // handle cancel delete alert. @@ -38,9 +39,7 @@ function CustomerBulkDeleteAlert({ requestDeleteBulkCustomers(customersIds) .then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_customers_has_been_deleted_successfully', - }), + message: intl.get('the_customers_has_been_deleted_successfully'), intent: Intent.SUCCESS, }); }) @@ -51,7 +50,7 @@ function CustomerBulkDeleteAlert({ setLoading(false); closeAlert(name); }); - }, [requestDeleteBulkCustomers, customersIds, formatMessage]); + }, [requestDeleteBulkCustomers, customersIds]); return ( { AppToaster.show({ - message: formatMessage({ - id: 'the_customer_has_been_deleted_successfully', - }), + message: intl.get('the_customer_has_been_deleted_successfully'), intent: Intent.SUCCESS, }); }) @@ -56,7 +51,7 @@ function CustomerDeleteAlert({ .finally(() => { closeAlert(name); }); - }, [deleteCustomerMutate, customerId, closeAlert, name, formatMessage]); + }, [deleteCustomerMutate, customerId, closeAlert, name]); return ( { AppToaster.show({ - message: formatMessage({ - id: 'the_estimate_has_been_approved_successfully', - }), + message: intl.get('the_estimate_has_been_approved_successfully'), intent: Intent.SUCCESS, }); queryCache.invalidateQueries('estimates-table'); @@ -50,7 +49,7 @@ function EstimateApproveAlert({ .finally(() => { closeAlert(name); }); - }, [estimateId, deliverEstimateMutate, closeAlert, name, formatMessage]); + }, [estimateId, deliverEstimateMutate, closeAlert, name]); return ( { AppToaster.show({ - message: formatMessage({ - id: 'the_estimate_has_been_deleted_successfully', - }), + message: intl.get('the_estimate_has_been_deleted_successfully'), intent: Intent.SUCCESS, }); }) diff --git a/client/src/containers/Alerts/Estimates/EstimateDeliveredAlert.js b/client/src/containers/Alerts/Estimates/EstimateDeliveredAlert.js index d024b8dae..ad9b8b84a 100644 --- a/client/src/containers/Alerts/Estimates/EstimateDeliveredAlert.js +++ b/client/src/containers/Alerts/Estimates/EstimateDeliveredAlert.js @@ -1,5 +1,6 @@ import React from 'react'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { Intent, Alert } from '@blueprintjs/core'; import { useDeliverEstimate } from 'hooks/query'; @@ -23,7 +24,7 @@ function EstimateDeliveredAlert({ // #withAlertActions closeAlert, }) { - const { formatMessage } = useIntl(); + const { mutateAsync: deliverEstimateMutate, isLoading } = useDeliverEstimate(); // Handle cancel delivered estimate alert. @@ -36,9 +37,7 @@ function EstimateDeliveredAlert({ deliverEstimateMutate(estimateId) .then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_estimate_has_been_delivered_successfully', - }), + message: intl.get('the_estimate_has_been_delivered_successfully'), intent: Intent.SUCCESS, }) }) diff --git a/client/src/containers/Alerts/Estimates/EstimateRejectAlert.js b/client/src/containers/Alerts/Estimates/EstimateRejectAlert.js index 2a013ede2..e8822b297 100644 --- a/client/src/containers/Alerts/Estimates/EstimateRejectAlert.js +++ b/client/src/containers/Alerts/Estimates/EstimateRejectAlert.js @@ -1,5 +1,6 @@ import React from 'react'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { Intent, Alert } from '@blueprintjs/core'; import { AppToaster } from 'components'; @@ -23,7 +24,7 @@ function EstimateRejectAlert({ // #withAlertActions closeAlert, }) { - const { formatMessage } = useIntl(); + const { mutateAsync: rejectEstimateMutate, isLoading @@ -39,9 +40,7 @@ function EstimateRejectAlert({ rejectEstimateMutate(estimateId) .then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_estimate_has_been_rejected_successfully', - }), + message: intl.get('the_estimate_has_been_rejected_successfully'), intent: Intent.SUCCESS, }); }) diff --git a/client/src/containers/Alerts/ExchangeRates/ExchangeRateBulkDeleteAlert.js b/client/src/containers/Alerts/ExchangeRates/ExchangeRateBulkDeleteAlert.js index 73e60e689..eb57b6834 100644 --- a/client/src/containers/Alerts/ExchangeRates/ExchangeRateBulkDeleteAlert.js +++ b/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'; diff --git a/client/src/containers/Alerts/ExchangeRates/ExchangeRateDeleteAlert.js b/client/src/containers/Alerts/ExchangeRates/ExchangeRateDeleteAlert.js index e13bd0faa..0abaff14f 100644 --- a/client/src/containers/Alerts/ExchangeRates/ExchangeRateDeleteAlert.js +++ b/client/src/containers/Alerts/ExchangeRates/ExchangeRateDeleteAlert.js @@ -1,9 +1,6 @@ import React from 'react'; -import { - FormattedMessage as T, - FormattedHTMLMessage, - useIntl, -} from 'react-intl'; +import intl from 'react-intl-universal'; +import { FormattedMessage as T, FormattedHTMLMessage } from 'components'; import { Intent, Alert } from '@blueprintjs/core'; import { AppToaster } from 'components'; @@ -30,7 +27,7 @@ function ExchangeRateDeleteAlert({ mutateAsync: deleteExchangeRate, isLoading, } = useDeleteExchangeRate(); - const { formatMessage } = useIntl(); + // Handle cancel delete exchange rate alert. const handleCancelExchangeRateDelete = () => closeAlert(name); @@ -39,9 +36,7 @@ function ExchangeRateDeleteAlert({ deleteExchangeRate(exchangeRateId) .then((response) => { AppToaster.show({ - message: formatMessage({ - id: 'the_exchange_rates_has_been_deleted_successfully', - }), + message: intl.get('the_exchange_rates_has_been_deleted_successfully'), intent: Intent.SUCCESS, }); closeAlert(name); diff --git a/client/src/containers/Alerts/Expenses/ExpenseBulkDeleteAlert.js b/client/src/containers/Alerts/Expenses/ExpenseBulkDeleteAlert.js index 68693229d..b62a0af34 100644 --- a/client/src/containers/Alerts/Expenses/ExpenseBulkDeleteAlert.js +++ b/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'; diff --git a/client/src/containers/Alerts/Expenses/ExpenseDeleteAlert.js b/client/src/containers/Alerts/Expenses/ExpenseDeleteAlert.js index aee3f817e..b367fec84 100644 --- a/client/src/containers/Alerts/Expenses/ExpenseDeleteAlert.js +++ b/client/src/containers/Alerts/Expenses/ExpenseDeleteAlert.js @@ -1,5 +1,6 @@ import React from 'react'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { Intent, Alert } from '@blueprintjs/core'; import { AppToaster } from 'components'; @@ -20,7 +21,7 @@ function ExpenseDeleteAlert({ isOpen, payload: { expenseId }, }) { - const { formatMessage } = useIntl(); + const { mutateAsync: deleteExpenseMutate, isLoading, @@ -35,8 +36,8 @@ function ExpenseDeleteAlert({ const handleConfirmExpenseDelete = () => { deleteExpenseMutate(expenseId).then(() => { AppToaster.show({ - message: formatMessage( - { id: 'the_expense_has_been_deleted_successfully' }, + message: intl.get( + 'the_expense_has_been_deleted_successfully', { number: expenseId }, ), intent: Intent.SUCCESS, diff --git a/client/src/containers/Alerts/Expenses/ExpenseDeleteEntriesAlert.js b/client/src/containers/Alerts/Expenses/ExpenseDeleteEntriesAlert.js index 5f73d9382..0af22a14b 100644 --- a/client/src/containers/Alerts/Expenses/ExpenseDeleteEntriesAlert.js +++ b/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'; diff --git a/client/src/containers/Alerts/Expenses/ExpensePublishAlert.js b/client/src/containers/Alerts/Expenses/ExpensePublishAlert.js index fa0d0c73c..d5486266e 100644 --- a/client/src/containers/Alerts/Expenses/ExpensePublishAlert.js +++ b/client/src/containers/Alerts/Expenses/ExpensePublishAlert.js @@ -1,5 +1,6 @@ import React from 'react'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { Intent, Alert } from '@blueprintjs/core'; import { AppToaster } from 'components'; @@ -20,7 +21,7 @@ function ExpensePublishAlert({ payload: { expenseId }, isOpen, }) { - const { formatMessage } = useIntl(); + const { mutateAsync: publishExpenseMutate, isLoading } = usePublishExpense(); const handleCancelPublishExpense = () => { @@ -32,9 +33,7 @@ function ExpensePublishAlert({ publishExpenseMutate(expenseId) .then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_expense_has_been_published', - }), + message: intl.get('the_expense_has_been_published'), intent: Intent.SUCCESS, }); closeAlert(name) diff --git a/client/src/containers/Alerts/Invoices/InvoiceDeleteAlert.js b/client/src/containers/Alerts/Invoices/InvoiceDeleteAlert.js index e3a8e9969..241737c22 100644 --- a/client/src/containers/Alerts/Invoices/InvoiceDeleteAlert.js +++ b/client/src/containers/Alerts/Invoices/InvoiceDeleteAlert.js @@ -1,9 +1,6 @@ import React from 'react'; -import { - FormattedMessage as T, - FormattedHTMLMessage, - useIntl, -} from 'react-intl'; +import intl from 'react-intl-universal'; +import { FormattedMessage as T, FormattedHTMLMessage } from 'components'; import { Intent, Alert } from '@blueprintjs/core'; import { AppToaster } from 'components'; import { useDeleteInvoice } from 'hooks/query'; @@ -28,7 +25,7 @@ function InvoiceDeleteAlert({ // #withAlertActions closeAlert, }) { - const { formatMessage } = useIntl(); + const { mutateAsync: deleteInvoiceMutate, isLoading } = useDeleteInvoice(); // handle cancel delete invoice alert. @@ -41,9 +38,7 @@ function InvoiceDeleteAlert({ deleteInvoiceMutate(invoiceId) .then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_invoice_has_been_deleted_successfully', - }), + message: intl.get('the_invoice_has_been_deleted_successfully'), intent: Intent.SUCCESS, }); }) diff --git a/client/src/containers/Alerts/Invoices/InvoiceDeliverAlert.js b/client/src/containers/Alerts/Invoices/InvoiceDeliverAlert.js index 5badf9335..267ac87fb 100644 --- a/client/src/containers/Alerts/Invoices/InvoiceDeliverAlert.js +++ b/client/src/containers/Alerts/Invoices/InvoiceDeliverAlert.js @@ -1,5 +1,6 @@ import React from 'react'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { Intent, Alert } from '@blueprintjs/core'; import { useDeliverInvoice } from 'hooks/query'; @@ -23,7 +24,7 @@ function InvoiceDeliverAlert({ // #withAlertActions closeAlert, }) { - const { formatMessage } = useIntl(); + const { mutateAsync: deliverInvoiceMutate, isLoading @@ -39,9 +40,7 @@ function InvoiceDeliverAlert({ deliverInvoiceMutate(invoiceId) .then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_invoice_has_been_delivered_successfully', - }), + message: intl.get('the_invoice_has_been_delivered_successfully'), intent: Intent.SUCCESS, }); }) diff --git a/client/src/containers/Alerts/Items/InventoryAdjustmentDeleteAlert.js b/client/src/containers/Alerts/Items/InventoryAdjustmentDeleteAlert.js index f40e31d36..9959a2dfd 100644 --- a/client/src/containers/Alerts/Items/InventoryAdjustmentDeleteAlert.js +++ b/client/src/containers/Alerts/Items/InventoryAdjustmentDeleteAlert.js @@ -1,9 +1,6 @@ import React from 'react'; -import { - FormattedMessage as T, - FormattedHTMLMessage, - useIntl, -} from 'react-intl'; +import intl from 'react-intl-universal'; +import { FormattedMessage as T, FormattedHTMLMessage } from 'components'; import { Intent, Alert } from '@blueprintjs/core'; import { AppToaster } from 'components'; @@ -28,7 +25,7 @@ function InventoryAdjustmentDeleteAlert({ // #withAlertActions closeAlert, }) { - const { formatMessage } = useIntl(); + const { mutateAsync: deleteInventoryAdjMutate, isLoading @@ -44,9 +41,7 @@ function InventoryAdjustmentDeleteAlert({ deleteInventoryAdjMutate(inventoryId) .then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_adjustment_has_been_deleted_successfully', - }), + message: intl.get('the_adjustment_has_been_deleted_successfully'), intent: Intent.SUCCESS, }); }) diff --git a/client/src/containers/Alerts/Items/ItemActivateAlert.js b/client/src/containers/Alerts/Items/ItemActivateAlert.js index 81f9d21e4..1e85fa791 100644 --- a/client/src/containers/Alerts/Items/ItemActivateAlert.js +++ b/client/src/containers/Alerts/Items/ItemActivateAlert.js @@ -1,5 +1,6 @@ import React from 'react'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { Intent, Alert } from '@blueprintjs/core'; import { AppToaster } from 'components'; @@ -25,7 +26,7 @@ function ItemActivateAlert({ // #withAlertActions closeAlert, }) { - const { formatMessage } = useIntl(); + const { mutateAsync: activateItem, isLoading } = useActivateItem(); // Handle activate item alert cancel. @@ -38,9 +39,7 @@ function ItemActivateAlert({ activateItem(itemId) .then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_item_has_been_activated_successfully', - }), + message: intl.get('the_item_has_been_activated_successfully'), intent: Intent.SUCCESS, }); }) diff --git a/client/src/containers/Alerts/Items/ItemBulkDeleteAlert.js b/client/src/containers/Alerts/Items/ItemBulkDeleteAlert.js index 6ca13c10d..b19804056 100644 --- a/client/src/containers/Alerts/Items/ItemBulkDeleteAlert.js +++ b/client/src/containers/Alerts/Items/ItemBulkDeleteAlert.js @@ -1,5 +1,6 @@ import React, { useState } from 'react'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { Intent, Alert } from '@blueprintjs/core'; import { size } from 'lodash'; import { AppToaster } from 'components'; @@ -26,7 +27,7 @@ function ItemBulkDeleteAlert({ // #withAlertActions closeAlert, }) { - const { formatMessage } = useIntl(); + const [isLoading, setLoading] = useState(false); // handle cancel item bulk delete alert. @@ -39,9 +40,7 @@ function ItemBulkDeleteAlert({ requestDeleteBulkItems(itemsIds) .then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_items_has_been_deleted_successfully', - }), + message: intl.get('the_items_has_been_deleted_successfully'), intent: Intent.SUCCESS, }); }) diff --git a/client/src/containers/Alerts/Items/ItemCategoryBulkDeleteAlert.js b/client/src/containers/Alerts/Items/ItemCategoryBulkDeleteAlert.js index bbc7ce97f..5505b55fb 100644 --- a/client/src/containers/Alerts/Items/ItemCategoryBulkDeleteAlert.js +++ b/client/src/containers/Alerts/Items/ItemCategoryBulkDeleteAlert.js @@ -1,9 +1,6 @@ import React, { useState } from 'react'; -import { - FormattedMessage as T, - FormattedHTMLMessage, - useIntl, -} from 'react-intl'; +import intl from 'react-intl-universal'; +import { FormattedMessage as T, FormattedHTMLMessage } from 'components'; import { Intent, Alert } from '@blueprintjs/core'; import { size } from 'lodash'; import { AppToaster } from 'components'; @@ -30,7 +27,7 @@ function ItemCategoryBulkDeleteAlert({ // #withAlertActions closeAlert, }) { - const { formatMessage } = useIntl(); + const [isLoading, setLoading] = useState(false); // handle cancel bulk delete alert. @@ -44,9 +41,7 @@ function ItemCategoryBulkDeleteAlert({ requestDeleteBulkItemCategories(itemCategoriesIds) .then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_item_categories_has_been_deleted_successfully', - }), + message: intl.get('the_item_categories_has_been_deleted_successfully'), intent: Intent.SUCCESS, }); }) diff --git a/client/src/containers/Alerts/Items/ItemCategoryDeleteAlert.js b/client/src/containers/Alerts/Items/ItemCategoryDeleteAlert.js index 13b337c0b..eeeccbc8d 100644 --- a/client/src/containers/Alerts/Items/ItemCategoryDeleteAlert.js +++ b/client/src/containers/Alerts/Items/ItemCategoryDeleteAlert.js @@ -1,9 +1,6 @@ import React from 'react'; -import { - FormattedMessage as T, - FormattedHTMLMessage, - useIntl, -} from 'react-intl'; +import intl from 'react-intl-universal'; +import { FormattedMessage as T, FormattedHTMLMessage } from 'components'; import { Intent, Alert } from '@blueprintjs/core'; import { useDeleteItemCategory } from 'hooks/query'; @@ -27,7 +24,7 @@ function ItemCategoryDeleteAlert({ // #withAlertActions closeAlert, }) { - const { formatMessage } = useIntl(); + const { mutateAsync: deleteItemCategory, isLoading, @@ -43,9 +40,7 @@ function ItemCategoryDeleteAlert({ deleteItemCategory(itemCategoryId) .then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_item_category_has_been_deleted_successfully', - }), + message: intl.get('the_item_category_has_been_deleted_successfully'), intent: Intent.SUCCESS, }); }) diff --git a/client/src/containers/Alerts/Items/ItemDeleteAlert.js b/client/src/containers/Alerts/Items/ItemDeleteAlert.js index e8276af35..7a81baa5e 100644 --- a/client/src/containers/Alerts/Items/ItemDeleteAlert.js +++ b/client/src/containers/Alerts/Items/ItemDeleteAlert.js @@ -1,9 +1,6 @@ import React from 'react'; -import { - FormattedMessage as T, - FormattedHTMLMessage, - useIntl, -} from 'react-intl'; +import intl from 'react-intl-universal'; +import { FormattedMessage as T, FormattedHTMLMessage } from 'components'; import { Intent, Alert } from '@blueprintjs/core'; import { AppToaster } from 'components'; @@ -33,7 +30,7 @@ function ItemDeleteAlert({ setItemsTableState, }) { const { mutateAsync: deleteItem, isLoading } = useDeleteItem(); - const { formatMessage } = useIntl(); + // Handle cancel delete item alert. const handleCancelItemDelete = () => { @@ -45,9 +42,7 @@ function ItemDeleteAlert({ deleteItem(itemId) .then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_item_has_been_deleted_successfully', - }), + message: intl.get('the_item_has_been_deleted_successfully'), intent: Intent.SUCCESS, }); // Reset to page number one. diff --git a/client/src/containers/Alerts/Items/ItemInactivateAlert.js b/client/src/containers/Alerts/Items/ItemInactivateAlert.js index a08e2f70d..79d26e85f 100644 --- a/client/src/containers/Alerts/Items/ItemInactivateAlert.js +++ b/client/src/containers/Alerts/Items/ItemInactivateAlert.js @@ -1,5 +1,6 @@ import React from 'react'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { Intent, Alert } from '@blueprintjs/core'; import { AppToaster } from 'components'; @@ -23,7 +24,7 @@ function ItemInactivateAlert({ // #withAlertActions closeAlert, }) { - const { formatMessage } = useIntl(); + const { mutateAsync: inactivateItem, isLoading } = useInactivateItem(); // Handle cancel inactivate alert. @@ -36,9 +37,7 @@ function ItemInactivateAlert({ inactivateItem(itemId) .then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_item_has_been_inactivated_successfully', - }), + message: intl.get('the_item_has_been_inactivated_successfully'), intent: Intent.SUCCESS, }); }) diff --git a/client/src/containers/Alerts/ItemsEntries/ItemsEntriesDeleteAlert.js b/client/src/containers/Alerts/ItemsEntries/ItemsEntriesDeleteAlert.js index 862a75b99..5d68827cd 100644 --- a/client/src/containers/Alerts/ItemsEntries/ItemsEntriesDeleteAlert.js +++ b/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'; diff --git a/client/src/containers/Alerts/ManualJournals/JournalDeleteAlert.js b/client/src/containers/Alerts/ManualJournals/JournalDeleteAlert.js index 0a1746dac..155506589 100644 --- a/client/src/containers/Alerts/ManualJournals/JournalDeleteAlert.js +++ b/client/src/containers/Alerts/ManualJournals/JournalDeleteAlert.js @@ -1,6 +1,7 @@ import React from 'react'; import { Intent, Alert } from '@blueprintjs/core'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { useDeleteJournal } from 'hooks/query'; import { AppToaster } from 'components'; @@ -23,7 +24,7 @@ function JournalDeleteAlert({ // #withAlertActions closeAlert, }) { - const { formatMessage } = useIntl(); + const { mutateAsync: deleteJournalMutate, isLoading } = useDeleteJournal(); // Handle cancel delete manual journal. @@ -36,8 +37,8 @@ function JournalDeleteAlert({ deleteJournalMutate(manualJournalId) .then(() => { AppToaster.show({ - message: formatMessage( - { id: 'the_journal_has_been_deleted_successfully' }, + message: intl.get( + 'the_journal_has_been_deleted_successfully', { number: journalNumber }, ), intent: Intent.SUCCESS, diff --git a/client/src/containers/Alerts/ManualJournals/JournalDeleteEntriesAlert.js b/client/src/containers/Alerts/ManualJournals/JournalDeleteEntriesAlert.js index 09697f2be..b68615d12 100644 --- a/client/src/containers/Alerts/ManualJournals/JournalDeleteEntriesAlert.js +++ b/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'; diff --git a/client/src/containers/Alerts/ManualJournals/JournalPublishAlert.js b/client/src/containers/Alerts/ManualJournals/JournalPublishAlert.js index 176df458e..7930b4672 100644 --- a/client/src/containers/Alerts/ManualJournals/JournalPublishAlert.js +++ b/client/src/containers/Alerts/ManualJournals/JournalPublishAlert.js @@ -1,6 +1,7 @@ import React from 'react'; import { Intent, Alert } from '@blueprintjs/core'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { usePublishJournal } from 'hooks/query'; import { AppToaster } from 'components'; @@ -23,7 +24,7 @@ function JournalPublishAlert({ // #withAlertActions closeAlert, }) { - const { formatMessage } = useIntl(); + const { mutateAsync: publishJournalMutate, isLoading } = usePublishJournal(); // Handle cancel manual journal alert. @@ -36,9 +37,7 @@ function JournalPublishAlert({ publishJournalMutate(manualJournalId) .then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_manual_journal_has_been_published', - }), + message: intl.get('the_manual_journal_has_been_published'), intent: Intent.SUCCESS, }); }) diff --git a/client/src/containers/Alerts/PaymentMades/ClearTransactionAlert.js b/client/src/containers/Alerts/PaymentMades/ClearTransactionAlert.js index 9adb0f22d..2fe137383 100644 --- a/client/src/containers/Alerts/PaymentMades/ClearTransactionAlert.js +++ b/client/src/containers/Alerts/PaymentMades/ClearTransactionAlert.js @@ -1,6 +1,6 @@ import React from 'react'; import { Intent, Alert } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import withAlertActions from 'containers/Alert/withAlertActions'; import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect'; diff --git a/client/src/containers/Alerts/PaymentMades/ClearningAllLinesAlert.js b/client/src/containers/Alerts/PaymentMades/ClearningAllLinesAlert.js index e9c3a670c..21856e5e6 100644 --- a/client/src/containers/Alerts/PaymentMades/ClearningAllLinesAlert.js +++ b/client/src/containers/Alerts/PaymentMades/ClearningAllLinesAlert.js @@ -1,6 +1,6 @@ import React from 'react'; import { Intent, Alert } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import withAlertActions from 'containers/Alert/withAlertActions'; import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect'; diff --git a/client/src/containers/Alerts/PaymentMades/PaymentMadeDeleteAlert.js b/client/src/containers/Alerts/PaymentMades/PaymentMadeDeleteAlert.js index 3d1177057..109cf3f3a 100644 --- a/client/src/containers/Alerts/PaymentMades/PaymentMadeDeleteAlert.js +++ b/client/src/containers/Alerts/PaymentMades/PaymentMadeDeleteAlert.js @@ -1,5 +1,6 @@ import React from 'react'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { Intent, Alert } from '@blueprintjs/core'; import { AppToaster } from 'components'; @@ -23,7 +24,7 @@ function PaymentMadeDeleteAlert({ // #withAlertActions closeAlert, }) { - const { formatMessage } = useIntl(); + const { mutateAsync: deletePaymentMadeMutate, isLoading, @@ -37,9 +38,7 @@ function PaymentMadeDeleteAlert({ deletePaymentMadeMutate(paymentMadeId) .then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_payment_made_has_been_deleted_successfully', - }), + message: intl.get('the_payment_made_has_been_deleted_successfully'), intent: Intent.SUCCESS, }); }) diff --git a/client/src/containers/Alerts/PaymentReceives/ClearingAllLinesAlert.js b/client/src/containers/Alerts/PaymentReceives/ClearingAllLinesAlert.js index 9143d98aa..4c634b7d0 100644 --- a/client/src/containers/Alerts/PaymentReceives/ClearingAllLinesAlert.js +++ b/client/src/containers/Alerts/PaymentReceives/ClearingAllLinesAlert.js @@ -1,6 +1,6 @@ import React from 'react'; import { Intent, Alert } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import withAlertActions from 'containers/Alert/withAlertActions'; import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect'; diff --git a/client/src/containers/Alerts/PaymentReceives/PaymentReceiveDeleteAlert.js b/client/src/containers/Alerts/PaymentReceives/PaymentReceiveDeleteAlert.js index 13fddc499..9afc7a453 100644 --- a/client/src/containers/Alerts/PaymentReceives/PaymentReceiveDeleteAlert.js +++ b/client/src/containers/Alerts/PaymentReceives/PaymentReceiveDeleteAlert.js @@ -1,9 +1,6 @@ import React from 'react'; -import { - FormattedMessage as T, - FormattedHTMLMessage, - useIntl, -} from 'react-intl'; +import intl from 'react-intl-universal'; +import { FormattedMessage as T, FormattedHTMLMessage } from 'components'; import { Intent, Alert } from '@blueprintjs/core'; import { useDeletePaymentReceive } from 'hooks/query'; @@ -27,7 +24,7 @@ function PaymentReceiveDeleteAlert({ // #withAlertActions closeAlert, }) { - const { formatMessage } = useIntl(); + const { mutateAsync: deletePaymentReceiveMutate, isLoading, @@ -43,9 +40,7 @@ function PaymentReceiveDeleteAlert({ deletePaymentReceiveMutate(paymentReceiveId) .then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_payment_receive_has_been_deleted_successfully', - }), + message: intl.get('the_payment_receive_has_been_deleted_successfully'), intent: Intent.SUCCESS, }); }) diff --git a/client/src/containers/Alerts/Receipts/ReceiptCloseAlert.js b/client/src/containers/Alerts/Receipts/ReceiptCloseAlert.js index 13399e2f3..582033007 100644 --- a/client/src/containers/Alerts/Receipts/ReceiptCloseAlert.js +++ b/client/src/containers/Alerts/Receipts/ReceiptCloseAlert.js @@ -1,5 +1,6 @@ import React from 'react'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { Intent, Alert } from '@blueprintjs/core'; import { useCloseReceipt } from 'hooks/query'; @@ -23,7 +24,7 @@ function ReceiptCloseAlert({ // #withAlertActions closeAlert, }) { - const { formatMessage } = useIntl(); + const { mutateAsync: closeReceiptMutate, isLoading } = useCloseReceipt(); // handle cancel delete alert. @@ -36,9 +37,7 @@ function ReceiptCloseAlert({ closeReceiptMutate(receiptId) .then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_receipt_has_been_closed_successfully', - }), + message: intl.get('the_receipt_has_been_closed_successfully'), intent: Intent.SUCCESS, }); }) diff --git a/client/src/containers/Alerts/Receipts/ReceiptDeleteAlert.js b/client/src/containers/Alerts/Receipts/ReceiptDeleteAlert.js index 37c4cea88..2e1660ac8 100644 --- a/client/src/containers/Alerts/Receipts/ReceiptDeleteAlert.js +++ b/client/src/containers/Alerts/Receipts/ReceiptDeleteAlert.js @@ -1,9 +1,6 @@ import React from 'react'; -import { - FormattedMessage as T, - FormattedHTMLMessage, - useIntl, -} from 'react-intl'; +import intl from 'react-intl-universal'; +import { FormattedMessage as T, FormattedHTMLMessage } from 'components'; import { Intent, Alert } from '@blueprintjs/core'; import { queryCache } from 'react-query'; @@ -28,7 +25,7 @@ function NameDeleteAlert({ // #withAlertActions closeAlert, }) { - const { formatMessage } = useIntl(); + const { mutateAsync: deleteReceiptMutate, isLoading @@ -44,9 +41,7 @@ function NameDeleteAlert({ deleteReceiptMutate(receiptId) .then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_receipt_has_been_deleted_successfully', - }), + message: intl.get('the_receipt_has_been_deleted_successfully'), intent: Intent.SUCCESS, }); }) diff --git a/client/src/containers/Alerts/Users/UserActivateAlert.js b/client/src/containers/Alerts/Users/UserActivateAlert.js index 28737e586..dabae8ca6 100644 --- a/client/src/containers/Alerts/Users/UserActivateAlert.js +++ b/client/src/containers/Alerts/Users/UserActivateAlert.js @@ -1,5 +1,6 @@ import React from 'react'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { Alert, Intent } from '@blueprintjs/core'; import { AppToaster } from 'components'; import { useActivateUser } from 'hooks/query'; @@ -23,7 +24,7 @@ function UserActivateAlert({ // #withAlertActions closeAlert, }) { - const { formatMessage } = useIntl(); + const { mutateAsync: userActivateMutate } = useActivateUser(); @@ -31,9 +32,7 @@ function UserActivateAlert({ userActivateMutate(userId) .then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_user_has_been_activated_successfully', - }), + message: intl.get('the_user_has_been_activated_successfully'), intent: Intent.SUCCESS, }); closeAlert(name); diff --git a/client/src/containers/Alerts/Users/UserDeleteAlert.js b/client/src/containers/Alerts/Users/UserDeleteAlert.js index 5c6f8471b..5ca9a60d3 100644 --- a/client/src/containers/Alerts/Users/UserDeleteAlert.js +++ b/client/src/containers/Alerts/Users/UserDeleteAlert.js @@ -1,6 +1,7 @@ import React from 'react'; import { Intent, Alert } from '@blueprintjs/core'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { useDeleteUser } from 'hooks/query'; import { AppToaster } from 'components'; @@ -24,7 +25,7 @@ function UserDeleteAlert({ // #withAlertActions closeAlert, }) { - const { formatMessage } = useIntl(); + const { mutateAsync: deleteUserMutate, isLoading } = useDeleteUser(); const handleCancelUserDelete = () => { @@ -35,9 +36,7 @@ function UserDeleteAlert({ deleteUserMutate(userId) .then((response) => { AppToaster.show({ - message: formatMessage({ - id: 'the_user_has_been_deleted_successfully', - }), + message: intl.get('the_user_has_been_deleted_successfully'), intent: Intent.SUCCESS, }); closeAlert(name); diff --git a/client/src/containers/Alerts/Users/UserInactivateAlert.js b/client/src/containers/Alerts/Users/UserInactivateAlert.js index b6894ae98..49361fce4 100644 --- a/client/src/containers/Alerts/Users/UserInactivateAlert.js +++ b/client/src/containers/Alerts/Users/UserInactivateAlert.js @@ -1,5 +1,6 @@ import React from 'react'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { Alert, Intent } from '@blueprintjs/core'; import { AppToaster } from 'components'; import { useInactivateUser } from 'hooks/query'; @@ -23,7 +24,7 @@ function UserInactivateAlert({ // #withAlertActions closeAlert, }) { - const { formatMessage } = useIntl(); + const { mutateAsync: userInactivateMutate } = useInactivateUser(); @@ -31,9 +32,7 @@ function UserInactivateAlert({ userInactivateMutate(userId) .then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_user_has_been_inactivated_successfully', - }), + message: intl.get('the_user_has_been_inactivated_successfully'), intent: Intent.SUCCESS, }); closeAlert(name); diff --git a/client/src/containers/Alerts/Vendors/VendorDeleteAlert.js b/client/src/containers/Alerts/Vendors/VendorDeleteAlert.js index cf73a3616..fa8e3098f 100644 --- a/client/src/containers/Alerts/Vendors/VendorDeleteAlert.js +++ b/client/src/containers/Alerts/Vendors/VendorDeleteAlert.js @@ -1,10 +1,8 @@ import React, { useCallback } from 'react'; -import { - FormattedMessage as T, - FormattedHTMLMessage, - useIntl, -} from 'react-intl'; +import intl from 'react-intl-universal'; +import { FormattedMessage as T, FormattedHTMLMessage } from 'components'; import { Intent, Alert } from '@blueprintjs/core'; + import { AppToaster } from 'components'; import { transformErrors } from 'containers/Vendors/utils'; import { useDeleteVendor } from 'hooks/query'; @@ -27,7 +25,7 @@ function VendorDeleteAlert({ // #withAlertActions closeAlert, }) { - const { formatMessage } = useIntl(); + const { mutateAsync: deleteVendorMutate, isLoading } = useDeleteVendor(); // Handle cancel delete the vendor. @@ -40,9 +38,7 @@ function VendorDeleteAlert({ deleteVendorMutate(vendorId) .then(() => { AppToaster.show({ - message: formatMessage({ - id: 'the_vendor_has_been_deleted_successfully', - }), + message: intl.get('the_vendor_has_been_deleted_successfully'), intent: Intent.SUCCESS, }); }) @@ -58,7 +54,7 @@ function VendorDeleteAlert({ .finally(() => { closeAlert(name); }); - }, [deleteVendorMutate, name, closeAlert, vendorId, formatMessage]); + }, [deleteVendorMutate, name, closeAlert, vendorId]); return ( -
{ children }
diff --git a/client/src/containers/Authentication/InviteAcceptForm.js b/client/src/containers/Authentication/InviteAcceptForm.js index 2bc11effc..cc7d1164c 100644 --- a/client/src/containers/Authentication/InviteAcceptForm.js +++ b/client/src/containers/Authentication/InviteAcceptForm.js @@ -2,7 +2,8 @@ import React from 'react'; import { Intent, Position } from '@blueprintjs/core'; import { Formik } from 'formik'; import { useHistory } from 'react-router-dom'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { isEmpty } from 'lodash'; import { useInviteAcceptContext } from './InviteAcceptProvider'; @@ -12,7 +13,7 @@ import InviteAcceptFormContent from './InviteAcceptFormContent'; export default function InviteAcceptForm() { const history = useHistory(); - const { formatMessage } = useIntl(); + // Invite accept context. const { @@ -53,7 +54,7 @@ export default function InviteAcceptForm() { }) => { if (errors.find((e) => e.type === 'INVITE.TOKEN.NOT.FOUND')) { AppToaster.show({ - message: formatMessage({ id: 'an_unexpected_error_occurred' }), + message: intl.get('an_unexpected_error_occurred'), intent: Intent.DANGER, position: Position.BOTTOM, }); diff --git a/client/src/containers/Authentication/InviteAcceptFormContent.js b/client/src/containers/Authentication/InviteAcceptFormContent.js index 7b8b8191b..ad3d0e3a5 100644 --- a/client/src/containers/Authentication/InviteAcceptFormContent.js +++ b/client/src/containers/Authentication/InviteAcceptFormContent.js @@ -2,7 +2,7 @@ import React from 'react'; import { Button, InputGroup, Intent, FormGroup } from '@blueprintjs/core'; import { Form, ErrorMessage, FastField, useFormikContext } from 'formik'; import { Link } from 'react-router-dom'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import { inputIntent } from 'utils'; import { Col, Row } from 'components'; import { useInviteAcceptContext } from './InviteAcceptProvider'; diff --git a/client/src/containers/Authentication/Login.js b/client/src/containers/Authentication/Login.js index c5f23e726..7007cc471 100644 --- a/client/src/containers/Authentication/Login.js +++ b/client/src/containers/Authentication/Login.js @@ -1,7 +1,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; import { Formik } from 'formik'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import Toaster from 'components/AppToaster'; import AuthInsider from 'containers/Authentication/AuthInsider'; diff --git a/client/src/containers/Authentication/LoginForm.js b/client/src/containers/Authentication/LoginForm.js index 97856d420..737e0c867 100644 --- a/client/src/containers/Authentication/LoginForm.js +++ b/client/src/containers/Authentication/LoginForm.js @@ -7,7 +7,7 @@ import { Checkbox, } from '@blueprintjs/core'; import { Form, ErrorMessage, Field } from 'formik'; -import { FormattedMessage as T } from 'react-intl'; +import { T } from 'components'; import { inputIntent } from 'utils'; import { PasswordRevealer } from './components'; diff --git a/client/src/containers/Authentication/Register.js b/client/src/containers/Authentication/Register.js index 973208228..864f8f9a6 100644 --- a/client/src/containers/Authentication/Register.js +++ b/client/src/containers/Authentication/Register.js @@ -4,8 +4,9 @@ import { Link, useHistory } from 'react-router-dom'; import { Intent, } from '@blueprintjs/core'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import intl from 'react-intl-universal'; +import { FormattedMessage as T } from 'components'; import AppToaster from 'components/AppToaster'; import AuthInsider from 'containers/Authentication/AuthInsider'; import { useAuthLogin, useAuthRegister } from '../../hooks/query/authentication'; @@ -17,7 +18,6 @@ import { RegisterSchema, transformRegisterErrorsToForm } from './utils'; * Register form. */ export default function RegisterUserForm() { - const { formatMessage } = useIntl(); const history = useHistory(); const { mutateAsync: authLoginMutate } = useAuthLogin(); @@ -48,7 +48,7 @@ export default function RegisterUserForm() { }) .catch(({ response: { data: { errors } } }) => { AppToaster.show({ - message: formatMessage({ id: 'something_wentwrong' }), + message: intl.get('something_wentwrong'), intent: Intent.SUCCESS, }); }); diff --git a/client/src/containers/Authentication/RegisterForm.js b/client/src/containers/Authentication/RegisterForm.js index 09b4cbf5a..742e2db66 100644 --- a/client/src/containers/Authentication/RegisterForm.js +++ b/client/src/containers/Authentication/RegisterForm.js @@ -7,7 +7,7 @@ import { Spinner, } from '@blueprintjs/core'; import { ErrorMessage, Field, Form } from 'formik'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import { Link } from 'react-router-dom'; import { Row, Col, If } from 'components'; import { PasswordRevealer } from './components'; diff --git a/client/src/containers/Authentication/ResetPassword.js b/client/src/containers/Authentication/ResetPassword.js index 8116e60bb..a3ceea2e9 100644 --- a/client/src/containers/Authentication/ResetPassword.js +++ b/client/src/containers/Authentication/ResetPassword.js @@ -5,7 +5,8 @@ import { Position, } from '@blueprintjs/core'; import { Link, useParams, useHistory } from 'react-router-dom'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { useAuthResetPassword } from 'hooks/query'; @@ -18,7 +19,7 @@ import { ResetPasswordSchema } from './utils'; * Reset password page. */ export default function ResetPassword() { - const { formatMessage } = useIntl(); + const { token } = useParams(); const history = useHistory(); @@ -39,7 +40,7 @@ export default function ResetPassword() { authResetPasswordMutate([token, values]) .then((response) => { AppToaster.show({ - message: formatMessage('password_successfully_updated'), + message: intl.get('password_successfully_updated'), intent: Intent.DANGER, position: Position.BOTTOM, }); @@ -49,7 +50,7 @@ export default function ResetPassword() { .catch(({ response: { data: { errors } } }) => { if (errors.find((e) => e.type === 'TOKEN_INVALID')) { AppToaster.show({ - message: formatMessage({ id: 'an_unexpected_error_occurred' }), + message: intl.get('an_unexpected_error_occurred'), intent: Intent.DANGER, position: Position.BOTTOM, }); diff --git a/client/src/containers/Authentication/ResetPasswordForm.js b/client/src/containers/Authentication/ResetPasswordForm.js index 30a7bb446..0df783c6a 100644 --- a/client/src/containers/Authentication/ResetPasswordForm.js +++ b/client/src/containers/Authentication/ResetPasswordForm.js @@ -1,7 +1,7 @@ import React from 'react'; import { Button, InputGroup, Intent, FormGroup } from '@blueprintjs/core'; import { Form, ErrorMessage, FastField } from 'formik'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import { inputIntent } from 'utils'; /** diff --git a/client/src/containers/Authentication/SendResetPassword.js b/client/src/containers/Authentication/SendResetPassword.js index b467e3cc5..52fe928b2 100644 --- a/client/src/containers/Authentication/SendResetPassword.js +++ b/client/src/containers/Authentication/SendResetPassword.js @@ -1,9 +1,10 @@ import React, { useMemo } from 'react'; import { Formik } from 'formik'; -import { FormattedMessage as T, useIntl } from 'react-intl'; import { Link, useHistory } from 'react-router-dom'; import { Intent } from '@blueprintjs/core'; +import intl from 'react-intl-universal'; +import { FormattedMessage as T } from 'components'; import { useAuthSendResetPassword } from 'hooks/query'; import Toaster from 'components/AppToaster'; import SendResetPasswordForm from './SendResetPasswordForm'; @@ -16,7 +17,6 @@ import AuthInsider from 'containers/Authentication/AuthInsider'; * Send reset password page. */ export default function SendResetPassword({ requestSendResetPassword }) { - const { formatMessage } = useIntl(); const history = useHistory(); const { mutateAsync: sendResetPasswordMutate } = useAuthSendResetPassword(); @@ -34,9 +34,7 @@ export default function SendResetPassword({ requestSendResetPassword }) { sendResetPasswordMutate({ email: values.crediential }) .then((response) => { AppToaster.show({ - message: formatMessage({ - id: 'check_your_email_for_a_link_to_reset', - }), + message: intl.get('check_your_email_for_a_link_to_reset'), intent: Intent.SUCCESS, }); history.push('/auth/login'); diff --git a/client/src/containers/Authentication/SendResetPasswordForm.js b/client/src/containers/Authentication/SendResetPasswordForm.js index 5107c045d..c84030db4 100644 --- a/client/src/containers/Authentication/SendResetPasswordForm.js +++ b/client/src/containers/Authentication/SendResetPasswordForm.js @@ -6,7 +6,7 @@ import { FormGroup, } from '@blueprintjs/core'; import { Form, ErrorMessage, FastField } from 'formik'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import { inputIntent } from 'utils'; /** diff --git a/client/src/containers/Authentication/components.js b/client/src/containers/Authentication/components.js index 2c3740f8e..f8020db49 100644 --- a/client/src/containers/Authentication/components.js +++ b/client/src/containers/Authentication/components.js @@ -1,5 +1,5 @@ import React from 'react'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import ContentLoader from 'react-content-loader'; import { If, Icon } from 'components'; import { saveInvoke } from 'utils'; diff --git a/client/src/containers/Authentication/utils.js b/client/src/containers/Authentication/utils.js index c0f8f441d..7872c5898 100644 --- a/client/src/containers/Authentication/utils.js +++ b/client/src/containers/Authentication/utils.js @@ -1,6 +1,6 @@ import * as Yup from 'yup'; import { Intent } from '@blueprintjs/core'; -import { formatMessage } from 'services/intl'; +import intl from 'react-intl-universal'; export const LOGIN_ERRORS = { INVALID_DETAILS: 'INVALID_DETAILS', @@ -13,48 +13,47 @@ const REGISTER_ERRORS = { EMAIL_EXISTS: 'EMAIL.EXISTS', }; - export const LoginSchema = Yup.object().shape({ crediential: Yup.string() .required() .email() - .label(formatMessage({ id: 'email' })), + .label(intl.get('email')), password: Yup.string() .required() .min(4) - .label(formatMessage({ id: 'password' })), + .label(intl.get('password')), }); export const RegisterSchema = Yup.object().shape({ first_name: Yup.string() .required() - .label(formatMessage({ id: 'first_name_' })), + .label(intl.get('first_name_')), last_name: Yup.string() .required() - .label(formatMessage({ id: 'last_name_' })), + .label(intl.get('last_name_')), email: Yup.string() .email() .required() - .label(formatMessage({ id: 'email' })), + .label(intl.get('email')), phone_number: Yup.string() .matches() .required() - .label(formatMessage({ id: 'phone_number_' })), + .label(intl.get('phone_number_')), password: Yup.string() .min(4) .required() - .label(formatMessage({ id: 'password' })), + .label(intl.get('password')), }); export const ResetPasswordSchema = Yup.object().shape({ password: Yup.string() .min(4) .required() - .label(formatMessage({ id: 'password' })), + .label(intl.get('password')), confirm_password: Yup.string() .oneOf([Yup.ref('password'), null]) .required() - .label(formatMessage({ id: 'confirm_password' })), + .label(intl.get('confirm_password')), }); // Validation schema. @@ -62,24 +61,24 @@ export const SendResetPasswordSchema = Yup.object().shape({ crediential: Yup.string() .required() .email() - .label(formatMessage({ id: 'email' })), + .label(intl.get('email')), }); export const InviteAcceptSchema = Yup.object().shape({ first_name: Yup.string() .required() - .label(formatMessage({ id: 'first_name_' })), + .label(intl.get('first_name_')), last_name: Yup.string() .required() - .label(formatMessage({ id: 'last_name_' })), + .label(intl.get('last_name_')), phone_number: Yup.string() .matches() .required() - .label(formatMessage({ id: 'phone_number' })), + .label(intl.get('phone_number')), password: Yup.string() .min(4) .required() - .label(formatMessage({ id: 'password' })), + .label(intl.get('password')), }); export const transformSendResetPassErrorsToToasts = (errors) => { @@ -87,9 +86,7 @@ export const transformSendResetPassErrorsToToasts = (errors) => { if (errors.find((e) => e.type === 'EMAIL.NOT.REGISTERED')) { toastBuilders.push({ - message: formatMessage({ - id: 'we_couldn_t_find_your_account_with_that_email', - }), + message: intl.get('we_couldn_t_find_your_account_with_that_email'), intent: Intent.DANGER, }); } @@ -101,17 +98,13 @@ export const transformLoginErrorsToToasts = (errors) => { if (errors.find((e) => e.type === LOGIN_ERRORS.INVALID_DETAILS)) { toastBuilders.push({ - message: formatMessage({ - id: 'email_and_password_entered_did_not_match', - }), + message: intl.get('email_and_password_entered_did_not_match'), intent: Intent.DANGER, }); } if (errors.find((e) => e.type === LOGIN_ERRORS.USER_INACTIVE)) { toastBuilders.push({ - message: formatMessage({ - id: 'the_user_has_been_suspended_from_admin', - }), + message: intl.get('the_user_has_been_suspended_from_admin'), intent: Intent.DANGER, }); } @@ -119,9 +112,7 @@ export const transformLoginErrorsToToasts = (errors) => { errors.find((e) => e.type === LOGIN_ERRORS.LOGIN_TO_MANY_ATTEMPTS) ) { toastBuilders.push({ - message: formatMessage({ - id: 'your_account_has_been_locked', - }), + message: intl.get('your_account_has_been_locked'), intent: Intent.DANGER, }); } @@ -132,14 +123,10 @@ export const transformRegisterErrorsToForm = (errors) => { const formErrors = {}; if (errors.some((e) => e.type === REGISTER_ERRORS.PHONE_NUMBER_EXISTS)) { - formErrors.phone_number = formatMessage({ - id: 'the_phone_number_already_used_in_another_account', - }); + formErrors.phone_number = intl.get('the_phone_number_already_used_in_another_account'); } if (errors.some((e) => e.type === REGISTER_ERRORS.EMAIL_EXISTS)) { - formErrors.email = formatMessage({ - id: 'the_email_already_used_in_another_account', - }); + formErrors.email = intl.get('the_email_already_used_in_another_account'); } return formErrors; } \ No newline at end of file diff --git a/client/src/containers/Customers/CustomerForm/CustomerAddressTabs.js b/client/src/containers/Customers/CustomerForm/CustomerAddressTabs.js index 6b2da9fce..f48fca831 100644 --- a/client/src/containers/Customers/CustomerForm/CustomerAddressTabs.js +++ b/client/src/containers/Customers/CustomerForm/CustomerAddressTabs.js @@ -1,7 +1,7 @@ import React from 'react'; import { FormGroup, InputGroup, TextArea } from '@blueprintjs/core'; import { Row, Col } from 'components'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import { FastField, ErrorMessage } from 'formik'; import { inputIntent } from 'utils'; diff --git a/client/src/containers/Customers/CustomerForm/CustomerAttachmentTabs.js b/client/src/containers/Customers/CustomerForm/CustomerAttachmentTabs.js index ca8abd137..8709d745e 100644 --- a/client/src/containers/Customers/CustomerForm/CustomerAttachmentTabs.js +++ b/client/src/containers/Customers/CustomerForm/CustomerAttachmentTabs.js @@ -6,7 +6,7 @@ import React, { useCallback, } from 'react'; import Dragzone from 'components/Dragzone'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; function CustomerAttachmentTabs() { return ( diff --git a/client/src/containers/Customers/CustomerForm/CustomerFinancialPanel.js b/client/src/containers/Customers/CustomerForm/CustomerFinancialPanel.js index 504baf907..4193487bb 100644 --- a/client/src/containers/Customers/CustomerForm/CustomerFinancialPanel.js +++ b/client/src/containers/Customers/CustomerForm/CustomerFinancialPanel.js @@ -11,7 +11,7 @@ import { Row, Col, } from 'components'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import { useCustomerFormContext } from './CustomerFormProvider'; diff --git a/client/src/containers/Customers/CustomerForm/CustomerFloatingActions.js b/client/src/containers/Customers/CustomerForm/CustomerFloatingActions.js index d7b1abb0c..2db9b862b 100644 --- a/client/src/containers/Customers/CustomerForm/CustomerFloatingActions.js +++ b/client/src/containers/Customers/CustomerForm/CustomerFloatingActions.js @@ -9,7 +9,7 @@ import { Menu, MenuItem, } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import classNames from 'classnames'; import { useHistory } from 'react-router-dom'; import { useFormikContext } from 'formik'; diff --git a/client/src/containers/Customers/CustomerForm/CustomerForm.js b/client/src/containers/Customers/CustomerForm/CustomerForm.js index 5d194b604..ea799a2e9 100644 --- a/client/src/containers/Customers/CustomerForm/CustomerForm.js +++ b/client/src/containers/Customers/CustomerForm/CustomerForm.js @@ -2,7 +2,7 @@ import React, { useMemo } from 'react'; import { Formik, Form } from 'formik'; import moment from 'moment'; import { Intent } from '@blueprintjs/core'; -import { useIntl } from 'react-intl'; +import intl from 'react-intl-universal'; import classNames from 'classnames'; import { useHistory } from 'react-router-dom'; @@ -75,7 +75,7 @@ function CustomerForm({ // const isNewMode = !customerId; const history = useHistory(); - const { formatMessage } = useIntl(); + /** * Initial values in create and edit mode. @@ -98,11 +98,11 @@ function CustomerForm({ const onSuccess = () => { AppToaster.show({ - message: formatMessage({ - id: isNewMode + message: intl.get( + isNewMode ? 'the_customer_has_been_created_successfully' : 'the_item_customer_has_been_edited_successfully', - }), + ), intent: Intent.SUCCESS, }); setSubmitting(false); diff --git a/client/src/containers/Customers/CustomerForm/CustomerForm.schema.js b/client/src/containers/Customers/CustomerForm/CustomerForm.schema.js index 52b1f6ca7..140abe9c9 100644 --- a/client/src/containers/Customers/CustomerForm/CustomerForm.schema.js +++ b/client/src/containers/Customers/CustomerForm/CustomerForm.schema.js @@ -1,11 +1,11 @@ import * as Yup from 'yup'; -import { formatMessage } from 'services/intl'; +import intl from 'react-intl-universal'; const Schema = Yup.object().shape({ customer_type: Yup.string() .required() .trim() - .label(formatMessage({ id: 'customer_type_' })), + .label(intl.get('customer_type_')), salutation: Yup.string().trim(), first_name: Yup.string().trim(), last_name: Yup.string().trim(), @@ -13,7 +13,7 @@ const Schema = Yup.object().shape({ display_name: Yup.string() .trim() .required() - .label(formatMessage({ id: 'display_name_' })), + .label(intl.get('display_name_')), email: Yup.string().email().nullable(), work_phone: Yup.number(), diff --git a/client/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.js b/client/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.js index 874797baf..d409b9d37 100644 --- a/client/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.js +++ b/client/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.js @@ -1,11 +1,12 @@ import React from 'react'; import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core'; import { FastField, ErrorMessage } from 'formik'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { inputIntent } from 'utils'; export default function CustomerFormAfterPrimarySection({}) { - const { formatMessage } = useIntl(); + return (
{/*------------ Customer email -----------*/} @@ -34,7 +35,7 @@ export default function CustomerFormAfterPrimarySection({}) { {({ field, meta: { error, touched } }) => ( )} @@ -44,7 +45,7 @@ export default function CustomerFormAfterPrimarySection({}) { {({ field, meta: { error, touched } }) => ( )} diff --git a/client/src/containers/Customers/CustomerForm/CustomerFormPrimarySection.js b/client/src/containers/Customers/CustomerForm/CustomerFormPrimarySection.js index 6ec2fe491..a0dcacef3 100644 --- a/client/src/containers/Customers/CustomerForm/CustomerFormPrimarySection.js +++ b/client/src/containers/Customers/CustomerForm/CustomerFormPrimarySection.js @@ -2,7 +2,8 @@ import React from 'react'; import classNames from 'classnames'; import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core'; import { FastField, Field, ErrorMessage } from 'formik'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { Hint, @@ -20,7 +21,7 @@ import { useAutofocus } from 'hooks'; */ export default function CustomerFormPrimarySection({}) { const firstNameFieldRef = useAutofocus(); - const { formatMessage } = useIntl(); + return (
@@ -55,7 +56,7 @@ export default function CustomerFormPrimarySection({}) { {({ field, meta: { error, touched } }) => ( (firstNameFieldRef.current = ref)} @@ -67,7 +68,7 @@ export default function CustomerFormPrimarySection({}) { {({ field, meta: { error, touched } }) => ( @@ -29,9 +30,9 @@ export default function RadioCustomer(props) { })} selectedValue={value} > - + diff --git a/client/src/containers/Customers/CustomerForm/CustomersTabs.js b/client/src/containers/Customers/CustomerForm/CustomersTabs.js index 07fdc94c2..4fdac8f77 100644 --- a/client/src/containers/Customers/CustomerForm/CustomersTabs.js +++ b/client/src/containers/Customers/CustomerForm/CustomersTabs.js @@ -1,6 +1,6 @@ import React from 'react'; import { Tabs, Tab } from '@blueprintjs/core'; -import { useIntl } from 'react-intl'; +import intl from 'react-intl-universal'; import CustomerAddressTabs from './CustomerAddressTabs'; import CustomerAttachmentTabs from './CustomerAttachmentTabs'; @@ -8,7 +8,7 @@ import CustomerFinancialPanel from './CustomerFinancialPanel'; import CustomerNotePanel from './CustomerNotePanel'; export default function CustomersTabs() { - const { formatMessage } = useIntl(); + return (
@@ -20,22 +20,22 @@ export default function CustomersTabs() { > } /> } /> } /> } /> diff --git a/client/src/containers/Customers/CustomersLanding/CustomersActionsBar.js b/client/src/containers/Customers/CustomersLanding/CustomersActionsBar.js index 3e4540c9c..e9c3de802 100644 --- a/client/src/containers/Customers/CustomersLanding/CustomersActionsBar.js +++ b/client/src/containers/Customers/CustomersLanding/CustomersActionsBar.js @@ -9,7 +9,8 @@ import { Position, PopoverInteractionKind, } from '@blueprintjs/core'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import classNames from 'classnames'; import { useHistory } from 'react-router-dom'; @@ -41,7 +42,7 @@ function CustomerActionsBar({ const history = useHistory(); // React intl - const { formatMessage } = useIntl(); + // Customers list context. const { customersViews } = useCustomersListContext(); @@ -85,7 +86,7 @@ function CustomerActionsBar({ >
diff --git a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js index d7b899899..bd2b3329f 100644 --- a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js +++ b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js @@ -2,7 +2,7 @@ import React from 'react'; import { useHistory } from 'react-router-dom'; import Icon from 'components/Icon'; import { Button, Classes, NavbarGroup, Intent } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import { safeCallback } from 'utils'; import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'; diff --git a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.js b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.js index 974607cd5..a74d32ca7 100644 --- a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.js +++ b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.js @@ -1,6 +1,6 @@ import React from 'react'; import { If, Money } from 'components'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; export default function ExpenseDrawerFooter({ expense: { total_amount, currency_code }, diff --git a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js index 3161dfa56..9500c3f04 100644 --- a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js +++ b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js @@ -1,7 +1,7 @@ import React from 'react'; import moment from 'moment'; import { If, Money } from 'components'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; /** * Expense drawer content. diff --git a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.js b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.js index 838e30a2f..ae15afac0 100644 --- a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.js +++ b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.js @@ -1,6 +1,6 @@ import React from 'react'; -import { formatMessage } from 'services/intl'; +import intl from 'react-intl-universal'; import { DataTable, Money } from 'components'; /** @@ -12,19 +12,19 @@ export default function ExpenseDrawerTable({ const columns = React.useMemo( () => [ { - Header: formatMessage({ id: 'expense_account' }), + Header: intl.get('expense_account'), accessor: 'expense_account.name', width: 110, }, { - Header: formatMessage({ id: 'amount' }), + Header: intl.get('amount'), accessor: ({ amount }) => ( ), width: 100, }, { - Header: formatMessage({ id: 'description' }), + Header: intl.get('description'), accessor: 'description', width: 110, }, diff --git a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js index 8c1f1ba46..73d22029f 100644 --- a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js +++ b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js @@ -2,7 +2,7 @@ import React from 'react'; import { useHistory } from 'react-router-dom'; import Icon from 'components/Icon'; import { Button, Classes, NavbarGroup, Intent } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import { safeCallback } from 'utils'; import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'; diff --git a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerFooter.js b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerFooter.js index 805b9ff56..29451caac 100644 --- a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerFooter.js +++ b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerFooter.js @@ -1,5 +1,5 @@ import React from 'react'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; export default function ManualJournalDrawerFooter({ manualJournal: { amount_formatted }, diff --git a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js index 275d409c4..28daba3e0 100644 --- a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js +++ b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js @@ -1,5 +1,5 @@ import React from 'react'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; /** * Manual journal details header. diff --git a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js index 88d4d08f6..e0d59a46f 100644 --- a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js +++ b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js @@ -1,7 +1,7 @@ import React from 'react'; import { Classes, Tooltip, Position } from '@blueprintjs/core'; -import { formatMessage } from 'services/intl'; +import intl from 'react-intl-universal'; import { DataTable, Money, If, Icon } from 'components'; import { isBlank } from 'utils'; @@ -32,17 +32,17 @@ export default function ManualJournalDrawerTable({ const columns = React.useMemo( () => [ { - Header: formatMessage({ id: 'account_name' }), + Header: intl.get('account_name'), accessor: 'account.name', width: 130, }, { - Header: formatMessage({ id: 'contact' }), + Header: intl.get('contact'), accessor: 'contact.display_name', width: 130, }, { - Header: formatMessage({ id: 'credit' }), + Header: intl.get('credit'), accessor: ({ credit }) => !isBlank(credit) && credit !== 0 ? ( @@ -50,7 +50,7 @@ export default function ManualJournalDrawerTable({ width: 80, }, { - Header: formatMessage({ id: 'debit' }), + Header: intl.get('debit'), accessor: ({ debit }) => !isBlank(debit) && debit !== 0 ? ( @@ -58,7 +58,7 @@ export default function ManualJournalDrawerTable({ width: 80, }, { - Header: formatMessage({ id: 'note' }), + Header: intl.get('note'), accessor: NoteAccessor, width: 80, }, diff --git a/client/src/containers/Drawers/PaperTemplate/PaperTemplate.js b/client/src/containers/Drawers/PaperTemplate/PaperTemplate.js index e0b95c5f6..9c12fc7fd 100644 --- a/client/src/containers/Drawers/PaperTemplate/PaperTemplate.js +++ b/client/src/containers/Drawers/PaperTemplate/PaperTemplate.js @@ -3,19 +3,19 @@ import PaperTemplateHeader from './PaperTemplateHeader'; import PaperTemplateTable from './PaperTemplateTable'; import PaperTemplateFooter from './PaperTemplateFooter'; import { updateItemsEntriesTotal } from 'containers/Entries/utils'; -import { formatMessage } from 'services/intl'; +import intl from 'react-intl-universal'; import 'style/components/Drawer/DrawerTemplate.scss'; function PaperTemplate({ labels: propLabels, paperData, entries }) { const labels = { - name: formatMessage({ id: 'estimate_' }), - billedTo: formatMessage({ id: 'billed_to' }), - date: formatMessage({ id: 'estimate_date' }), - refNo: formatMessage({ id: 'estimate_no' }), - billedFrom: formatMessage({ id: 'billed_from' }), - amount: formatMessage({ id: 'estimate_amount' }), - dueDate: formatMessage({ id: 'due_date_' }), + name: intl.get('estimate_'), + billedTo: intl.get('billed_to'), + date: intl.get('estimate_date'), + refNo: intl.get('estimate_no'), + billedFrom: intl.get('billed_from'), + amount: intl.get('estimate_amount'), + dueDate: intl.get('due_date_'), ...propLabels, }; diff --git a/client/src/containers/Drawers/PaperTemplate/PaperTemplateTable.js b/client/src/containers/Drawers/PaperTemplate/PaperTemplateTable.js index eae2271f3..cd433387b 100644 --- a/client/src/containers/Drawers/PaperTemplate/PaperTemplateTable.js +++ b/client/src/containers/Drawers/PaperTemplate/PaperTemplateTable.js @@ -1,31 +1,31 @@ import React, { useMemo } from 'react'; -import { formatMessage } from 'services/intl'; +import intl from 'react-intl-universal'; import { DataTable, Money } from 'components'; export default function DrawerTemplateTable({ tableData, currencyCode }) { const columns = useMemo( () => [ { - Header: formatMessage({ id: 'description' }), + Header: intl.get('description'), accessor: 'description', disableSortBy: true, width: 150, }, { - Header: formatMessage({ id: 'rate' }), + Header: intl.get('rate'), accessor: 'rate', accessor: ({ rate }) => , disableSortBy: true, width: 80, }, { - Header: formatMessage({ id: 'qty' }), + Header: intl.get('qty'), accessor: 'quantity', disableSortBy: true, width: 50, }, { - Header: formatMessage({ id: 'Total' }), + Header: intl.get('Total'), accessor: ({ total }) => ( ), diff --git a/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate.js b/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate.js index 59d7278f4..b0fbb1ebb 100644 --- a/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate.js +++ b/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate.js @@ -1,7 +1,7 @@ import React from 'react'; import PaymentPaperTemplateHeader from './PaymentPaperTemplateHeader'; import PaymentPaperTemplateTable from './PaymentPaperTemplateTable'; -import { formatMessage } from 'services/intl'; +import intl from 'react-intl-universal'; import 'style/components/Drawer/DrawerTemplate.scss'; @@ -10,14 +10,14 @@ export default function PaymentPaperTemplate({ paperData, }) { const labels = { - name: formatMessage({ id: 'payment_receive' }), - billedTo: formatMessage({ id: 'billed_to' }), - date: formatMessage({ id: 'payment_date_' }), - refNo: formatMessage({ id: 'payment_no' }), - billedFrom: formatMessage({ id: 'billed_from' }), - referenceNo: formatMessage({ id: 'reference_no' }), - amount: formatMessage({ id: 'amount_received' }), - dueDate: formatMessage({ id: 'due_date_' }), + name: intl.get('payment_receive'), + billedTo: intl.get('billed_to'), + date: intl.get('payment_date_'), + refNo: intl.get('payment_no'), + billedFrom: intl.get('billed_from'), + referenceNo: intl.get('reference_no'), + amount: intl.get('amount_received'), + dueDate: intl.get('due_date_'), ...propLabels, }; const defaultValues = { diff --git a/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplateTable.js b/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplateTable.js index bb45eb1c6..52e53b606 100644 --- a/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplateTable.js +++ b/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplateTable.js @@ -1,31 +1,31 @@ import React from 'react'; import moment from 'moment'; -import { formatMessage } from 'services/intl'; +import intl from 'react-intl-universal'; import { DataTable, Money } from 'components'; export default function PaymentPaperTemplateTable({ tableData, currencyCode }) { const columns = React.useMemo( () => [ { - Header: formatMessage({ id: 'invoice_number' }), + Header: intl.get('invoice_number'), accessor: 'invoice.invoice_no', disableSortBy: true, }, { - Header: formatMessage({ id: 'invoice_date' }), + Header: intl.get('invoice_date'), accessor: ({ invoice_date }) => moment(invoice_date).format('YYYY MMM DD'), disableSortBy: true, }, { - Header: formatMessage({ id: 'invoice_amount' }), + Header: intl.get('invoice_amount'), accessor: ({ invoice }) => ( ), disableSortBy: true, }, { - Header: formatMessage({ id: 'payment_amount' }), + Header: intl.get('payment_amount'), accessor: ({ payment_amount }) => ( ), diff --git a/client/src/containers/Entries/components.js b/client/src/containers/Entries/components.js index 98202d78c..44cb44d11 100644 --- a/client/src/containers/Entries/components.js +++ b/client/src/containers/Entries/components.js @@ -1,5 +1,6 @@ import React from 'react'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { Tooltip, Button, Intent, Position } from '@blueprintjs/core'; import { Hint, Icon } from 'components'; import { formattedAmount, safeSumBy } from 'utils'; @@ -89,7 +90,7 @@ export function IndexTableCell({ row: { index } }) { * Retrieve editable items entries columns. */ export function useEditableItemsEntriesColumns() { - const { formatMessage } = useIntl(); + return React.useMemo( () => [ @@ -113,7 +114,7 @@ export function useEditableItemsEntriesColumns() { className: 'item', }, { - Header: formatMessage({ id: 'description' }), + Header: intl.get('description'), accessor: 'description', Cell: InputGroupCell, disableSortBy: true, @@ -121,7 +122,7 @@ export function useEditableItemsEntriesColumns() { width: 120, }, { - Header: formatMessage({ id: 'quantity' }), + Header: intl.get('quantity'), accessor: 'quantity', Cell: NumericInputCell, Footer: QuantityTotalFooterCell, @@ -130,7 +131,7 @@ export function useEditableItemsEntriesColumns() { className: 'quantity', }, { - Header: formatMessage({ id: 'rate' }), + Header: intl.get('rate'), accessor: 'rate', Cell: MoneyFieldCell, disableSortBy: true, @@ -138,7 +139,7 @@ export function useEditableItemsEntriesColumns() { className: 'rate', }, { - Header: formatMessage({ id: 'discount' }), + Header: intl.get('discount'), accessor: 'discount', Cell: PercentFieldCell, disableSortBy: true, @@ -146,7 +147,7 @@ export function useEditableItemsEntriesColumns() { className: 'discount', }, { - Header: formatMessage({ id: 'total' }), + Header: intl.get('total'), Footer: TotalFooterCell, accessor: 'total', Cell: TotalCell, @@ -164,6 +165,6 @@ export function useEditableItemsEntriesColumns() { width: 45, }, ], - [formatMessage], + [], ); } diff --git a/client/src/containers/ExchangeRates/ExchangeRateActionsBar.js b/client/src/containers/ExchangeRates/ExchangeRateActionsBar.js index 49e20c7d4..db6230450 100644 --- a/client/src/containers/ExchangeRates/ExchangeRateActionsBar.js +++ b/client/src/containers/ExchangeRates/ExchangeRateActionsBar.js @@ -10,7 +10,8 @@ import { PopoverInteractionKind, } from '@blueprintjs/core'; import classNames from 'classnames'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { connect } from 'react-redux'; import { If } from 'components'; @@ -43,7 +44,7 @@ function ExchangeRateActionsBar({ onBulkDelete, }) { const [filterCount, setFilterCount] = useState(0); - const { formatMessage } = useIntl(); + const onClickNewExchangeRate = () => { openDialog('exchangeRate-form', {}); @@ -95,7 +96,7 @@ function ExchangeRateActionsBar({ filterCount <= 0 ? ( ) : ( - `${filterCount} ${formatMessage({ id: 'filters_applied' })}` + `${filterCount} ${intl.get('filters_applied')}` ) } icon={} diff --git a/client/src/containers/ExchangeRates/components.js b/client/src/containers/ExchangeRates/components.js index dc63374b8..4f38f04c3 100644 --- a/client/src/containers/ExchangeRates/components.js +++ b/client/src/containers/ExchangeRates/components.js @@ -8,7 +8,7 @@ import { MenuDivider, Intent, } from '@blueprintjs/core'; -import { useIntl } from 'react-intl'; +import intl from 'react-intl-universal'; import { Icon, Money } from 'components'; import moment from 'moment'; import { safeCallback } from 'utils'; @@ -20,18 +20,18 @@ export function ActionMenuList({ row: { original }, payload: { onEditExchangeRate, onDeleteExchangeRate }, }) { - const { formatMessage } = useIntl(); + return ( } - text={formatMessage({ id: 'edit_exchange_rate' })} + text={intl.get('edit_exchange_rate')} onClick={safeCallback(onEditExchangeRate, original)} /> } @@ -55,26 +55,26 @@ export function TableActionsCell(props) { } export function useExchangeRatesTableColumns() { - const { formatMessage } = useIntl(); + return useMemo( () => [ { id: 'date', - Header: formatMessage({ id: 'date' }), + Header: intl.get('date'), accessor: (r) => moment(r.date).format('YYYY MMM DD'), width: 150, }, { id: 'currency_code', - Header: formatMessage({ id: 'currency_code' }), + Header: intl.get('currency_code'), accessor: 'currency_code', className: 'currency_code', width: 150, }, { id: 'exchange_rate', - Header: formatMessage({ id: 'exchange_rate' }), + Header: intl.get('exchange_rate'), accessor: (r) => ( ), @@ -89,6 +89,6 @@ export function useExchangeRatesTableColumns() { width: 50, }, ], - [formatMessage], + [], ); } diff --git a/client/src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.js b/client/src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.js index 36b41a5dc..c6d30be2f 100644 --- a/client/src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.js +++ b/client/src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.js @@ -10,7 +10,7 @@ import { MenuItem, } from '@blueprintjs/core'; import { useFormikContext } from 'formik'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import { useHistory } from 'react-router-dom'; import { CLASSES } from 'common/classes'; diff --git a/client/src/containers/Expenses/ExpenseForm/ExpenseForm.js b/client/src/containers/Expenses/ExpenseForm/ExpenseForm.js index c282c8ac6..a75fd5dd6 100644 --- a/client/src/containers/Expenses/ExpenseForm/ExpenseForm.js +++ b/client/src/containers/Expenses/ExpenseForm/ExpenseForm.js @@ -1,6 +1,6 @@ import React, { useMemo } from 'react'; import { Intent } from '@blueprintjs/core'; -import { useIntl } from 'react-intl'; +import intl from 'react-intl-universal'; import { defaultTo, sumBy, isEmpty } from 'lodash'; import { Formik, Form } from 'formik'; import classNames from 'classnames'; @@ -44,7 +44,6 @@ function ExpenseForm({ } = useExpenseFormContext(); const isNewMode = !expenseId; - const { formatMessage } = useIntl(); // History context. const history = useHistory(); @@ -73,9 +72,7 @@ function ExpenseForm({ if (totalAmount <= 0) { AppToaster.show({ - message: formatMessage({ - id: 'amount_cannot_be_zero_or_empty', - }), + message: intl.get('amount_cannot_be_zero_or_empty'), intent: Intent.DANGER, }); return; @@ -93,12 +90,10 @@ function ExpenseForm({ // Handle request success. const handleSuccess = (response) => { AppToaster.show({ - message: formatMessage( - { - id: isNewMode - ? 'the_expense_has_been_created_successfully' - : 'the_expense_has_been_edited_successfully', - }, + message: intl.get( + isNewMode + ? 'the_expense_has_been_created_successfully' + : 'the_expense_has_been_edited_successfully', { number: values.payment_account_id }, ), intent: Intent.SUCCESS, diff --git a/client/src/containers/Expenses/ExpenseForm/ExpenseForm.schema.js b/client/src/containers/Expenses/ExpenseForm/ExpenseForm.schema.js index 41d1f3306..d05661cb6 100644 --- a/client/src/containers/Expenses/ExpenseForm/ExpenseForm.schema.js +++ b/client/src/containers/Expenses/ExpenseForm/ExpenseForm.schema.js @@ -1,27 +1,27 @@ import * as Yup from 'yup'; -import { formatMessage } from 'services/intl'; +import intl from 'react-intl-universal'; import { DATATYPES_LENGTH } from 'common/dataTypes'; import { isBlank } from 'utils'; const Schema = Yup.object().shape({ - beneficiary: Yup.string().label(formatMessage({ id: 'beneficiary' })), + beneficiary: Yup.string().label(intl.get('beneficiary')), payment_account_id: Yup.number() .required() - .label(formatMessage({ id: 'payment_account_' })), + .label(intl.get('payment_account_')), payment_date: Yup.date() .required() - .label(formatMessage({ id: 'payment_date_' })), + .label(intl.get('payment_date_')), reference_no: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(), currency_code: Yup.string() .nullable() .max(3) - .label(formatMessage({ id: 'currency_code' })), + .label(intl.get('currency_code')), description: Yup.string() .trim() .min(1) .max(DATATYPES_LENGTH.TEXT) .nullable() - .label(formatMessage({ id: 'description' })), + .label(intl.get('description')), publish: Yup.boolean(), categories: Yup.array().of( Yup.object().shape({ diff --git a/client/src/containers/Expenses/ExpenseForm/ExpenseFormFooter.js b/client/src/containers/Expenses/ExpenseForm/ExpenseFormFooter.js index c7324e0b2..f60532e33 100644 --- a/client/src/containers/Expenses/ExpenseForm/ExpenseFormFooter.js +++ b/client/src/containers/Expenses/ExpenseForm/ExpenseFormFooter.js @@ -1,7 +1,7 @@ import React from 'react'; import { FastField } from 'formik'; import { FormGroup, TextArea } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import classNames from 'classnames'; import { inputIntent } from 'utils'; import { Row, Dragzone, Col, Postbox } from 'components'; diff --git a/client/src/containers/Expenses/ExpenseForm/ExpenseFormHeader.js b/client/src/containers/Expenses/ExpenseForm/ExpenseFormHeader.js index 4fa06d3fb..609c6d2e4 100644 --- a/client/src/containers/Expenses/ExpenseForm/ExpenseFormHeader.js +++ b/client/src/containers/Expenses/ExpenseForm/ExpenseFormHeader.js @@ -2,7 +2,7 @@ import React, { useMemo } from 'react'; import classNames from 'classnames'; import { sumBy } from 'lodash'; import { useFormikContext } from 'formik'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import { CLASSES } from 'common/classes'; diff --git a/client/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.js b/client/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.js index c72b19b2f..6d8739ad5 100644 --- a/client/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.js +++ b/client/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.js @@ -2,7 +2,7 @@ import React from 'react'; import { InputGroup, FormGroup, Position, Classes } from '@blueprintjs/core'; import { DateInput } from '@blueprintjs/datetime'; import { FastField, ErrorMessage } from 'formik'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import classNames from 'classnames'; import { CLASSES } from 'common/classes'; import { diff --git a/client/src/containers/Expenses/ExpenseForm/components.js b/client/src/containers/Expenses/ExpenseForm/components.js index 3ae367447..dfd0c96d2 100644 --- a/client/src/containers/Expenses/ExpenseForm/components.js +++ b/client/src/containers/Expenses/ExpenseForm/components.js @@ -1,8 +1,8 @@ import React from 'react'; import { Button, Tooltip, Intent, Position } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import { Icon, Hint } from 'components'; -import { formatMessage } from 'services/intl'; +import intl from 'react-intl-universal'; import { InputGroupCell, MoneyFieldCell, @@ -61,7 +61,7 @@ function AmountFooterCell({ payload: { currencyCode }, rows }) { * Expense amount header cell. */ export function ExpenseAmountHeaderCell({ payload: { currencyCode } }) { - return formatMessage({ id: 'amount_currency' }, { currency: currencyCode }); + return intl.get('amount_currency', { currency: currencyCode }); } /** @@ -107,7 +107,7 @@ export function useExpenseFormTableColumns() { className: 'amount', }, { - Header: formatMessage({ id: 'description' }), + Header: intl.get('description'), accessor: 'description', Cell: InputGroupCell, disableSortBy: true, @@ -124,6 +124,6 @@ export function useExpenseFormTableColumns() { width: 45, }, ], - [formatMessage], + [], ); } diff --git a/client/src/containers/Expenses/ExpenseForm/utils.js b/client/src/containers/Expenses/ExpenseForm/utils.js index 741052db2..a2a045abd 100644 --- a/client/src/containers/Expenses/ExpenseForm/utils.js +++ b/client/src/containers/Expenses/ExpenseForm/utils.js @@ -1,6 +1,6 @@ import { AppToaster } from 'components'; import moment from 'moment'; -import { formatMessage } from 'services/intl'; +import intl from 'react-intl-universal'; import { transformToForm, repeatValue } from 'utils'; const ERROR = { @@ -14,9 +14,7 @@ export const transformErrors = (errors, { setErrors }) => { if (hasError(ERROR.EXPENSE_ALREADY_PUBLISHED)) { setErrors( AppToaster.show({ - message: formatMessage({ - id: 'the_expense_is_already_published', - }), + message: intl.get('the_expense_is_already_published'), }), ); } diff --git a/client/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js b/client/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js index 3d411fe60..c1dd37718 100644 --- a/client/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js +++ b/client/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.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 DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'; import withDialogActions from 'containers/Dialog/withDialogActions'; diff --git a/client/src/containers/Expenses/ExpensesLanding/ExpensesEmptyStatus.js b/client/src/containers/Expenses/ExpensesLanding/ExpensesEmptyStatus.js index be90b8167..5ce593bf0 100644 --- a/client/src/containers/Expenses/ExpensesLanding/ExpensesEmptyStatus.js +++ b/client/src/containers/Expenses/ExpensesLanding/ExpensesEmptyStatus.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 InvoicesEmptyStatus() { const history = useHistory(); diff --git a/client/src/containers/Expenses/ExpensesLanding/components.js b/client/src/containers/Expenses/ExpensesLanding/components.js index 5edb4644a..25a91a252 100644 --- a/client/src/containers/Expenses/ExpensesLanding/components.js +++ b/client/src/containers/Expenses/ExpensesLanding/components.js @@ -12,9 +12,9 @@ import { MenuDivider, } from '@blueprintjs/core'; import moment from 'moment'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import { Money, Icon, If } from 'components'; -import { formatMessage } from 'services/intl'; +import intl from 'react-intl-universal'; import { safeCallback } from 'utils'; /** @@ -46,25 +46,25 @@ export function ActionsMenu({ } - text={formatMessage({ id: 'view_details' })} + text={intl.get('view_details')} onClick={safeCallback(onViewDetails, original)} /> } - text={formatMessage({ id: 'publish_expense' })} + text={intl.get('publish_expense')} onClick={safeCallback(onPublish, original)} /> } - text={formatMessage({ id: 'edit_expense' })} + text={intl.get('edit_expense')} onClick={safeCallback(onEdit, original)} /> } - text={formatMessage({ id: 'delete_expense' })} + text={intl.get('delete_expense')} intent={Intent.DANGER} onClick={safeCallback(onDelete, original)} /> @@ -134,28 +134,28 @@ export function useExpensesTableColumns() { () => [ { id: 'payment_date', - Header: formatMessage({ id: 'payment_date' }), + Header: intl.get('payment_date'), accessor: (r) => moment(r.payment_date).format('YYYY MMM DD'), width: 140, className: 'payment_date', }, { id: 'amount', - Header: formatMessage({ id: 'full_amount' }), + Header: intl.get('full_amount'), accessor: TotalAmountAccessor, className: 'amount', width: 150, }, { id: 'payment_account', - Header: formatMessage({ id: 'payment_account' }), + Header: intl.get('payment_account'), accessor: 'payment_account.name', className: 'payment_account', width: 150, }, { id: 'expense_account', - Header: formatMessage({ id: 'expense_account' }), + Header: intl.get('expense_account'), accessor: ExpenseAccountAccessor, width: 160, className: 'expense_account', @@ -163,14 +163,14 @@ export function useExpensesTableColumns() { }, { id: 'published', - Header: formatMessage({ id: 'publish' }), + Header: intl.get('publish'), accessor: PublishAccessor, width: 100, className: 'publish', }, { id: 'description', - Header: formatMessage({ id: 'description' }), + Header: intl.get('description'), accessor: DescriptionAccessor, width: 150, className: 'description', diff --git a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryActionsBar.js b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryActionsBar.js index 0e475cfa8..95c11fd28 100644 --- a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryActionsBar.js +++ b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryActionsBar.js @@ -9,7 +9,7 @@ import { Position, } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import classNames from 'classnames'; import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'; diff --git a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js index 6ad67965e..363014256 100644 --- a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js +++ b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js @@ -1,5 +1,5 @@ import React from 'react'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import { Formik, Form } from 'formik'; import * as Yup from 'yup'; import moment from 'moment'; diff --git a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneral.js b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneral.js index a6b8589fb..9f065d3fc 100644 --- a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneral.js +++ b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneral.js @@ -8,7 +8,7 @@ import { Position, Classes, } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import classNames from 'classnames'; import { ContactsMultiSelect, Row, Col, FieldHint } from 'components'; import { useAPAgingSummaryContext } from './APAgingSummaryProvider'; diff --git a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.js b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.js index 7ef048ae4..36fd8daae 100644 --- a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.js +++ b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.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 { DataTable } from 'components'; import FinancialSheet from 'components/FinancialSheet'; @@ -13,7 +14,7 @@ export default function APAgingSummaryTable({ //#ownProps organizationName, }) { - const { formatMessage } = useIntl(); + // AP aging summary report content. const { @@ -30,7 +31,7 @@ export default function APAgingSummaryTable({ diff --git a/client/src/containers/FinancialStatements/APAgingSummary/components.js b/client/src/containers/FinancialStatements/APAgingSummary/components.js index 89b054997..fdcb2d6e4 100644 --- a/client/src/containers/FinancialStatements/APAgingSummary/components.js +++ b/client/src/containers/FinancialStatements/APAgingSummary/components.js @@ -1,7 +1,7 @@ import React, { useMemo } from 'react'; import { useAPAgingSummaryContext } from './APAgingSummaryProvider'; import { getColumnWidth } from 'utils'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import { If } from 'components'; import FinancialLoadingBar from '../FinancialLoadingBar'; diff --git a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.js b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.js index 3618b14bb..9215459c8 100644 --- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.js +++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.js @@ -8,7 +8,7 @@ import { PopoverInteractionKind, Position, } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import classNames from 'classnames'; import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'; diff --git a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js index 8b2e0ec18..03ab11063 100644 --- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js +++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js @@ -1,5 +1,5 @@ import React from 'react'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import { Formik, Form } from 'formik'; import * as Yup from 'yup'; import moment from 'moment'; diff --git a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.js b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.js index 5bb68fc9f..f604b6693 100644 --- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.js +++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.js @@ -8,7 +8,7 @@ import { Position, Classes, } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import classNames from 'classnames'; import { ContactsMultiSelect, Row, Col, FieldHint } from 'components'; import { momentFormatter } from 'utils'; diff --git a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js index 5f24d6f78..595e74271 100644 --- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js +++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js @@ -1,5 +1,5 @@ import React, { useCallback } from 'react'; -import { useIntl } from 'react-intl'; +import intl from 'react-intl-universal'; import DataTable from 'components/DataTable'; import FinancialSheet from 'components/FinancialSheet'; @@ -13,7 +13,7 @@ export default function ReceivableAgingSummaryTable({ // #ownProps organizationName, }) { - const { formatMessage } = useIntl(); + // AR aging summary report context. const { ARAgingSummary, isARAgingLoading } = useARAgingSummaryContext(); @@ -31,7 +31,7 @@ export default function ReceivableAgingSummaryTable({ diff --git a/client/src/containers/FinancialStatements/ARAgingSummary/components.js b/client/src/containers/FinancialStatements/ARAgingSummary/components.js index b78f92ee9..1746726c7 100644 --- a/client/src/containers/FinancialStatements/ARAgingSummary/components.js +++ b/client/src/containers/FinancialStatements/ARAgingSummary/components.js @@ -1,7 +1,7 @@ import React from 'react'; import { useARAgingSummaryContext } from './ARAgingSummaryProvider'; import { getColumnWidth } from 'utils'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import { If } from 'components'; import FinancialLoadingBar from '../FinancialLoadingBar'; diff --git a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js index 83d9a21b0..d53f4e592 100644 --- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js +++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js @@ -8,7 +8,7 @@ import { PopoverInteractionKind, Position, } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import classNames from 'classnames'; import Icon from 'components/Icon'; diff --git a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js index 77ad25cea..27240ca1d 100644 --- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js +++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js @@ -1,6 +1,7 @@ import React from 'react'; import { Tabs, Tab, Button, Intent } from '@blueprintjs/core'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import moment from 'moment'; import * as Yup from 'yup'; import { Formik, Form } from 'formik'; @@ -27,7 +28,7 @@ function BalanceSheetHeader({ // #withBalanceSheetActions toggleBalanceSheetFilterDrawer: toggleFilterDrawer, }) { - const { formatMessage } = useIntl(); + // Filter form initial values. const initialValues = { @@ -42,11 +43,11 @@ function BalanceSheetHeader({ dateRange: Yup.string().optional(), fromDate: Yup.date() .required() - .label(formatMessage({ id: 'fromDate' })), + .label(intl.get('fromDate')), toDate: Yup.date() .min(Yup.ref('fromDate')) .required() - .label(formatMessage({ id: 'toDate' })), + .label(intl.get('toDate')), accountsFilter: Yup.string(), displayColumnsType: Yup.string(), }); diff --git a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js index 36af3bc3d..38aa54e26 100644 --- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js +++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js @@ -1,5 +1,5 @@ import React, { useMemo, useCallback } from 'react'; -import { useIntl } from 'react-intl'; +import intl from 'react-intl-universal'; import classNames from 'classnames'; import FinancialSheet from 'components/FinancialSheet'; @@ -16,7 +16,7 @@ export default function BalanceSheetTable({ // #ownProps companyName, }) { - const { formatMessage } = useIntl(); + // Balance sheet context. const { @@ -27,7 +27,7 @@ export default function BalanceSheetTable({ const tableColumns = useMemo( () => [ { - Header: formatMessage({ id: 'account_name' }), + Header: intl.get('account_name'), accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name), className: 'account_name', textOverview: true, @@ -36,7 +36,7 @@ export default function BalanceSheetTable({ ...(query.display_columns_type === 'total' ? [ { - Header: formatMessage({ id: 'total' }), + Header: intl.get('total'), accessor: 'total.formatted_amount', Cell: CellTextSpan, className: 'total', @@ -59,7 +59,7 @@ export default function BalanceSheetTable({ })) : []), ], - [query, columns, tableRows, formatMessage], + [query, columns, tableRows], ); // Calculates the default expanded rows of balance sheet table. @@ -83,7 +83,7 @@ export default function BalanceSheetTable({ ({ id: column.key, key: column.key, - Header: formatMessage({ id: 'account_name' }), + Header: intl.get('account_name'), accessor: 'cells[0].value', className: 'account_name', textOverview: true, @@ -36,7 +36,7 @@ const dateRangeMapper = (data, index, column) => ({ */ const totalMapper = (data, index, column) => ({ key: 'total', - Header: formatMessage({ id: 'total' }), + Header: intl.get('total'), accessor: `cells[${index}].value`, className: 'total', textOverview: true, diff --git a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryActionsBar.js b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryActionsBar.js index 7ee8f97b9..1ea7e252d 100644 --- a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryActionsBar.js +++ b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryActionsBar.js @@ -8,7 +8,7 @@ import { PopoverInteractionKind, Position, } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import classNames from 'classnames'; import Icon from 'components/Icon'; diff --git a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanel.js b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanel.js index 9ecdd7aa5..c982de567 100644 --- a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanel.js +++ b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanel.js @@ -7,7 +7,7 @@ import { Classes, Checkbox, } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import { Row, Col, FieldHint } from 'components'; import { diff --git a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js index 6e1b3ec58..64506fa20 100644 --- a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js +++ b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js @@ -3,7 +3,8 @@ import * as Yup from 'yup'; import { Formik, Form } from 'formik'; import moment from 'moment'; import { Tabs, Tab, Button, Intent } from '@blueprintjs/core'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader'; import withCustomersBalanceSummary from './withCustomersBalanceSummary'; diff --git a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js index 57ee2655f..6eb727d9d 100644 --- a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js +++ b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js @@ -1,5 +1,5 @@ import React, { useMemo, useCallback } from 'react'; -import { useIntl } from 'react-intl'; +import intl from 'react-intl-universal'; import classNames from 'classnames'; import FinancialSheet from 'components/FinancialSheet'; @@ -15,7 +15,7 @@ export default function CustomersBalanceSummaryTable({ // #ownProps companyName, }) { - const { formatMessage } = useIntl(); + const { isCustomersBalanceLoading, @@ -32,7 +32,7 @@ export default function CustomersBalanceSummaryTable({ diff --git a/client/src/containers/FinancialStatements/CustomersBalanceSummary/components.js b/client/src/containers/FinancialStatements/CustomersBalanceSummary/components.js index 0ac61d5c9..e8ab66769 100644 --- a/client/src/containers/FinancialStatements/CustomersBalanceSummary/components.js +++ b/client/src/containers/FinancialStatements/CustomersBalanceSummary/components.js @@ -1,5 +1,5 @@ import React from 'react'; -import { formatMessage } from 'services/intl'; +import intl from 'react-intl-universal'; import { If } from 'components'; import FinancialLoadingBar from '../FinancialLoadingBar'; @@ -12,25 +12,25 @@ export const useCustomersSummaryColumns = () => { return React.useMemo( () => [ { - Header: formatMessage({ id: 'customer_name' }), + Header: intl.get('customer_name'), accessor: 'cells[0].value', className: 'customer_name', width: 240, }, { - Header: formatMessage({ id: 'total' }), + Header: intl.get('total'), accessor: 'cells[1].value', className: 'total', width: 140, }, { - Header: formatMessage({ id: 'percentage_of_column' }), + Header: intl.get('percentage_of_column'), accessor: 'cells[2].value', className: 'total', width: 140, }, ], - [formatMessage], + [], ); }; diff --git a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsActionsBar.js b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsActionsBar.js index 3c8ec4f73..5fc23ed10 100644 --- a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsActionsBar.js +++ b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsActionsBar.js @@ -8,7 +8,7 @@ import { PopoverInteractionKind, Position, } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import classNames from 'classnames'; import Icon from 'components/Icon'; diff --git a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.js b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.js index f766d9efe..4f3e8e77b 100644 --- a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.js +++ b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.js @@ -1,6 +1,7 @@ import React from 'react'; import { Tabs, Tab, Button, Intent } from '@blueprintjs/core'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import moment from 'moment'; import * as Yup from 'yup'; import { Formik, Form } from 'formik'; @@ -27,7 +28,7 @@ function CustomersTransactionsHeader({ //#withCustomersTransactionsActions toggleCustomersTransactionsFilterDrawer: toggleFilterDrawer, }) { - const { formatMessage } = useIntl(); + // Filter form initial values. const initialValues = { @@ -40,11 +41,11 @@ function CustomersTransactionsHeader({ const validationSchema = Yup.object().shape({ fromDate: Yup.date() .required() - .label(formatMessage({ id: 'fromDate' })), + .label(intl.get('fromDate')), toDate: Yup.date() .min(Yup.ref('fromDate')) .required() - .label(formatMessage({ id: 'toDate' })), + .label(intl.get('toDate')), }); // Handle form submit. diff --git a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js index 100395693..1215da2f7 100644 --- a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js +++ b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js @@ -1,5 +1,5 @@ import React, { useMemo, useCallback } from 'react'; -import { useIntl } from 'react-intl'; +import intl from 'react-intl-universal'; import classNames from 'classnames'; import FinancialSheet from 'components/FinancialSheet'; @@ -16,7 +16,7 @@ export default function CustomersTransactionsTable({ // #ownProps companyName, }) { - const { formatMessage } = useIntl(); + const { customersTransactions: { tableRows }, @@ -38,7 +38,7 @@ export default function CustomersTransactionsTable({ { return React.useMemo( () => [ { - Header: formatMessage({ id: 'customer_name' }), + Header: intl.get('customer_name'), accessor: ({ cells }) => { return ( { textOverview: true, }, { - Header: formatMessage({ id: 'account_name' }), + Header: intl.get('account_name'), accessor: 'cells[1].value', className: 'name', textOverview: true, width: 170, }, { - Header: formatMessage({ id: 'reference_type' }), + Header: intl.get('reference_type'), accessor: 'cells[2].value', width: 120, textOverview: true, }, { - Header: formatMessage({ id: 'transaction_type' }), + Header: intl.get('transaction_type'), accessor: 'cells[3].value', width: 120, textOverview: true, }, { - Header: formatMessage({ id: 'credit' }), + Header: intl.get('credit'), accessor: 'cells[4].value', className: 'credit', textOverview: true, @@ -62,7 +62,7 @@ export const useCustomersTransactionsColumns = () => { }), }, { - Header: formatMessage({ id: 'debit' }), + Header: intl.get('debit'), accessor: 'cells[5].value', className: 'debit', textOverview: true, @@ -72,7 +72,7 @@ export const useCustomersTransactionsColumns = () => { }), }, { - Header: formatMessage({ id: 'running_balance' }), + Header: intl.get('running_balance'), accessor: 'cells[6].value', className: 'running_balance', textOverview: true, @@ -82,7 +82,7 @@ export const useCustomersTransactionsColumns = () => { }), }, ], - [tableRows, formatMessage], + [tableRows], ); }; diff --git a/client/src/containers/FinancialStatements/FinancialAccountsFilter.js b/client/src/containers/FinancialStatements/FinancialAccountsFilter.js index 6b50c3aa8..f640aee5f 100644 --- a/client/src/containers/FinancialStatements/FinancialAccountsFilter.js +++ b/client/src/containers/FinancialStatements/FinancialAccountsFilter.js @@ -6,7 +6,7 @@ import { Position, FormGroup, } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import classNames from 'classnames'; import { FastField } from 'formik'; diff --git a/client/src/containers/FinancialStatements/FinancialStatementDateRange.js b/client/src/containers/FinancialStatements/FinancialStatementDateRange.js index c68c9ac2c..1d882996f 100644 --- a/client/src/containers/FinancialStatements/FinancialStatementDateRange.js +++ b/client/src/containers/FinancialStatements/FinancialStatementDateRange.js @@ -5,14 +5,14 @@ import moment from 'moment'; import { Row, Col, Hint } from 'components'; import { momentFormatter, parseDateRangeQuery } from 'utils'; import { DateInput } from '@blueprintjs/datetime'; -import { useIntl } from 'react-intl'; +import intl from 'react-intl-universal'; import { dateRangeOptions } from 'containers/FinancialStatements/common'; /** * Financial statement - Date range select. */ export default function FinancialStatementDateRange() { - const { formatMessage } = useIntl(); + return ( <> @@ -24,7 +24,7 @@ export default function FinancialStatementDateRange() { field: { value }, }) => ( } minimal={true} fill={true} @@ -62,7 +62,7 @@ export default function FinancialStatementDateRange() { meta: { error, touched }, }) => ( } fill={true} intent={error && Intent.DANGER} @@ -92,7 +92,7 @@ export default function FinancialStatementDateRange() { meta: { error }, }) => ( } fill={true} intent={error && Intent.DANGER} diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js index 8f9c59386..2a9e7ee52 100644 --- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js +++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js @@ -8,7 +8,7 @@ import { PopoverInteractionKind, Position, } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import classNames from 'classnames'; import Icon from 'components/Icon'; diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js index b86b2dd2d..54545999f 100644 --- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js +++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js @@ -3,7 +3,7 @@ import moment from 'moment'; import * as Yup from 'yup'; import { Formik, Form } from 'formik'; import { Tabs, Tab, Button, Intent } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader'; import GeneralLedgerHeaderGeneralPane from './GeneralLedgerHeaderGeneralPane'; diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js index 694362c08..b50d329fd 100644 --- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js +++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js @@ -3,7 +3,7 @@ import { FormGroup, Classes, } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import classNames from 'classnames'; import { AccountsMultiSelect, Row, Col } from 'components'; diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js index 8684c024d..fd8ee3f5e 100644 --- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js +++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js @@ -1,7 +1,7 @@ import React, { useMemo } from 'react'; import { defaultExpanderReducer } from 'utils'; -import { useIntl } from 'react-intl'; +import intl from 'react-intl-universal'; import FinancialSheet from 'components/FinancialSheet'; import DataTable from 'components/DataTable'; @@ -15,7 +15,7 @@ import { useGeneralLedgerTableColumns } from './components'; * General ledger table. */ export default function GeneralLedgerTable({ companyName }) { - const { formatMessage } = useIntl(); + // General ledger context. const { @@ -36,7 +36,7 @@ export default function GeneralLedgerTable({ companyName }) { return ( [ { - Header: formatMessage({ id: 'date' }), + Header: intl.get('date'), accessor: (row) => { if (row.rowType === 'ACCOUNT_ROW') { return ( @@ -38,33 +38,33 @@ export function useGeneralLedgerTableColumns() { width: 120, }, { - Header: formatMessage({ id: 'account_name' }), + Header: intl.get('account_name'), accessor: 'name', className: 'name', textOverview: true, // width: 200, }, { - Header: formatMessage({ id: 'transaction_type' }), + Header: intl.get('transaction_type'), accessor: 'reference_type_formatted', className: 'transaction_type', width: 125, textOverview: true, }, { - Header: formatMessage({ id: 'transaction_number' }), + Header: intl.get('transaction_number'), accessor: 'reference_id', className: 'transaction_number', width: 100, }, { - Header: formatMessage({ id: 'description' }), + Header: intl.get('description'), accessor: 'note', className: 'description', // width: 145, }, { - Header: formatMessage({ id: 'credit' }), + Header: intl.get('credit'), accessor: 'formatted_credit', className: 'credit', width: getColumnWidth(tableRows, 'formatted_credit', { @@ -74,7 +74,7 @@ export function useGeneralLedgerTableColumns() { }), }, { - Header: formatMessage({ id: 'debit' }), + Header: intl.get('debit'), accessor: 'formatted_debit', className: 'debit', width: getColumnWidth(tableRows, 'formatted_debit', { @@ -83,7 +83,7 @@ export function useGeneralLedgerTableColumns() { }), }, { - Header: formatMessage({ id: 'amount' }), + Header: intl.get('amount'), accessor: 'formatted_amount', className: 'amount', width: getColumnWidth(tableRows, 'formatted_amount', { @@ -92,7 +92,7 @@ export function useGeneralLedgerTableColumns() { }), }, { - Header: formatMessage({ id: 'running_balance' }), + Header: intl.get('running_balance'), accessor: 'formatted_running_balance', className: 'running_balance', width: getColumnWidth(tableRows, 'formatted_running_balance', { @@ -101,7 +101,7 @@ export function useGeneralLedgerTableColumns() { }), }, ], - [formatMessage, tableRows], + [tableRows], ); } diff --git a/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsActionsBar.js b/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsActionsBar.js index 90fe45962..abf86ce66 100644 --- a/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsActionsBar.js +++ b/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsActionsBar.js @@ -8,7 +8,7 @@ import { PopoverInteractionKind, Position, } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import classNames from 'classnames'; import { Icon } from 'components'; diff --git a/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.js b/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.js index 431ee4276..daabd3e42 100644 --- a/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.js +++ b/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.js @@ -3,7 +3,8 @@ import * as Yup from 'yup'; import moment from 'moment'; import { Formik, Form } from 'formik'; import { Tabs, Tab, Button, Intent } from '@blueprintjs/core'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader'; import InventoryItemDetailsHeaderGeneralPanel from './InventoryItemDetailsHeaderGeneralPanel'; @@ -26,7 +27,7 @@ function InventoryItemDetailsHeader({ //#withInventoryItemDetailsActions toggleInventoryItemDetailsFilterDrawer: toggleFilterDrawer, }) { - const { formatMessage } = useIntl(); + //Filter form initial values. const initialValues = { @@ -39,11 +40,11 @@ function InventoryItemDetailsHeader({ const validationSchema = Yup.object().shape({ fromDate: Yup.date() .required() - .label(formatMessage({ id: 'fromDate' })), + .label(intl.get('fromDate')), toDate: Yup.date() .min(Yup.ref('fromDate')) .required() - .label(formatMessage({ id: 'toDate' })), + .label(intl.get('toDate')), }); ; diff --git a/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js b/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js index 5fa384c0c..b9840dd06 100644 --- a/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js +++ b/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js @@ -1,5 +1,5 @@ import React, { useMemo, useCallback } from 'react'; -import { formatMessage } from 'services/intl'; +import intl from 'react-intl-universal'; import classNames from 'classnames'; @@ -38,7 +38,7 @@ export default function InventoryItemDetailsTable({ diff --git a/client/src/containers/FinancialStatements/InventoryValuation/components.js b/client/src/containers/FinancialStatements/InventoryValuation/components.js index c8fc1eb06..ed976ec41 100644 --- a/client/src/containers/FinancialStatements/InventoryValuation/components.js +++ b/client/src/containers/FinancialStatements/InventoryValuation/components.js @@ -1,5 +1,5 @@ import React, { useMemo } from 'react'; -import { useIntl } from 'react-intl'; +import intl from 'react-intl-universal'; import { getColumnWidth } from 'utils'; import { If } from 'components'; import { CellTextSpan } from 'components/Datatable/Cells'; @@ -11,7 +11,7 @@ import FinancialLoadingBar from '../FinancialLoadingBar'; */ export const useInventoryValuationTableColumns = () => { - const { formatMessage } = useIntl(); + // inventory valuation context const { @@ -21,14 +21,14 @@ export const useInventoryValuationTableColumns = () => { return useMemo( () => [ { - Header: formatMessage({ id: 'item_name' }), + Header: intl.get('item_name'), accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name), className: 'name', width: 240, textOverview: true, }, { - Header: formatMessage({ id: 'quantity' }), + Header: intl.get('quantity'), accessor: 'quantity_formatted', Cell: CellTextSpan, className: 'quantity_formatted', @@ -38,7 +38,7 @@ export const useInventoryValuationTableColumns = () => { textOverview: true, }, { - Header: formatMessage({ id: 'asset_value' }), + Header: intl.get('asset_value'), accessor: 'valuation_formatted', Cell: CellTextSpan, className: 'valuation', @@ -48,7 +48,7 @@ export const useInventoryValuationTableColumns = () => { textOverview: true, }, { - Header: formatMessage({ id: 'average' }), + Header: intl.get('average'), accessor: 'average_formatted', Cell: CellTextSpan, className: 'average_formatted', @@ -58,7 +58,7 @@ export const useInventoryValuationTableColumns = () => { textOverview: true, }, ], - [tableRows, formatMessage], + [tableRows], ); }; diff --git a/client/src/containers/FinancialStatements/Journal/JournalActionsBar.js b/client/src/containers/FinancialStatements/Journal/JournalActionsBar.js index cc6b7234f..b0a4179df 100644 --- a/client/src/containers/FinancialStatements/Journal/JournalActionsBar.js +++ b/client/src/containers/FinancialStatements/Journal/JournalActionsBar.js @@ -8,7 +8,7 @@ import { PopoverInteractionKind, Position, } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import Icon from 'components/Icon'; import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'; import classNames from 'classnames'; diff --git a/client/src/containers/FinancialStatements/Journal/JournalHeader.js b/client/src/containers/FinancialStatements/Journal/JournalHeader.js index f031c413b..d57bb2088 100644 --- a/client/src/containers/FinancialStatements/Journal/JournalHeader.js +++ b/client/src/containers/FinancialStatements/Journal/JournalHeader.js @@ -3,7 +3,7 @@ import moment from 'moment'; import { Formik, Form } from 'formik'; import { Tab, Tabs, Button, Intent } from '@blueprintjs/core'; import * as Yup from 'yup'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import JournalSheetHeaderGeneral from './JournalSheetHeaderGeneral'; import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader'; diff --git a/client/src/containers/FinancialStatements/Journal/JournalTable.js b/client/src/containers/FinancialStatements/Journal/JournalTable.js index 6b53b78c2..372b7c411 100644 --- a/client/src/containers/FinancialStatements/Journal/JournalTable.js +++ b/client/src/containers/FinancialStatements/Journal/JournalTable.js @@ -1,5 +1,5 @@ import React, { useCallback, useMemo } from 'react'; -import { useIntl } from 'react-intl'; +import intl from 'react-intl-universal'; import FinancialSheet from 'components/FinancialSheet'; import DataTable from 'components/DataTable'; @@ -14,7 +14,7 @@ export default function JournalSheetTable({ onFetchData, companyName, }) { - const { formatMessage } = useIntl(); + // Journal sheet context. const { @@ -47,7 +47,7 @@ export default function JournalSheetTable({ return ( { - const { formatMessage } = useIntl(); + return React.useMemo( () => [ { - Header: formatMessage({ id: 'date' }), + Header: intl.get('date'), accessor: (row) => row.date ? moment(row.date).format('YYYY MMM DD') : '', className: 'date', width: 100, }, { - Header: formatMessage({ id: 'transaction_type' }), + Header: intl.get('transaction_type'), accessor: 'reference_type_formatted', className: 'reference_type_formatted', width: 120, }, { - Header: formatMessage({ id: 'num' }), + Header: intl.get('num'), accessor: 'transaction_number', className: 'reference_id', width: 70, }, { - Header: formatMessage({ id: 'description' }), + Header: intl.get('description'), accessor: 'note', className: 'note', }, { - Header: formatMessage({ id: 'acc_code' }), + Header: intl.get('acc_code'), accessor: 'account_code', width: 95, className: 'account_code', }, { - Header: formatMessage({ id: 'account' }), + Header: intl.get('account'), accessor: 'account_name', className: 'account_name', textOverview: true, }, { - Header: formatMessage({ id: 'credit' }), + Header: intl.get('credit'), accessor: 'formatted_credit', className: 'credit', }, { - Header: formatMessage({ id: 'debit' }), + Header: intl.get('debit'), accessor: 'formatted_debit', className: 'debit', }, ], - [formatMessage], + [], ); }; diff --git a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js index d49e417c0..8d304358f 100644 --- a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js +++ b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js @@ -8,7 +8,7 @@ import { Position, PopoverInteractionKind, } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import classNames from 'classnames'; import Icon from 'components/Icon'; diff --git a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js index 9b8f2060d..307ac826b 100644 --- a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js +++ b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js @@ -1,7 +1,8 @@ import React, { useEffect } from 'react'; import moment from 'moment'; import { Formik, Form } from 'formik'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import * as Yup from 'yup'; import { Tabs, Tab, Button, Intent } from '@blueprintjs/core'; @@ -24,17 +25,17 @@ function ProfitLossHeader({ // #withProfitLossActions toggleProfitLossFilterDrawer: toggleFilterDrawer, }) { - const { formatMessage } = useIntl(); + // Validation schema. const validationSchema = Yup.object().shape({ fromDate: Yup.date() .required() - .label(formatMessage({ id: 'from_date' })), + .label(intl.get('from_date')), toDate: Yup.date() .min(Yup.ref('fromDate')) .required() - .label(formatMessage({ id: 'to_date' })), + .label(intl.get('to_date')), accountsFilter: Yup.string(), displayColumnsType: Yup.string(), }); diff --git a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js index 6d7b8b486..cb1e78f51 100644 --- a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js +++ b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js @@ -1,5 +1,6 @@ import React, { useMemo, useCallback } from 'react'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import FinancialSheet from 'components/FinancialSheet'; import DataTable from 'components/DataTable'; @@ -12,7 +13,7 @@ export default function ProfitLossSheetTable({ // #ownProps companyName, }) { - const { formatMessage } = useIntl(); + // Profit/Loss sheet context. const { @@ -23,7 +24,7 @@ export default function ProfitLossSheetTable({ const tableColumns = useMemo( () => [ { - Header: formatMessage({ id: 'account' }), + Header: intl.get('account'), accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name), className: 'name', textOverview: true, @@ -32,7 +33,7 @@ export default function ProfitLossSheetTable({ ...(query.display_columns_type === 'total' ? [ { - Header: formatMessage({ id: 'total' }), + Header: intl.get('total'), Cell: CellTextSpan, accessor: 'total.formatted_amount', className: 'total', @@ -59,7 +60,6 @@ export default function ProfitLossSheetTable({ query.display_columns_type, tableRows, columns, - formatMessage, ], ); diff --git a/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsActionsBar.js b/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsActionsBar.js index 6bbd3d542..1d778db36 100644 --- a/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsActionsBar.js +++ b/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsActionsBar.js @@ -9,7 +9,7 @@ import { Position, } from '@blueprintjs/core'; import classNames from 'classnames'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import { Icon } from 'components'; import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'; diff --git a/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.js b/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.js index fc1843dce..9c8a28f93 100644 --- a/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.js +++ b/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.js @@ -1,7 +1,8 @@ import React from 'react'; import * as Yup from 'yup'; import moment from 'moment'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { Formik, Form } from 'formik'; import { Tabs, Tab, Button, Intent } from '@blueprintjs/core'; @@ -27,17 +28,17 @@ function PurchasesByItemsHeader({ // #withPurchasesByItems togglePurchasesByItemsFilterDrawer, }) { - const { formatMessage } = useIntl(); + // Form validation schema. const validationSchema = Yup.object().shape({ fromDate: Yup.date() .required() - .label(formatMessage({ id: 'from_date' })), + .label(intl.get('from_date')), toDate: Yup.date() .min(Yup.ref('fromDate')) .required() - .label(formatMessage({ id: 'to_date' })), + .label(intl.get('to_date')), }); // Initial values. diff --git a/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.js b/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.js index 662f8ae76..a338b85d2 100644 --- a/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.js +++ b/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.js @@ -1,5 +1,5 @@ import React from 'react'; -import { useIntl } from 'react-intl'; +import intl from 'react-intl-universal'; import FinancialSheet from 'components/FinancialSheet'; import { DataTable } from 'components'; @@ -12,7 +12,7 @@ import { usePurchasesByItemsTableColumns } from './components'; * purchases by items data table. */ export default function PurchasesByItemsTable({ companyName }) { - const { formatMessage } = useIntl(); + // Purchases by items context. const { @@ -40,7 +40,7 @@ export default function PurchasesByItemsTable({ companyName }) { return ( { - const { formatMessage } = useIntl(); + // purchases by items context. const { @@ -21,14 +21,14 @@ export const usePurchasesByItemsTableColumns = () => { return React.useMemo( () => [ { - Header: formatMessage({ id: 'item_name' }), + Header: intl.get('item_name'), accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name), className: 'name', width: 180, textOverview: true, }, { - Header: formatMessage({ id: 'quantity_purchased' }), + Header: intl.get('quantity_purchased'), accessor: 'quantity_purchased_formatted', Cell: CellTextSpan, className: 'quantity_purchased_formatted', @@ -38,7 +38,7 @@ export const usePurchasesByItemsTableColumns = () => { textOverview: true, }, { - Header: formatMessage({ id: 'purchase_amount' }), + Header: intl.get('purchase_amount'), accessor: 'purchase_cost_formatted', Cell: CellTextSpan, className: 'purchase_cost_formatted', @@ -48,7 +48,7 @@ export const usePurchasesByItemsTableColumns = () => { textOverview: true, }, { - Header: formatMessage({ id: 'average_price' }), + Header: intl.get('average_price'), accessor: 'average_cost_price_formatted', Cell: CellTextSpan, className: 'average_cost_price_formatted', @@ -58,7 +58,7 @@ export const usePurchasesByItemsTableColumns = () => { textOverview: true, }, ], - [tableRows,formatMessage], + [tableRows], ); }; diff --git a/client/src/containers/FinancialStatements/RadiosAccountingBasis.js b/client/src/containers/FinancialStatements/RadiosAccountingBasis.js index c06931850..c08ed15f7 100644 --- a/client/src/containers/FinancialStatements/RadiosAccountingBasis.js +++ b/client/src/containers/FinancialStatements/RadiosAccountingBasis.js @@ -1,12 +1,12 @@ import React from 'react'; import { FastField } from 'formik'; import { handleStringChange } from 'utils'; -import { useIntl } from 'react-intl'; +import intl from 'react-intl-universal'; import { RadioGroup, Radio } from '@blueprintjs/core'; export default function RadiosAccountingBasis(props) { const { key = 'basis', ...rest } = props; - const { formatMessage } = useIntl(); + return ( @@ -16,7 +16,7 @@ export default function RadiosAccountingBasis(props) { }) => ( { setFieldValue(key, value); @@ -25,8 +25,8 @@ export default function RadiosAccountingBasis(props) { selectedValue={value} {...rest} > - - + + )} diff --git a/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsActionsBar.js b/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsActionsBar.js index e36574469..d2cd6cf1f 100644 --- a/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsActionsBar.js +++ b/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsActionsBar.js @@ -9,7 +9,7 @@ import { Position, } from '@blueprintjs/core'; import classNames from 'classnames'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import { Icon } from 'components'; import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'; diff --git a/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeader.js b/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeader.js index 29827eecd..23f639815 100644 --- a/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeader.js +++ b/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeader.js @@ -1,7 +1,8 @@ import React from 'react'; import * as Yup from 'yup'; import moment from 'moment'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { Formik, Form } from 'formik'; import { Tabs, Tab, Button, Intent } from '@blueprintjs/core'; @@ -27,17 +28,17 @@ function SalesByItemsHeader({ // #withSalesByItemsActions toggleSalesByItemsFilterDrawer, }) { - const { formatMessage } = useIntl(); + // Form validation schema. const validationSchema = Yup.object().shape({ fromDate: Yup.date() .required() - .label(formatMessage({ id: 'from_date' })), + .label(intl.get('from_date')), toDate: Yup.date() .min(Yup.ref('fromDate')) .required() - .label(formatMessage({ id: 'to_date' })), + .label(intl.get('to_date')), }); // Initial values. diff --git a/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.js b/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.js index 74580b570..6c98d60a2 100644 --- a/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.js +++ b/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.js @@ -1,5 +1,5 @@ import React from 'react'; -import { useIntl } from 'react-intl'; +import intl from 'react-intl-universal'; import FinancialSheet from 'components/FinancialSheet'; import { DataTable } from 'components'; @@ -10,7 +10,7 @@ import { useSalesByItemsTableColumns } from './components'; * Sales by items data table. */ export default function SalesByItemsTable({ companyName }) { - const { formatMessage } = useIntl(); + // Sales by items context. const { @@ -38,7 +38,7 @@ export default function SalesByItemsTable({ companyName }) { return ( { - const { formatMessage } = useIntl(); + //sales by items context. const { @@ -21,14 +21,14 @@ export const useSalesByItemsTableColumns = () => { return useMemo( () => [ { - Header: formatMessage({ id: 'item_name' }), + Header: intl.get('item_name'), accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name), className: 'name', width: 180, textOverview: true, }, { - Header: formatMessage({ id: 'sold_quantity' }), + Header: intl.get('sold_quantity'), accessor: 'quantity_sold_formatted', Cell: CellTextSpan, className: 'quantity_sold', @@ -38,7 +38,7 @@ export const useSalesByItemsTableColumns = () => { textOverview: true, }, { - Header: formatMessage({ id: 'sold_amount' }), + Header: intl.get('sold_amount'), accessor: 'sold_cost_formatted', Cell: CellTextSpan, className: 'sold_cost', @@ -48,7 +48,7 @@ export const useSalesByItemsTableColumns = () => { textOverview: true, }, { - Header: formatMessage({ id: 'average_price' }), + Header: intl.get('average_price'), accessor: 'average_sell_price_formatted', Cell: CellTextSpan, className: 'average_sell_price', @@ -58,7 +58,7 @@ export const useSalesByItemsTableColumns = () => { textOverview: true, }, ], - [tableRows, formatMessage], + [tableRows], ); }; diff --git a/client/src/containers/FinancialStatements/SelectDisplayColumnsBy.js b/client/src/containers/FinancialStatements/SelectDisplayColumnsBy.js index 09346a795..8adf628b7 100644 --- a/client/src/containers/FinancialStatements/SelectDisplayColumnsBy.js +++ b/client/src/containers/FinancialStatements/SelectDisplayColumnsBy.js @@ -1,7 +1,7 @@ import React from 'react'; import { FormGroup } from '@blueprintjs/core'; import { FastField } from 'formik'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import { Row, Col, ListSelect } from 'components'; import { displayColumnsByOptions } from 'containers/FinancialStatements/common'; diff --git a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js index 0185866a1..9f3c2f727 100644 --- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js +++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js @@ -9,7 +9,7 @@ import { Position, } from '@blueprintjs/core'; import classNames from 'classnames'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import Icon from 'components/Icon'; import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'; diff --git a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js index 9cc1c1da4..de60c8718 100644 --- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js +++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js @@ -1,7 +1,8 @@ import React from 'react'; import * as Yup from 'yup'; import moment from 'moment'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import { Formik, Form } from 'formik'; import { Tabs, Tab, Button, Intent } from '@blueprintjs/core'; @@ -27,17 +28,17 @@ function TrialBalanceSheetHeader({ // #withTrialBalanceActions toggleTrialBalanceFilterDrawer: toggleFilterDrawer, }) { - const { formatMessage } = useIntl(); + // Form validation schema. const validationSchema = Yup.object().shape({ fromDate: Yup.date() .required() - .label(formatMessage({ id: 'from_date' })), + .label(intl.get('from_date')), toDate: Yup.date() .min(Yup.ref('fromDate')) .required() - .label(formatMessage({ id: 'to_date' })), + .label(intl.get('to_date')), }); // Initial values. diff --git a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js index 48f0d2d8c..e31a0f34f 100644 --- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js +++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js @@ -1,5 +1,5 @@ import React from 'react'; -import { useIntl } from 'react-intl'; +import intl from 'react-intl-universal'; import FinancialSheet from 'components/FinancialSheet'; import DataTable from 'components/DataTable'; @@ -15,7 +15,7 @@ import { useTrialBalanceTableColumns } from './components'; export default function TrialBalanceSheetTable({ companyName, }) { - const { formatMessage } = useIntl(); + // Trial balance sheet context. const { @@ -43,7 +43,7 @@ export default function TrialBalanceSheetTable({ return ( { - const { formatMessage } = useIntl(); + // Trial balance sheet context. const { @@ -21,14 +21,14 @@ export const useTrialBalanceTableColumns = () => { return React.useMemo( () => [ { - Header: formatMessage({ id: 'account_name' }), + Header: intl.get('account_name'), accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name), className: 'name', width: 180, textOverview: true, }, { - Header: formatMessage({ id: 'credit' }), + Header: intl.get('credit'), Cell: CellTextSpan, accessor: 'formatted_credit', className: 'credit', @@ -37,13 +37,13 @@ export const useTrialBalanceTableColumns = () => { }), }, { - Header: formatMessage({ id: 'debit' }), + Header: intl.get('debit'), Cell: CellTextSpan, accessor: 'formatted_debit', width: getColumnWidth(tableRows, `debit`, { minWidth: 80 }), }, { - Header: formatMessage({ id: 'balance' }), + Header: intl.get('balance'), Cell: CellTextSpan, accessor: 'formatted_balance', className: 'balance', @@ -52,7 +52,7 @@ export const useTrialBalanceTableColumns = () => { }), }, ], - [tableRows, formatMessage], + [tableRows], ); }; diff --git a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryActionsBar.js b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryActionsBar.js index f7f01655c..9d5f56d63 100644 --- a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryActionsBar.js +++ b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryActionsBar.js @@ -8,7 +8,7 @@ import { PopoverInteractionKind, Position, } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import classNames from 'classnames'; import { Icon } from 'components'; diff --git a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.js b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.js index fb5be3c6f..9e331973a 100644 --- a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.js +++ b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.js @@ -3,7 +3,7 @@ import * as Yup from 'yup'; import { Formik, Form } from 'formik'; import moment from 'moment'; import { Tabs, Tab, Button, Intent } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader'; import withVendorsBalanceSummary from './withVendorsBalanceSummary'; diff --git a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneral.js b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneral.js index b7811721a..4649a5bd8 100644 --- a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneral.js +++ b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneral.js @@ -2,7 +2,7 @@ import React from 'react'; import { FastField } from 'formik'; import { DateInput } from '@blueprintjs/datetime'; import { FormGroup, Position, Classes, Checkbox } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import { Row, Col, FieldHint } from 'components'; import { momentFormatter, diff --git a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.js b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.js index 043bd2c54..7cb510ab9 100644 --- a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.js +++ b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.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 { DataTable } from 'components'; import FinancialSheet from 'components/FinancialSheet'; @@ -13,7 +14,7 @@ export default function VendorsBalanceSummaryTable({ //#ownProps organizationName, }) { - const { formatMessage } = useIntl(); + const { VendorBalanceSummary, @@ -31,7 +32,7 @@ export default function VendorsBalanceSummaryTable({ diff --git a/client/src/containers/FinancialStatements/VendorsBalanceSummary/components.js b/client/src/containers/FinancialStatements/VendorsBalanceSummary/components.js index f6d9f5315..3ee5dc231 100644 --- a/client/src/containers/FinancialStatements/VendorsBalanceSummary/components.js +++ b/client/src/containers/FinancialStatements/VendorsBalanceSummary/components.js @@ -1,5 +1,5 @@ import React, { useMemo } from 'react'; -import { formatMessage } from 'services/intl'; +import intl from 'react-intl-universal'; import { If } from 'components'; import { getColumnWidth } from 'utils'; @@ -12,7 +12,7 @@ import { useVendorsBalanceSummaryContext } from './VendorsBalanceSummaryProvider export const useVendorsBalanceColumns = () => { return useMemo(() => [ { - Header: formatMessage({ id: 'vendor_name' }), + Header: intl.get('vendor_name'), accessor: 'cells[0].value', className: 'customer_name', width: 240, @@ -20,13 +20,13 @@ export const useVendorsBalanceColumns = () => { textOverview: true, }, { - Header: formatMessage({ id: 'total' }), + Header: intl.get('total'), accessor: 'cells[1].value', className: 'total', width: 140, }, { - Header: formatMessage({ id: 'percentage_of_column' }), + Header: intl.get('percentage_of_column'), accessor: 'cells[2].value', // className: 'total', width: 140, diff --git a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsActionsBar.js b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsActionsBar.js index 115585ec3..9d4a9ff9c 100644 --- a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsActionsBar.js +++ b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsActionsBar.js @@ -8,7 +8,7 @@ import { PopoverInteractionKind, Position, } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import classNames from 'classnames'; import Icon from 'components/Icon'; diff --git a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeader.js b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeader.js index 297f9487a..babf5f7c8 100644 --- a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeader.js +++ b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeader.js @@ -3,7 +3,8 @@ import * as Yup from 'yup'; import moment from 'moment'; import { Formik, Form } from 'formik'; import { Tabs, Tab, Button, Intent } from '@blueprintjs/core'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { FormattedMessage as T } from 'components'; +import intl from 'react-intl-universal'; import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader'; import VendorsTransactionsHeaderGeneralPanel from './VendorsTransactionsHeaderGeneralPanel'; @@ -28,7 +29,7 @@ function VendorsTransactionsHeader({ //#withVendorsTransactionsActions toggleVendorsTransactionsFilterDrawer: toggleFilterDrawer, }) { - const { formatMessage } = useIntl(); + // Filter form initial values. const initialValues = { @@ -41,11 +42,11 @@ function VendorsTransactionsHeader({ const validationSchema = Yup.object().shape({ fromDate: Yup.date() .required() - .label(formatMessage({ id: 'fromDate' })), + .label(intl.get('fromDate')), toDate: Yup.date() .min(Yup.ref('fromDate')) .required() - .label(formatMessage({ id: 'toDate' })), + .label(intl.get('toDate')), }); // Handle form submit. diff --git a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js index 870705c98..98343c537 100644 --- a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js +++ b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js @@ -1,5 +1,5 @@ import React, { useMemo, useCallback } from 'react'; -import { useIntl } from 'react-intl'; +import intl from 'react-intl-universal'; import classNames from 'classnames'; import FinancialSheet from 'components/FinancialSheet'; @@ -17,7 +17,7 @@ export default function VendorsTransactionsTable({ // #ownProps companyName, }) { - const { formatMessage } = useIntl(); + const { vendorsTransactions: { tableRows }, @@ -39,7 +39,7 @@ export default function VendorsTransactionsTable({ { return React.useMemo( () => [ { - Header: formatMessage({ id: 'vendor_name' }), + Header: intl.get('vendor_name'), accessor: ({ cells }) => { return ( { // width: 240, }, { - Header: formatMessage({ id: 'account_name' }), + Header: intl.get('account_name'), accessor: 'cells[1].value', className: 'name', textOverview: true, width: 170, }, { - Header: formatMessage({ id: 'reference_type' }), + Header: intl.get('reference_type'), accessor: 'cells[2].value', textOverview: true, width: 120, }, { - Header: formatMessage({ id: 'transaction_type' }), + Header: intl.get('transaction_type'), accessor: 'cells[3].value', textOverview: true, width: 120, }, { - Header: formatMessage({ id: 'credit' }), + Header: intl.get('credit'), accessor: 'cells[4].value', className: 'credit', textOverview: true, @@ -62,7 +62,7 @@ export const useVendorsTransactionsColumns = () => { }), }, { - Header: formatMessage({ id: 'debit' }), + Header: intl.get('debit'), accessor: 'cells[5].value', className: 'debit', textOverview: true, @@ -72,7 +72,7 @@ export const useVendorsTransactionsColumns = () => { }), }, { - Header: formatMessage({ id: 'running_balance' }), + Header: intl.get('running_balance'), accessor: 'cells[6].value', className: 'running_balance', textOverview: true, @@ -82,7 +82,7 @@ export const useVendorsTransactionsColumns = () => { }), }, ], - [tableRows, formatMessage], + [tableRows], ); }; diff --git a/client/src/containers/FinancialStatements/common.js b/client/src/containers/FinancialStatements/common.js index 73c7a3537..babc60c74 100644 --- a/client/src/containers/FinancialStatements/common.js +++ b/client/src/containers/FinancialStatements/common.js @@ -1,6 +1,6 @@ import { omit } from 'lodash'; import { transfromToSnakeCase, flatObject } from 'utils'; -import { formatMessage } from 'services/intl'; +import intl from 'react-intl-universal'; export const displayColumnsByOptions = [ { key: 'total', name: 'Total', type: 'total', by: '' }, @@ -23,22 +23,18 @@ export const dateRangeOptions = [ export const filterAccountsOptions = [ { key: 'all-accounts', - name: formatMessage({ id: 'all_accounts' }), - hint: formatMessage({ id: 'all_accounts_including_with_zero_balance' }), + name: intl.get('all_accounts'), + hint: intl.get('all_accounts_including_with_zero_balance'), }, { key: 'without-zero-balance', - name: formatMessage({ id: 'accounts_without_zero_balance' }), - hint: formatMessage({ - id: 'include_accounts_and_exclude_zero_balance', - }), + name: intl.get('accounts_without_zero_balance'), + hint: intl.get('include_accounts_and_exclude_zero_balance'), }, { key: 'with-transactions', - name: formatMessage({ id: 'accounts_with_transactions' }), - hint: formatMessage({ - id: 'include_accounts_once_has_transactions_on_given_date_period', - }), + name: intl.get('accounts_with_transactions'), + hint: intl.get('include_accounts_once_has_transactions_on_given_date_period'), }, ]; diff --git a/client/src/containers/GlobalErrors/GlobalErrors.js b/client/src/containers/GlobalErrors/GlobalErrors.js index 24f3606c7..6cdc1bf9f 100644 --- a/client/src/containers/GlobalErrors/GlobalErrors.js +++ b/client/src/containers/GlobalErrors/GlobalErrors.js @@ -1,5 +1,5 @@ import { Intent } from '@blueprintjs/core'; -import { useIntl } from 'react-intl'; +import intl from 'react-intl-universal'; import AppToaster from 'components/AppToaster'; import withGlobalErrors from './withGlobalErrors'; @@ -16,11 +16,9 @@ function GlobalErrors({ // #withGlobalErrorsActions globalErrorsSet, }) { - const { formatMessage } = useIntl(); - if (globalErrors.something_wrong) { toastKeySessionExpired = AppToaster.show({ - message: formatMessage({ id: 'ops_something_went_wrong' }), + message: intl.get('ops_something_went_wrong'), intent: Intent.DANGER, onDismiss: () => { globalErrorsSet({ something_wrong: false }); @@ -30,7 +28,7 @@ function GlobalErrors({ if (globalErrors.session_expired) { toastKeySomethingWrong = AppToaster.show({ - message: formatMessage({ id: 'session_expired' }), + message: intl.get('session_expired'), intent: Intent.DANGER, onDismiss: () => { globalErrorsSet({ session_expired: false }); diff --git a/client/src/containers/Homepage/AnnouncementList.js b/client/src/containers/Homepage/AnnouncementList.js index 02ce51a4a..1f3d811fa 100644 --- a/client/src/containers/Homepage/AnnouncementList.js +++ b/client/src/containers/Homepage/AnnouncementList.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 classNames from 'classnames'; import { announcementLists } from 'common/homepageOptions'; diff --git a/client/src/containers/InventoryAdjustments/InventoryAdjustmentTable.js b/client/src/containers/InventoryAdjustments/InventoryAdjustmentTable.js index 81e5c464f..52cb0a08a 100644 --- a/client/src/containers/InventoryAdjustments/InventoryAdjustmentTable.js +++ b/client/src/containers/InventoryAdjustments/InventoryAdjustmentTable.js @@ -1,7 +1,7 @@ import React, { useCallback } from 'react'; import { DataTable } from 'components'; import { useInventoryAdjustmentsColumns, ActionsMenu } from './components'; -import { formatMessage } from 'services/intl'; +import intl from 'react-intl-universal'; import withAlertsActions from 'containers/Alert/withAlertActions'; import withInventoryAdjustmentActions from './withInventoryAdjustmentActions'; @@ -74,9 +74,7 @@ function InventoryAdjustmentDataTable({ onDelete: handleDeleteAdjustment, }} ContextMenu={ActionsMenu} - noResults={formatMessage({ - id: 'there_is_no_inventory_adjustments_transactions_yet', - })} + noResults={intl.get('there_is_no_inventory_adjustments_transactions_yet')} {...tableProps} /> ); diff --git a/client/src/containers/InventoryAdjustments/components.js b/client/src/containers/InventoryAdjustments/components.js index 17aaac7a6..c21514ce0 100644 --- a/client/src/containers/InventoryAdjustments/components.js +++ b/client/src/containers/InventoryAdjustments/components.js @@ -9,9 +9,10 @@ import { Button, Popover, } from '@blueprintjs/core'; -import { useIntl, FormattedMessage as T } from 'react-intl'; +import intl from 'react-intl-universal'; import moment from 'moment'; -import { formatMessage } from 'services/intl'; + +import { FormattedMessage as T } from 'components'; import { isNumber } from 'lodash'; import { Icon, Money, If } from 'components'; import { isBlank, safeCallback } from 'utils'; @@ -37,7 +38,7 @@ export const PublishAccessor = (r) => { export const TypeAccessor = (row) => { return row.type ? ( - {formatMessage({ id: row.type })} + {intl.get(row.type)} ) : ( '' @@ -50,7 +51,7 @@ export const TypeAccessor = (row) => { export const ItemCodeAccessor = (row) => row.type ? ( - {formatMessage({ id: row.type })} + {intl.get(row.type)} ) : ( '' @@ -85,7 +86,7 @@ export const SellPriceCell = ({ cell: { value } }) => { export const ItemTypeAccessor = (row) => { return row.type ? ( - {formatMessage({ id: row.type })} + {intl.get(row.type)} ) : null; }; @@ -98,11 +99,11 @@ export const ActionsMenu = ({ } - text={formatMessage({ id: 'view_details' })} + text={intl.get('view_details')} /> } @@ -125,48 +126,48 @@ export const ActionsCell = (props) => { * Retrieve inventory adjustments columns. */ export const useInventoryAdjustmentsColumns = () => { - const { formatMessage } = useIntl(); + return React.useMemo( () => [ { id: 'date', - Header: formatMessage({ id: 'date' }), + Header: intl.get('date'), accessor: (r) => moment(r.date).format('YYYY MMM DD'), width: 115, className: 'date', }, { id: 'type', - Header: formatMessage({ id: 'type' }), + Header: intl.get('type'), accessor: TypeAccessor, className: 'type', width: 100, }, { id: 'reason', - Header: formatMessage({ id: 'reason' }), + Header: intl.get('reason'), accessor: 'reason', className: 'reason', width: 115, }, { id: 'reference_no', - Header: formatMessage({ id: 'reference_no' }), + Header: intl.get('reference_no'), accessor: 'reference_no', className: 'reference_no', width: 100, }, { id: 'published_at', - Header: formatMessage({ id: 'status' }), + Header: intl.get('status'), accessor: PublishAccessor, width: 95, className: 'publish', }, { id: 'description', - Header: formatMessage({ id: 'description' }), + Header: intl.get('description'), accessor: 'description', disableSorting: true, width: 85, @@ -174,12 +175,12 @@ export const useInventoryAdjustmentsColumns = () => { }, { 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', }, ], - [formatMessage], + [], ); }; diff --git a/client/src/containers/Items/ItemForm.js b/client/src/containers/Items/ItemForm.js index 91e74a14d..8a59dd093 100644 --- a/client/src/containers/Items/ItemForm.js +++ b/client/src/containers/Items/ItemForm.js @@ -2,7 +2,7 @@ import React, { useMemo } from 'react'; import { Formik, Form } from 'formik'; import { Intent } from '@blueprintjs/core'; import { useHistory } from 'react-router-dom'; -import { useIntl } from 'react-intl'; +import intl from 'react-intl-universal'; import classNames from 'classnames'; import { defaultTo } from 'lodash'; @@ -66,8 +66,6 @@ function ItemForm({ // History context. const history = useHistory(); - const { formatMessage } = useIntl(); - /** * Initial values in create and edit mode. */ @@ -105,13 +103,11 @@ function ItemForm({ const fields = {}; if (errors.find((e) => e.type === 'ITEM.NAME.ALREADY.EXISTS')) { - fields.name = formatMessage({ id: 'the_name_used_before' }); + fields.name = intl.get('the_name_used_before'); } if (errors.find((e) => e.type === 'INVENTORY_ACCOUNT_CANNOT_MODIFIED')) { AppToaster.show({ - message: formatMessage({ - id: 'cannot_change_item_inventory_account', - }), + message: intl.get('cannot_change_item_inventory_account'), intent: Intent.DANGER, }); } @@ -128,12 +124,10 @@ function ItemForm({ const onSuccess = (response) => { AppToaster.show({ - message: formatMessage( - { - id: isNewMode - ? 'the_item_has_been_created_successfully' - : 'the_item_has_been_edited_successfully', - }, + message: intl.get( + isNewMode + ? 'the_item_has_been_created_successfully' + : 'the_item_has_been_edited_successfully', { number: itemId, }, diff --git a/client/src/containers/Items/ItemForm.schema.js b/client/src/containers/Items/ItemForm.schema.js index 283934c4f..cc1a59c3d 100644 --- a/client/src/containers/Items/ItemForm.schema.js +++ b/client/src/containers/Items/ItemForm.schema.js @@ -1,6 +1,6 @@ import * as Yup from 'yup'; import { defaultTo } from 'lodash'; -import { formatMessage } from 'services/intl'; +import intl from 'react-intl-universal'; import { DATATYPES_LENGTH } from 'common/dataTypes'; const Schema = Yup.object().shape({ @@ -9,13 +9,13 @@ const Schema = Yup.object().shape({ .required() .min(0) .max(DATATYPES_LENGTH.STRING) - .label(formatMessage({ id: 'item_name_' })), + .label(intl.get('item_name_')), type: Yup.string() .trim() .required() .min(0) .max(DATATYPES_LENGTH.STRING) - .label(formatMessage({ id: 'item_type_' })), + .label(intl.get('item_type_')), code: Yup.string().trim().min(0).max(DATATYPES_LENGTH.STRING), cost_price: Yup.number() .min(0) @@ -24,7 +24,7 @@ const Schema = Yup.object().shape({ is: true, then: Yup.number() .required() - .label(formatMessage({ id: 'cost_price_' })), + .label(intl.get('cost_price_')), otherwise: Yup.number().nullable(true), }), sell_price: Yup.number() @@ -34,7 +34,7 @@ const Schema = Yup.object().shape({ is: true, then: Yup.number() .required() - .label(formatMessage({ id: 'sell_price_' })), + .label(intl.get('sell_price_')), otherwise: Yup.number().nullable(true), }), cost_account_id: Yup.number() @@ -43,21 +43,21 @@ const Schema = Yup.object().shape({ then: Yup.number().required(), otherwise: Yup.number().nullable(true), }) - .label(formatMessage({ id: 'cost_account_id' })), + .label(intl.get('cost_account_id')), sell_account_id: Yup.number() .when(['sellable'], { is: true, then: Yup.number().required(), otherwise: Yup.number().nullable(), }) - .label(formatMessage({ id: 'sell_account_id' })), + .label(intl.get('sell_account_id')), inventory_account_id: Yup.number() .when(['type'], { is: (value) => value === 'inventory', then: Yup.number().required(), otherwise: Yup.number().nullable(), }) - .label(formatMessage({ id: 'inventory_account' })), + .label(intl.get('inventory_account')), category_id: Yup.number().positive().nullable(), stock: Yup.string() || Yup.boolean(), sellable: Yup.boolean().required(), diff --git a/client/src/containers/Items/ItemFormBody.js b/client/src/containers/Items/ItemFormBody.js index 5255e1381..9123ebf4d 100644 --- a/client/src/containers/Items/ItemFormBody.js +++ b/client/src/containers/Items/ItemFormBody.js @@ -15,7 +15,7 @@ import { Hint, InputPrependText, } from 'components'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import classNames from 'classnames'; import { useItemFormContext } from './ItemFormProvider'; diff --git a/client/src/containers/Items/ItemFormFloatingActions.js b/client/src/containers/Items/ItemFormFloatingActions.js index 0fd64ea46..eacce65db 100644 --- a/client/src/containers/Items/ItemFormFloatingActions.js +++ b/client/src/containers/Items/ItemFormFloatingActions.js @@ -1,6 +1,6 @@ import React from 'react'; import { Button, Intent, FormGroup, Checkbox } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import { useHistory } from 'react-router-dom'; import classNames from 'classnames'; import { FastField, useFormikContext } from 'formik'; diff --git a/client/src/containers/Items/ItemFormInventorySection.js b/client/src/containers/Items/ItemFormInventorySection.js index 79a440c95..c4684fcec 100644 --- a/client/src/containers/Items/ItemFormInventorySection.js +++ b/client/src/containers/Items/ItemFormInventorySection.js @@ -3,7 +3,7 @@ import { FastField, ErrorMessage } from 'formik'; import { FormGroup } from '@blueprintjs/core'; import { AccountsSelectList, Col, Row } from 'components'; import { CLASSES } from 'common/classes'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import classNames from 'classnames'; import withSettings from 'containers/Settings/withSettings'; diff --git a/client/src/containers/Items/ItemFormPrimarySection.js b/client/src/containers/Items/ItemFormPrimarySection.js index 8c8ff9954..66f2a2f46 100644 --- a/client/src/containers/Items/ItemFormPrimarySection.js +++ b/client/src/containers/Items/ItemFormPrimarySection.js @@ -7,7 +7,7 @@ import { Radio, Position, } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; +import { FormattedMessage as T } from 'components'; import { ErrorMessage, FastField } from 'formik'; import { CategoriesSelectList, diff --git a/client/src/containers/Items/ItemFormProvider.js b/client/src/containers/Items/ItemFormProvider.js index 94a9fcf0d..ceab6f736 100644 --- a/client/src/containers/Items/ItemFormProvider.js +++ b/client/src/containers/Items/ItemFormProvider.js @@ -1,5 +1,5 @@ import React, { useEffect, createContext, useState } from 'react'; -import { useIntl } from 'react-intl'; +import intl from 'react-intl-universal'; import { useLocation, useParams } from 'react-router-dom'; import DashboardInsider from 'components/Dashboard/DashboardInsider'; import { @@ -66,7 +66,7 @@ function ItemFormProvider({ itemId, ...props }) { }; // Format message intl. - const { formatMessage } = useIntl(); + // Change page title dispatcher. const changePageTitle = useDashboardPageTitle(); @@ -74,9 +74,9 @@ function ItemFormProvider({ itemId, ...props }) { // Changes the page title in new and edit mode. useEffect(() => { isNewMode - ? changePageTitle(formatMessage({ id: 'new_item' })) - : changePageTitle(formatMessage({ id: 'edit_item_details' })); - }, [changePageTitle, isNewMode, formatMessage]); + ? changePageTitle(intl.get('new_item')) + : changePageTitle(intl.get('edit_item_details')); + }, [changePageTitle, isNewMode]); return (