Merge remote-tracking branch 'origin/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 withSettings from 'containers/Settings/withSettings';
 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'),
@@ -52,7 +53,7 @@ function BalanceSheet({
   }, []);
 
   useEffect(() => {
-    changePageTitle('Balance Sheet');
+    changePageTitle(formatMessage({ id: 'balance_sheet' }));
   }, []);
 
   // Handle re-fetch balance sheet after filter change.

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

@@ -15,6 +15,7 @@ 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({
@@ -33,7 +34,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 />
 
@@ -44,19 +45,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,13 +14,14 @@ 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,
@@ -32,8 +32,8 @@ export default function BalanceSheetHeader({
       to_date: moment(pageFilter.to_date).toDate(),
     },
     validationSchema: Yup.object().shape({
-      from_date: Yup.date().required(),
-      to_date: Yup.date().min(Yup.ref('from_date')).required(),
+      from_date: Yup.date().required().label(formatMessage({id:'from_data'})),
+      to_date: Yup.date().min(Yup.ref('from_date')).required().label(formatMessage({id:'to_date'})),
     }),
     onSubmit: (values, actions) => {
       onSubmitFilter(values);
@@ -50,18 +50,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) => {
@@ -80,7 +80,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}>
 
@@ -95,8 +95,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}>
@@ -105,7 +105,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;

client/src/containers/FinancialStatements/FinancialStatementDateRange.js

@@ -2,7 +2,8 @@ import React, {useState, useCallback, useMemo} from 'react';
 import {Row, Col} from 'react-grid-system';
 import {momentFormatter} from 'utils';
 import {DateInput} from '@blueprintjs/datetime';
-import {useIntl} from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
 import {
   HTMLSelect,
   FormGroup, 

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js

@@ -2,10 +2,11 @@ import React, { useEffect, useCallback, useState, useMemo } from 'react';
 import moment from 'moment';
 import GeneralLedgerTable from 'containers/FinancialStatements/GeneralLedger/GeneralLedgerTable';
 import { useQuery } from 'react-query';
+import { useIntl } from 'react-intl';
 
 import GeneralLedgerHeader from './GeneralLedgerHeader';
 
-import {compose} from 'utils';
+import { compose } from 'utils';
 
 import DashboardInsider from 'components/Dashboard/DashboardInsider'
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
@@ -30,6 +31,7 @@ function GeneralLedger({
   // #withSettings
   organizationSettings,
 }) {
+  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 +42,7 @@ function GeneralLedger({
 
   // Change page title of the dashboard.
   useEffect(() => {
-    changePageTitle('General Ledger');
+    changePageTitle(formatMessage({id:'general_ledger'}));
   }, []);
 
   const fetchAccounts = useQuery(['accounts-list'],
@@ -74,7 +76,7 @@ function GeneralLedger({
     setRefetch(true);
   }, [setFilter]);
 
-  const handleFilterChanged = () => {};
+  const handleFilterChanged = () => { };
 
   return (
     <DashboardInsider>

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.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';
 
 /**
  * General ledger actions bar.
@@ -34,7 +35,7 @@ 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 />
 
@@ -45,19 +46,19 @@ export default function GeneralLedgerActionsBar({
 
           <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/GeneralLedger/GeneralLedgerHeader.js

@@ -1,6 +1,7 @@
 import React, {useState, useMemo, useEffect, useCallback} from 'react';
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
-import {useIntl} from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
 import {
   Button,
   FormGroup,
@@ -19,13 +20,12 @@ import FinancialStatementDateRange from 'containers/FinancialStatements/Financia
 import * as Yup from 'yup';
 import RadiosAccountingBasis from '../RadiosAccountingBasis';
 
-
 function GeneralLedgerHeader({
   onSubmitFilter,
   pageFilter,
   accounts,
 }) {
-  const intl = useIntl();
+  const {formatMessage} = useIntl();
 
   const formik = useFormik({
     enableReinitialize: true,
@@ -64,7 +64,7 @@ function GeneralLedgerHeader({
       <Row>
         <Col sm={3}>
           <FormGroup
-            label={'Specific Accounts'}
+            label={<T id={'specific_accounts'}/>}
             className={classNames('form-group--select-list', Classes.FILL)}
           >
             <AccountsMultiSelect
@@ -84,7 +84,7 @@ function GeneralLedgerHeader({
             onClick={handleSubmitClick}
             disabled={formik.isSubmitting}
             className={'button--submit-filter mt2'}>
-            { 'Calculate Report' }
+            <T id={'calculate_report'}/>
           </Button>
         </Col>
       </Row>

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js

@@ -5,6 +5,7 @@ import {
   defaultExpanderReducer,
   compose
 } from 'utils';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
@@ -31,9 +32,10 @@ function GeneralLedgerTable({
   generalLedgerTableRows,
   generalLedgerQuery,
 }) {
+  
   // Account name column accessor.
   const accountNameAccessor = useCallback((row) => {
-    switch(row.rowType) {
+    switch (row.rowType) {
       case ROW_TYPE.OPENING_BALANCE:
         return 'Opening Balance';
       case ROW_TYPE.CLOSING_BALANCE:
@@ -59,32 +61,32 @@ function GeneralLedgerTable({
     const transaction = cell.row.original
 
     if (transaction.rowType === ROW_TYPE.ACCOUNT) {
-      return (!cell.row.isExpanded) ? 
+      return (!cell.row.isExpanded) ?
         (<Money amount={transaction.closing.amount} currency={"USD"} />) : '';
     }
     return (<Money amount={transaction.amount} currency={"USD"} />);
   }, []);
 
   const referenceLink = useCallback((row) => {
-    return (<a href="">{ row.referenceId }</a>);
+    return (<a href="">{row.referenceId}</a>);
   });
-
+  const { formatMessage } = useIntl();
   const columns = useMemo(() => [
     {
       // Build our expander column
       id: 'expander', // Make sure it has an ID
-      className: 'expander',      
+      className: 'expander',
       Header: ({
         getToggleAllRowsExpandedProps,
         isAllRowsExpanded
       }) => (
-        <span {...getToggleAllRowsExpandedProps()} className="toggle">
-          {isAllRowsExpanded ?
-            (<span class="arrow-down" />) :
-            (<span class="arrow-right" />)
-          }
-        </span>
-      ),
+          <span {...getToggleAllRowsExpandedProps()} className="toggle">
+            {isAllRowsExpanded ?
+              (<span class="arrow-down" />) :
+              (<span class="arrow-right" />)
+            }
+          </span>
+        ),
       Cell: ({ row }) =>
         // Use the row.canExpand and row.getToggleRowExpandedProps prop getter
         // to build the toggle for expanding a row
@@ -110,37 +112,37 @@ function GeneralLedgerTable({
       disableResizing: true,
     },
     {
-      Header: 'Account Name',
+      Header: formatMessage({id:'account_name'}),
       accessor: accountNameAccessor,
       className: "name",
     },
     {
-      Header: 'Date',
+      Header: formatMessage({id:'date'}),
       accessor: dateAccessor,
       className: "date",
     },
     {
-      Header: 'Transaction Type',
+      Header: formatMessage({id:'transaction_type'}),
       accessor: 'referenceType',
       className: 'transaction_type',
     },
     {
-      Header: 'Trans. NUM',
+      Header: formatMessage({id:'trans_num'}),
       accessor: referenceLink,
       className: 'transaction_number'
     },
     {
-      Header: 'Description',
+      Header: formatMessage({id:'description'}),
       accessor: 'note',
       className: 'description',
     },
     {
-      Header: 'Amount',
+      Header: formatMessage({id:'amount'}),
       Cell: amountCell,
       className: 'amount'
     },
     {
-      Header: 'Balance',
+      Header: formatMessage({id:'balance'}),
       Cell: amountCell,
       className: 'balance',
     },
@@ -172,7 +174,7 @@ function GeneralLedgerTable({
         expanded={expandedRows}
         virtualizedRows={true}
         fixedItemSize={37}
-        fixedSizeHeight={1000}  />
+        fixedSizeHeight={1000} />
     </FinancialSheet>
   ); 
 }
@@ -201,4 +203,4 @@ export default compose(
     generalLedgerSheetLoading,
     generalLedgerQuery
   })),
-)(GeneralLedgerTable);
+)(GeneralLedgerTable);

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

@@ -1,8 +1,9 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import { useQuery } from 'react-query';
-import {compose} from 'utils';
-
 import moment from 'moment';
+import { useIntl } from 'react-intl';
+
+import { compose } from 'utils';
 import JournalTable from './JournalTable';
 
 import JournalHeader from './JournalHeader';
@@ -15,6 +16,7 @@ import withDashboard from 'containers/Dashboard/withDashboard';
 import withJournalActions from './withJournalActions';
 
 
+
 function Journal({
   // #withJournalActions
   requestFetchJournalSheet,
@@ -30,10 +32,11 @@ function Journal({
     to_date: moment().endOf('year').format('YYYY-MM-DD'),
     basis: 'accural'
   });
+  const { formatMessage } = useIntl();
   const [refetch, setRefetch] = useState(false);
 
   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 { FormattedMessage as T, useIntl } from 'react-intl';
 import * as Yup from 'yup';
 
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
@@ -17,7 +17,7 @@ export default function JournalHeader({
   pageFilter,
   onSubmitFilter,
 }) {
-  const intl = useIntl();
+  const { formatMessage } = useIntl();
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
@@ -38,18 +38,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({
@@ -31,46 +32,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']),
     },

client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js

@@ -9,6 +9,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 ProfitLossActionsBar({
 
@@ -26,19 +27,19 @@ export default function ProfitLossActionsBar({
         <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/ProfitLossSheet/ProfitLossSheetHeader.js

@@ -1,11 +1,11 @@
-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,
 } 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';
@@ -17,7 +17,7 @@ export default function JournalHeader({
   pageFilter,
   onSubmitFilter,
 }) {
-  const intl = useIntl();
+  const { formatMessage } = useIntl();
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
@@ -26,8 +26,8 @@ export default function JournalHeader({
       to_date: moment(pageFilter.to_date).toDate()
     },
     validationSchema: Yup.object().shape({
-      from_date: Yup.date().required(),
-      to_date: Yup.date().min(Yup.ref('from_date')).required(),
+      from_date: Yup.date().required().label(formatMessage({id:'from_date'})),
+      to_date: Yup.date().min(Yup.ref('from_date')).required().label(formatMessage({id:'to_date'})),
     }),
     onSubmit: (values, actions) => {
       onSubmitFilter(values);
@@ -60,7 +60,7 @@ export default function JournalHeader({
 
         <Col sm={3}>
           <RadiosAccountingBasis
-            selectedValue={formik.values.basis} 
+            selectedValue={formik.values.basis}
             onChange={handleAccountingBasisChange} />
         </Col>
 
@@ -69,7 +69,7 @@ export default function JournalHeader({
             type="submit"
             onClick={handleSubmitClick}
             className={'button--submit-filter mt2'}>
-            { 'Run Report' }
+            <T id={'run_report'} />
           </Button>
         </Col>
       </Row>

client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js

@@ -9,6 +9,7 @@ import {
   getFinancialSheetIndexByQuery,
 } from 'store/financialStatement/financialStatements.selectors';
 import withProfitLossDetail from './withProfitLoss';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 
 function ProfitLossSheetTable({
@@ -22,6 +23,9 @@ function ProfitLossSheetTable({
   onFetchData,
   companyName,
 }) {
+
+  const {formatMessage} =useIntl();
+
   const columns = useMemo(() => [
     {
       // Build our expander column
@@ -63,18 +67,18 @@ function ProfitLossSheetTable({
       disableResizing: true,
     },  
     {
-      Header: 'Account Name',
+      Header: formatMessage({id:'account_name'}),
       accessor: 'name',
       className: "name",
     },
     {
-      Header: 'Acc. Code',
+      Header: formatMessage({id:'acc_code'}),
       accessor: 'code',
       className: "account_code",
     },
     ...(profitLossQuery.display_columns_type === 'total') ? [
       {
-        Header: 'Total',
+        Header: formatMessage({id:'total'}),
         Cell: ({ cell }) => {
           const row = cell.row.original;
           if (row.total) {

client/src/containers/FinancialStatements/RadiosAccountingBasis.js

@@ -9,20 +9,20 @@ import {
 
 export default function RadiosAccountingBasis(props) {
   const { onChange, ...rest } = props;
-  const intl = useIntl();
+  const {formatMessage} = useIntl();
 
   return (
     <RadioGroup
       inline={true}
-      label={intl.formatMessage({'id': 'accounting_basis'})}
+      label={formatMessage({'id': 'accounting_basis'})}
       name="basis"
       onChange={handleStringChange((value) => {
         onChange && onChange(value);
       })}
       className={'radio-group---accounting-basis'}
       {...rest}>
-      <Radio label="Cash" value="cash" />
-      <Radio label="Accural" value="accural" />
+      <Radio label={formatMessage({id:'cash'})} value="cash" />
+      <Radio label={formatMessage({id:'accrual'})} value="accural" />
     </RadioGroup>
   );
 }

client/src/containers/FinancialStatements/SelectDisplayColumnsBy.js

@@ -6,6 +6,7 @@ import {
   FormGroup,
   MenuItem,
 } from '@blueprintjs/core';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 export default function SelectsListColumnsBy(props) {
   const { onItemSelect, formGroupProps, selectListProps } = props;
@@ -30,12 +31,12 @@ export default function SelectsListColumnsBy(props) {
   }, [setItemSelected, onItemSelect]);
 
   const buttonLabel = useMemo(() => 
-    itemSelected ? itemSelected.name : 'Select display columns by...',
+    itemSelected ? itemSelected.name : <T id={'select_display_columns_by'}/>,
     [itemSelected]);
 
   return (
     <FormGroup
-      label={'Display report columns'}
+      label={<T id={'display_report_columns'}/>}
       className="form-group-display-columns-by form-group--select-list bp3-fill"
       inline={false}
       {...formGroupProps}>

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

@@ -1,21 +1,23 @@
 import React, { useEffect, useCallback, useState, useMemo } from 'react';
-import TrialBalanceSheetHeader from "./TrialBalanceSheetHeader";
-import TrialBalanceSheetTable from './TrialBalanceSheetTable';
 import { useQuery } from 'react-query';
 import moment from 'moment';
-import {compose} from 'utils';
-
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import { useIntl } from 'react-intl';
 
+import TrialBalanceSheetHeader from "./TrialBalanceSheetHeader";
+import TrialBalanceSheetTable from './TrialBalanceSheetTable';
 import TrialBalanceActionsBar from './TrialBalanceActionsBar';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 
+import { compose } from 'utils';
+
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import withDashboard from 'containers/Dashboard/withDashboard';
 import withTrialBalanceActions from './withTrialBalanceActions';
 import withTrialBalance from './withTrialBalance';
 import withSettings from 'containers/Settings/withSettings';
 
 
+
 function TrialBalanceSheet({
   // #withDashboard
   changePageTitle,
@@ -36,6 +38,7 @@ function TrialBalanceSheet({
     none_zero: false,
   });
   const [refetch, setRefetch] = useState(false);
+  const { formatMessage } = useIntl();
 
   const fetchHook = useQuery(['trial-balance', filter],
     (key, query) => fetchTrialBalanceSheet(query),
@@ -48,7 +51,7 @@ function TrialBalanceSheet({
 
   // 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,10 @@
-import React, {useState, useCallback, useMemo} from 'react';
+import React, { useCallback } from 'react';
 import * as Yup from 'yup';
-import {Row, Col} from 'react-grid-system';
-import { 
-  Button,
-} from "@blueprintjs/core";
 import moment from 'moment';
-import {useIntl} from 'react-intl';
+import { Row, Col } from 'react-grid-system';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import { useFormik } from 'formik';
+import { Button } from "@blueprintjs/core";
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
@@ -16,7 +14,7 @@ export default function TrialBalanceSheetHeader({
   pageFilter,
   onSubmitFilter,
 }) {
-  const intl = useIntl();
+  const { formatMessage } = useIntl();
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
@@ -25,8 +23,8 @@ export default function TrialBalanceSheetHeader({
       to_date: moment(pageFilter.to_date).toDate()
     },
     validationSchema: Yup.object().shape({
-      from_date: Yup.date().required(),
-      to_date: Yup.date().min(Yup.ref('from_date')).required(),
+      from_date: Yup.date().required().label(formatMessage({id:'from_date'})),
+      to_date: Yup.date().min(Yup.ref('from_date')).required().label(formatMessage({id:'to_date'})),
     }),
     onSubmit: (values, { setSubmitting }) => {
       onSubmitFilter(values);
@@ -49,7 +47,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

@@ -1,5 +1,7 @@
-import React, {useEffect, useState, useCallback, useMemo} from 'react';
+import React, {useCallback, useMemo} from 'react';
 import { connect } from 'react-redux';
+import { useIntl } from 'react-intl';
+
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 import Money from 'components/Money';
@@ -24,6 +26,9 @@ function TrialBalanceSheetTable({
   loading,
   companyName,
 }) {
+
+  const {formatMessage} =useIntl();
+
   const columns = useMemo(() => [
     {
       // Build our expander column
@@ -35,8 +40,7 @@ function TrialBalanceSheetTable({
       }) => (
         <span {...getToggleAllRowsExpandedProps()} className="toggle">
           {isAllRowsExpanded ?
-            (<span class="arrow-down" />) :
-            (<span class="arrow-right" />)
+            (<span class="arrow-down" />) : (<span class="arrow-right" />)
           }
         </span>
       ),
@@ -55,40 +59,37 @@ function TrialBalanceSheetTable({
               className: 'toggle',
             })}
           >
-            {row.isExpanded ?
-              (<span class="arrow-down" />) :
-              (<span class="arrow-right" />)
-            }
+            {row.isExpanded ? (<span class="arrow-down" />) : (<span class="arrow-right" />) }
           </span>
         ) : null,
       width: 20,
       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,