WIP feature/breadcrumb/fix_localize

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>