WIP / exchangeRate / localize

client/src/containers/Accounts/AccountsActionsBar.js

@@ -27,6 +27,7 @@ import withAccountsTableActions from 'containers/Accounts/withAccountsTableActio
 import withAccounts from 'containers/Accounts/withAccounts';
 
 import {compose} from 'utils';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 
 function AccountsActionsBar({
@@ -86,7 +87,7 @@ function AccountsActionsBar({
           <Button
             className={classNames(Classes.MINIMAL, 'button--table-views')}
             icon={<Icon icon='table' />}
-            text='Table Views'
+            text={<T id={'table_views'}/>}
             rightIcon={'caret-down'}
           />
         </Popover>
@@ -96,7 +97,7 @@ function AccountsActionsBar({
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon='plus' />}
-          text='New Account'
+          text={<T id={'new_account'}/>}
           onClick={onClickNewAccount}
         />
         <Popover
@@ -107,7 +108,7 @@ function AccountsActionsBar({
 
           <Button
             className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={filterCount <= 0 ? 'Filter' : `${filterCount} filters applied`}
+            text={filterCount <= 0 ? <T id={'filter'}/> : `${filterCount} filters applied`}
             icon={ <Icon icon="filter" /> }/>
         </Popover>
 
@@ -115,13 +116,13 @@ function AccountsActionsBar({
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon='archive' iconSize={15} />}
-            text='Archive'
+            text={<T id={'archive'}/>}
             onClick={handleBulkArchive}
           />
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon='trash' iconSize={15} />}
-            text='Delete'
+            text={<T id={'delete'}/>}
             intent={Intent.DANGER}
             onClick={handleBulkDelete}
           />
@@ -130,12 +131,12 @@ function AccountsActionsBar({
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon='file-import' />}
-          text='Import'
+          text={<T id={'import'}/>}
         />
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon='file-export' />}
-          text='Export'
+          text={<T id={'export'}/>}
         />
       </NavbarGroup>
     </DashboardActionsBar>

client/src/containers/Accounts/AccountsChart.js

@@ -23,6 +23,7 @@ import withAccounts from 'containers/Accounts/withAccounts';
 
 import { compose } from 'utils';
 
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 function AccountsChart({
 
@@ -225,8 +226,8 @@ function AccountsChart({
         </Alert>
 
         <Alert
-          cancelButtonText="Cancel"
-          confirmButtonText="Inactivate"
+          cancelButtonText={<T id={'cancel'}/>}
+          confirmButtonText={<T id={'inactivate'}/>}
           icon="trash"
           intent={Intent.WARNING}
           isOpen={inactiveAccount}
@@ -239,8 +240,8 @@ function AccountsChart({
         </Alert>
 
         <Alert
-          cancelButtonText="Cancel"
-          confirmButtonText="Delete"
+       cancelButtonText={<T id={'cancel'}/>}
+          confirmButtonText={<T id={'delete'}/>}
           icon="trash"
           intent={Intent.DANGER}
           isOpen={bulkDelete}

client/src/containers/Accounts/AccountsDataTable.js

@@ -23,6 +23,8 @@ import withAccounts from 'containers/Accounts/withAccounts';
 
 import {If} from 'components';
 
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
 function AccountsDataTable({
   // # withAccounts  
   accounts,
@@ -39,7 +41,7 @@ function AccountsDataTable({
   onInactiveAccount,
 }) {
   const [initialMount, setInitialMount] = useState(false);
-
+  const {formatMessage} = useIntl();
   useUpdateEffect(() => {
     if (!accountsLoading) {
       setInitialMount(true);
@@ -59,17 +61,17 @@ function AccountsDataTable({
       <MenuItem text='View Details' />
       <MenuDivider />
       <MenuItem
-        text='Edit Account'
+        text={<T id={'edit_account'}/>}
         onClick={handleEditAccount(account)} />
       <MenuItem
-        text='New Account'
+        text={<T id={'new_account'}/>}
         onClick={() => handleNewParentAccount(account)} />
       <MenuDivider />
       <MenuItem
-        text='Inactivate Account'
+        text={<T id={'inactivate_account'}/>}
         onClick={() => onInactiveAccount(account)} />
       <MenuItem
-        text='Delete Account'
+        text={<T id={'delete_account'}/>}
         onClick={() => onDeleteAccount(account)} />
     </Menu>
   ), [handleEditAccount, onDeleteAccount, onInactiveAccount]);
@@ -77,7 +79,7 @@ function AccountsDataTable({
   const columns = useMemo(() => [
     {
       id: 'name',
-      Header: 'Account Name',
+      Header:formatMessage({id:'account_name'}),
       accessor: row => {
         return (row.description) ?
           (<Tooltip
@@ -93,21 +95,21 @@ function AccountsDataTable({
     },
     {
       id: 'code',
-      Header: 'Code',
+      Header:formatMessage({id:'code'}),
       accessor: 'code',
       className: 'code',
       width: 100,
     },
     {
       id: 'type',
-      Header: 'Type',
+      Header:formatMessage({id:'type'}),
       accessor: 'type.name',
       className: 'type',
       width: 120,
     },
     {
       id: 'normal',
-      Header: 'Normal',
+      Header: formatMessage({id:'normal'}),
       Cell: ({ cell }) => {
         const account = cell.row.original;
         const type = account.type ? account.type.normal : '';
@@ -120,7 +122,7 @@ function AccountsDataTable({
     },
     {
       id: 'balance',
-      Header: 'Balance',
+      Header: formatMessage({id:'balance'}),
       Cell: ({ cell }) => {
         const account = cell.row.original;
         const {balance = null} = account;

client/src/containers/Accounts/withAccounts.js

@@ -16,4 +16,4 @@ const mapStateToProps = (state, props) => ({
   accountErrors: state.accounts.errors,
 });
 
-export default connect(mapStateToProps);
+export default connect(mapStateToProps);