WIP feature/breadcrumb/fix_localize

client/src/containers/FinancialStatements/Journal/Journal.js

@@ -14,6 +14,7 @@ import SettingsConnect from 'connectors/Settings.connect';
 import withDashboard from 'containers/Dashboard/withDashboard';
 import withJournal from './withJournal';
 import withJournalActions from './withJournalActions';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 
 function Journal({
@@ -34,9 +35,9 @@ function Journal({
     to_date: moment().endOf('year').format('YYYY-MM-DD'),
     basis: 'accural'
   });
-
+const {formatMessage} =useIntl();
   useEffect(() => {
-    changePageTitle('Journal Sheet');
+    changePageTitle(formatMessage({id:'journal_sheet'}));
   }, []);
 
   const fetchHook = useQuery(['journal', filter],

client/src/containers/FinancialStatements/Journal/JournalActionsBar.js

@@ -14,7 +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 +32,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 +43,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/Journal/JournalHeader.js

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

client/src/containers/FinancialStatements/Journal/JournalTable.js

@@ -12,6 +12,7 @@ import {
 } from 'store/financialStatement/financialStatements.selectors';
 
 import withJournal from './withJournal';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 
 function JournalSheetTable({
@@ -30,46 +31,48 @@ function JournalSheetTable({
   const exceptRowTypes = (rowType, value, types) => {
     return (types.indexOf(rowType) !== -1) ? '' : value;    
   };
+const {formatMessage} =useIntl();
+
   const columns = useMemo(() => [
     {
-      Header: 'Date',
+      Header: formatMessage({id:'date'}),
       accessor: r => rowTypeFilter(r.rowType, moment(r.date).format('YYYY/MM/DD'), ['first_entry']),
       className: 'date',
       width: 85,
     },
     {
-      Header: 'Transaction Type',
+      Header: formatMessage({id:'transaction_type'}),
       accessor: r => rowTypeFilter(r.rowType, r.transaction_type, ['first_entry']),
       className: "transaction_type",
       width: 145,
     },
     {
-      Header: 'Num.',
+      Header: formatMessage({id:'num'}),
       accessor: r => rowTypeFilter(r.rowType, r.reference_id, ['first_entry']),
       className: 'reference_id',
       width: 70,
     },
     {
-      Header: 'Description',
+      Header: formatMessage({id:'description'}),
       accessor: 'note',
     },
     {
-      Header: 'Acc. Code',
+      Header: formatMessage({id:'acc_code'}),
       accessor: 'account.code',
       width: 120,
       className: 'account_code',
     },
     {
-      Header: 'Account',
+      Header: formatMessage({id:'account'}),
       accessor: 'account.name',
     },
     {
-      Header: 'Credit',
+      Header: formatMessage({id:'credit'}),
       accessor: r => exceptRowTypes(
         r.rowType, (<Money amount={r.credit} currency={'USD'} />), ['space_entry']),
     },
     {
-      Header: 'Debit',
+      Header: formatMessage({id:'debit'}),
       accessor: r => exceptRowTypes(
         r.rowType, (<Money amount={r.debit} currency={'USD'} />), ['space_entry']),
     },