WIP feature/breadcrumb/fix_localize

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.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 GeneralLedgerActionsBar({
 
@@ -31,19 +32,19 @@ export default function GeneralLedgerActionsBar({
         <Button
           className={classNames(Classes.MINIMAL, 'button--table-views')}
           icon={<Icon icon='cog' />}
-          text='Customize Report'
+          text={<T id={'customize_report'}/>}
         />
         <NavbarDivider />
 
         <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/TrialBalanceSheet/TrialBalanceSheet.js

@@ -14,6 +14,7 @@ import withDashboard from 'containers/Dashboard/withDashboard';
 import withTrialBalanceActions from './withTrialBalanceActions';
 import withTrialBalance from './withTrialBalance';
 import SettingsConnect from 'connectors/Settings.connect';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 
 function TrialBalanceSheet({
@@ -44,9 +45,11 @@ function TrialBalanceSheet({
     fetchHook.refetch()
   }, [fetchHook]);
 
+  const {formatMessage} =useIntl();
+
   // Change page title of the dashboard.
   useEffect(() => {
-    changePageTitle('Trial Balance Sheet');
+    changePageTitle(formatMessage({id:'trial_balance_sheet'}));
   }, []);
 
   const handleFilterSubmit = useCallback((filter) => {

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js

@@ -1,12 +1,12 @@
-import React, {useState, useCallback, useMemo} from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import * as Yup from 'yup';
-import {Row, Col} from 'react-grid-system';
+import { Row, Col } from 'react-grid-system';
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
-import { 
+import {
   Button,
 } from "@blueprintjs/core";
 import moment from 'moment';
-import {useIntl} from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import { useFormik } from 'formik';
 
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
@@ -16,7 +16,7 @@ export default function TrialBalanceSheetHeader({
   pageFilter,
   onSubmitFilter,
 }) {
-  const intl = useIntl();
+  const { formatMessage } = useIntl();
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
@@ -49,7 +49,7 @@ export default function TrialBalanceSheetHeader({
             onClick={handleSubmitClick}
             disabled={formik.isSubmitting}
             className={'button--submit-filter'}>
-            { 'Run Report' }
+            <T id={'run_report'} />
           </Button>
         </Col>
       </Row>

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js

@@ -10,6 +10,7 @@ import {
 import withTrialBalance from './withTrialBalance';
 
 import { compose } from 'utils';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 
 function TrialBalanceSheetTable({
@@ -23,6 +24,9 @@ function TrialBalanceSheetTable({
   loading,
   companyName,
 }) {
+
+  const {formatMessage} =useIntl();
+
   const columns = useMemo(() => [
     {
       // Build our expander column
@@ -64,30 +68,30 @@ function TrialBalanceSheetTable({
       disableResizing: true,
     },
     {
-      Header: 'Account Name',
+      Header: formatMessage({id:'account_name'}),
       accessor: 'name',
       className: "name",
     },
     {
-      Header: 'Code', 
+      Header: formatMessage({id:'code'}), 
       accessor: 'code',
       className: "code",
       width: 120,
     },
     {
-      Header: 'Credit',
+      Header: formatMessage({id:'credit'}),
       accessor: r => (<Money amount={r.credit} currency="USD" />),
       className: 'credit',
       width: 120,
     },
     {
-      Header: 'Debit',
+      Header: formatMessage({id:'debit'}),
       accessor: r => (<Money amount={r.debit} currency="USD" />),
       className: 'debit',
       width: 120,
     },
     {
-      Header: 'Balance',
+      Header: formatMessage({id:'balance'}),
       accessor: r => (<Money amount={r.balance} currency="USD" />),
       className: 'balance',
       width: 120,