WIP feature/breadcrumb/fix_localize

client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js

@@ -1,8 +1,7 @@
-import React, {useEffect, useMemo, useCallback, useState} from 'react';
+import React, { useEffect, useMemo, useCallback, useState } from 'react';
 
-import {compose} from 'utils';
+import { compose } from 'utils';
 import { useQuery } from 'react-query';
-import { useIntl } from 'react-intl';
 import moment from 'moment';
 
 import BalanceSheetHeader from './BalanceSheetHeader';
@@ -17,6 +16,8 @@ import withDashboard from 'containers/Dashboard/withDashboard';
 import withBalanceSheetActions from './withBalanceSheetActions';
 import withBalanceSheetDetail from './withBalanceSheetDetail';
 
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
 
 function BalanceSheet({
   // #withDashboard
@@ -24,14 +25,14 @@ function BalanceSheet({
 
   // #withBalanceSheetActions
   fetchBalanceSheet,
-  
+
   // #withBalanceSheetDetail
   balanceSheetLoading,
 
   // #withPreferences
   organizationSettings
 }) {
-  const intl = useIntl();
+  const { formatMessage } = useIntl();
   const [filter, setFilter] = useState({
     from_date: moment().startOf('year').format('YYYY-MM-DD'),
     to_date: moment().endOf('year').format('YYYY-MM-DD'),
@@ -40,7 +41,7 @@ function BalanceSheet({
     display_columns_by: '',
     none_zero: false,
   });
- 
+
   const fetchHook = useQuery(['balance-sheet', filter],
     (key, query) => { fetchBalanceSheet({ ...query }); });
 
@@ -50,7 +51,7 @@ function BalanceSheet({
   }, [fetchHook]);
 
   useEffect(() => {
-    changePageTitle('Balance Sheet');
+    changePageTitle(formatMessage({ id: 'balance_sheet' }));
   }, []);
 
   // Handle re-fetch balance sheet after filter change.

client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js

@@ -14,6 +14,7 @@ import Icon from 'components/Icon';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
 import classNames from 'classnames';
 import FilterDropdown from 'components/FilterDropdown';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 
 export default function JournalActionsBar({
@@ -32,7 +33,7 @@ export default function JournalActionsBar({
         <Button
           className={classNames(Classes.MINIMAL, 'button--table-views')}
           icon={<Icon icon='cog' />}
-          text='Customize Report'
+          text={<T id={'customize_report'}/>}
         />
         <NavbarDivider />
 
@@ -43,19 +44,19 @@ export default function JournalActionsBar({
 
           <Button
             className={classNames(Classes.MINIMAL, 'button--filter')}
-            text="Filter"
+            text={<T id={'filter'}/>}
             icon={ <Icon icon="filter" /> } />
         </Popover>
 
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon='file-export' />}
-          text='Print'
+          text={<T id={'print'}/>}
         />
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon='file-export' />}
-          text='Export'
+          text={<T id={'export'}/>}
         />
       </NavbarGroup>
     </DashboardActionsBar>

client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js

@@ -1,13 +1,12 @@
-import React, {useMemo, useCallback} from 'react';
+import React, { useMemo, useCallback } from 'react';
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
-import {Row, Col} from 'react-grid-system';
-import { 
+import { Row, Col } from 'react-grid-system';
+import {
   Button,
   FormGroup,
   MenuItem,
 } from "@blueprintjs/core";
 import SelectList from 'components/SelectList';
-import {useIntl} from 'react-intl';
 import moment from 'moment';
 import Icon from 'components/Icon';
 import { useFormik } from 'formik';
@@ -15,12 +14,13 @@ import * as Yup from 'yup';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
 import SelectDisplayColumnsBy from '../SelectDisplayColumnsBy';
 import RadiosAccountingBasis from '../RadiosAccountingBasis';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 export default function BalanceSheetHeader({
   onSubmitFilter,
   pageFilter,
 }) {
-  const intl = useIntl();
+  const { formatMessage } = useIntl();
 
   const formik = useFormik({
     enableReinitialize: true,
@@ -49,18 +49,18 @@ export default function BalanceSheetHeader({
   // Handle submit filter submit button.
   const handleSubmitClick = useCallback(() => {
     formik.submitForm();
-  }, [formik]);  
+  }, [formik]);
 
   const filterAccountsOptions = useMemo(() => [
-    {key: '', name: 'Accounts with Zero Balance'},
-    {key: 'all-trans', name: 'All Transactions' },
+    { key: '', name: formatMessage({ id: 'accounts_with_zero_balance' }) },
+    { key: 'all-trans', name: formatMessage({ id: 'all_transactions' }) },
   ], []);
 
   const filterAccountRenderer = useCallback((item, { handleClick, modifiers, query }) => {
     return (<MenuItem text={item.name} key={item.id} onClick={handleClick} />);
   }, []);
 
-  const infoIcon = useMemo(() => 
+  const infoIcon = useMemo(() =>
     (<Icon icon="info-circle" iconSize={12} />), []);
 
   const handleAccountingBasisChange = useCallback((value) => {
@@ -79,7 +79,7 @@ export default function BalanceSheetHeader({
 
         <Col sm={3}>
           <FormGroup
-            label={'Filter Accounts'}
+            label={<T id={'filter_accounts'} />}
             className="form-group--select-list bp3-fill"
             inline={false}>
 
@@ -94,8 +94,8 @@ export default function BalanceSheetHeader({
 
         <Col sm={3}>
           <RadiosAccountingBasis
-            selectedValue={formik.values.basis} 
-            onChange={handleAccountingBasisChange} />          
+            selectedValue={formik.values.basis}
+            onChange={handleAccountingBasisChange} />
         </Col>
 
         <Col sm={3}>
@@ -104,7 +104,7 @@ export default function BalanceSheetHeader({
             onClick={handleSubmitClick}
             disabled={formik.isSubmitting}
             className={'button--submit-filter mt2'}>
-            { 'Calculate Report' }
+            <T id={'calculate_report'} />
           </Button>
         </Col>
       </Row>

client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js

@@ -12,6 +12,7 @@ import {
 } from 'store/financialStatement/financialStatements.selectors';
 
 import { compose, defaultExpanderReducer } from 'utils';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 
 function BalanceSheetTable({
@@ -27,6 +28,8 @@ function BalanceSheetTable({
   onFetchData,
   loading,
 }) {
+
+  const {formatMessage} = useIntl();
   const columns = useMemo(() => [
     {
       // Build our expander column
@@ -68,18 +71,18 @@ function BalanceSheetTable({
       disableResizing: true,
     },
     {
-      Header: 'Account Name',
+      Header: formatMessage({id:'account_name'}),
       accessor: 'name',
       className: "account_name",
     },
     {
-      Header: 'Code', 
+      Header: formatMessage({id:'code'}),
       accessor: 'code',
       className: "code",
     },
     ...(balanceSheetQuery.display_columns_type === 'total') ? [
       {
-        Header: 'Total',
+        Header: formatMessage({id:'total'}),
         accessor: 'balance.formatted_amount',
         Cell: ({ cell }) => {
           const row = cell.row.original;