WIP / exchangeRate / localize

client/src/components/AccountsMultiSelect.js

@@ -6,6 +6,7 @@ import {
 } from '@blueprintjs/core';
 // import {Select} from '@blueprintjs/select';
 import MultiSelect from 'components/MultiSelect';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 export default function AccountsMultiSelect({
   accounts,
@@ -58,7 +59,7 @@ export default function AccountsMultiSelect({
       <Button
         rightIcon='caret-down'
         text={countSelectedAccounts === 0 ?
-          'All accounts' :
+         <T id={'all_accounts'}/>:
           `(${countSelectedAccounts}) Selected accounts`
         }
       />

client/src/components/Authentication.js

@@ -2,24 +2,30 @@ import React from 'react';
 import { Redirect, Route, Switch, Link } from 'react-router-dom';
 import BodyClassName from 'react-body-classname';
 import authenticationRoutes from 'routes/authentication';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
-export default function AuthenticationWrapper({ isAuthenticated =false, ...rest }) {
+export default function AuthenticationWrapper({
+  isAuthenticated = false,
+  ...rest
+}) {
   const to = { pathname: '/dashboard/homepage' };
 
   return (
-    <Route path="/auth">
+    <Route path='/auth'>
-      { (isAuthenticated) ?
+      {isAuthenticated ? (
-        (<Redirect to={to} />) : (
+        <Redirect to={to} />
+      ) : (
         <BodyClassName className={'authentication'}>
           <Switch>
-            <div class="authentication-page">
+            <div class='authentication-page'>
               <Link
                 to={'bigcapital.io'}
-                className={'authentication-page__goto-bigcapital'}>
+                className={'authentication-page__goto-bigcapital'}
-                  ← Go to bigcapital.com
+              >
+                <T id={'go_to_bigcapital_com'} />
               </Link>
 
-              <div class="authentication-page__form-wrapper">
+              <div class='authentication-page__form-wrapper'>
                 {authenticationRoutes.map((route, index) => (
                   <Route
                     key={index}
@@ -32,8 +38,7 @@ export default function AuthenticationWrapper({ isAuthenticated =false, ...rest
             </div>
           </Switch>
         </BodyClassName>
-        )
+      )}
-      }
     </Route>
   );
 }

client/src/components/CurrenciesSelectList.js

@@ -10,6 +10,7 @@ import {
   Select
 } from '@blueprintjs/select';
 
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 export default function CurrenciesSelectList(props) {
   const {formGroupProps, selectProps, onItemSelect} = props;
@@ -39,7 +40,7 @@ export default function CurrenciesSelectList(props) {
 
   return (
     <FormGroup
-      label={'Currency'}
+      label={<T id={'currency'}/>}
       className={'form-group--select-list form-group--currency'}
       {...formGroupProps}
     >

client/src/components/Dashboard/DashboardTopbar.js

@@ -12,6 +12,7 @@ import DashboardTopbarUser from 'components/Dashboard/TopbarUser';
 import Icon from 'components/Icon';
 import SearchConnect from 'connectors/Search.connect';
 import { compose } from 'utils';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 function DashboardTopbar({
   pageTitle,
@@ -77,18 +78,18 @@ function DashboardTopbar({
               onClick={() => openGlobalSearch(true)}
               className={Classes.MINIMAL}
               icon='home'
-              text='Search'
+              text={<T id={'search'}/>}
             />
 
             <Button
               className={Classes.MINIMAL}
               icon='document'
-              text='Filters'
+              text={<T id={'filters'}/>}
             />
             <Button
               className={Classes.MINIMAL}
               icon='document'
-              text='Add order'
+              text={<T id={'add_order'}/>}
             />
             <Button className={Classes.MINIMAL} icon='document' text='More' />
           </NavbarGroup>

client/src/components/DialogsContainer.js

@@ -4,10 +4,12 @@ import UserFormDialog from 'containers/Dialogs/UserFormDialog';
 import ItemCategoryDialog from 'containers/Dialogs/ItemCategoryDialog';
 import CurrencyDialog from 'containers/Dialogs/CurrencyDialog';
 import InviteUserDialog from 'containers/Dialogs/InviteUserDialog';
+import ExchangeRateDialog from 'containers/Dialogs/ExchangeRateDialog';
 
 export default function DialogsContainer() {
   return (
     <React.Fragment>
+      <ExchangeRateDialog />
       <InviteUserDialog />
       <CurrencyDialog />
       <ItemCategoryDialog />

client/src/components/Expenses/ExpenseForm.js

@@ -13,7 +13,7 @@ import {
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { Select } from '@blueprintjs/select';
-import { useIntl } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import { momentFormatter } from 'utils';
 import moment from 'moment';
 import AppToaster from 'components/AppToaster';
@@ -25,8 +25,7 @@ export default function ExpenseForm({
   expenseDetails,
   currencies
 }) {
-  const intl = useIntl();
+  const {formatMessage} = useIntl();
-  console.log({ accounts });
 
   const [state, setState] = useState({
     selectedExpenseAccount: null,
@@ -121,7 +120,7 @@ export default function ExpenseForm({
     <div class='expense-form'>
       <form onSubmit={formik.handleSubmit}>
         <FormGroup
-          label={'Date'}
+          label={<T id={'date'}/>}
           inline={true}
           intent={formik.errors.date && Intent.DANGER}
           helperText={formik.errors.date && formik.errors.date}
@@ -135,7 +134,7 @@ export default function ExpenseForm({
         </FormGroup>
 
         <FormGroup
-          label={'Expense Account'}
+          label={<T id={'expense_account'}/>}
           className={'form-group--expense-account'}
           inline={true}
           intent={formik.errors.expense_account_id && Intent.DANGER}
@@ -159,7 +158,7 @@ export default function ExpenseForm({
         </FormGroup>
 
         <FormGroup
-          label={'Amount'}
+          label={<T id={'amount'}/>}
           className={'form-group--amount'}
           intent={formik.errors.amount && Intent.DANGER}
           helperText={formik.errors.amount && formik.errors.amount}
@@ -191,7 +190,7 @@ export default function ExpenseForm({
         </FormGroup>
 
         <FormGroup
-          label={'Exchange Rate'}
+          label={<T id={'exchange_rate'}/>}
           className={'form-group--exchange-rate'}
           inline={true}
         >
@@ -199,7 +198,7 @@ export default function ExpenseForm({
         </FormGroup>
 
         <FormGroup
-          label={'Payment Account'}
+          label={<T id={'payment_account'}/>}
           className={'form-group--payment-account'}
           inline={true}
           intent={formik.errors.payment_account_id && Intent.DANGER}
@@ -223,7 +222,7 @@ export default function ExpenseForm({
         </FormGroup>
 
         <FormGroup
-          label={'Description'}
+          label={<T id={'description'}/>}
           className={'form-group--description'}
           inline={true}
         >
@@ -236,10 +235,10 @@ export default function ExpenseForm({
 
         <div class='form__floating-footer'>
           <Button intent={Intent.PRIMARY} type='submit'>
-            Save
+        <T id={'save'}/>
           </Button>
-          <Button>Save as Draft</Button>
+          <Button><T id={'save_as_draft'}/></Button>
-          <Button onClick={handleClose}>Close</Button>
+          <Button onClick={handleClose}><T id={'close'}/></Button>
         </div>
       </form>
     </div>

client/src/components/Expenses/ExpensesActionsBar.js

@@ -16,6 +16,7 @@ import { useRouteMatch } from 'react-router-dom'
 import classNames from 'classnames';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import Icon from 'components/Icon';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 export default function ExpensesActionsBar({
 
@@ -39,7 +40,7 @@ export default function ExpensesActionsBar({
           <Button
             className={classNames(Classes.MINIMAL, 'button--table-views')}
             icon={<Icon icon='table' />}
-            text='Table Views'
+            text={<T id={'table_views'}/>}
             rightIcon={'caret-down'}
           />
         </Popover>
@@ -50,31 +51,31 @@ export default function ExpensesActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon='plus' />}
           href='/dashboard/expenses/new'
-          text='New Expense'
+          text={<T id={'new_expense'}/>}
           onClick={onClickNewAccount}
         />
         <Button
           className={Classes.MINIMAL}
           intent={Intent.DANGER}
           icon={<Icon icon='plus' />}
-          text='Delete'
+          text={<T id={'delete'}/>}
           onClick={onClickNewAccount}
         />
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon='plus' />}
-          text='Bulk Update'
+          text={<T id={'bulk_update'}/>}
           onClick={onClickNewAccount}
         />
         <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/components/FilterDropdown.js

@@ -13,6 +13,7 @@ import { usePrevious } from 'react-use';
 import { debounce } from 'lodash';
 import Icon from 'components/Icon';
 import { checkRequiredProperties } from 'utils';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 export default function FilterDropdown({
   fields,
@@ -146,7 +147,7 @@ export default function FilterDropdown({
           minimal={true}
           intent={Intent.PRIMARY}
           onClick={onClickNewFilter}>
-          + New Conditional
+      <T id={'new_conditional'}/>
         </Button>
       </div>
     </div>

client/src/config/sidebarMenu.js

@@ -1,16 +1,16 @@
 export default [
   {
-    divider: true
+    divider: true,
   },
   {
     icon: 'homepage',
     iconSize: 20,
     text: 'Homepage',
     disabled: false,
-    href: '/dashboard/homepage'
+    href: '/dashboard/homepage',
   },
   {
-    divider: true
+    divider: true,
   },
   {
     icon: 'homepage',
@@ -19,20 +19,20 @@ export default [
     children: [
       {
         text: 'Items List',
-        href: '/dashboard/items'
+        href: '/dashboard/items',
       },
       {
         text: 'New Item',
-        href: '/dashboard/items/new'
+        href: '/dashboard/items/new',
       },
       {
         text: 'Category List',
-        href: '/dashboard/items/categories'
+        href: '/dashboard/items/categories',
       },
-    ]
+    ],
   },
   {
-    divider: true
+    divider: true,
   },
   {
     icon: 'balance-scale',
@@ -41,29 +41,33 @@ export default [
     children: [
       {
         text: 'Accounts Chart',
-        href: '/dashboard/accounts'
+        href: '/dashboard/accounts',
       },
       {
         text: 'Manual Journal',
-        href: '/dashboard/accounting/manual-journals'
+        href: '/dashboard/accounting/manual-journals',
       },
       {
         text: 'Make Journal',
-        href: '/dashboard/accounting/make-journal-entry'
+        href: '/dashboard/accounting/make-journal-entry',
       },
-    ]
+      {
+        text: 'Exchange Rate',
+        href: '/dashboard/ExchangeRates',
+      },
+    ],
   },
   {
     icon: 'university',
     iconSize: 20,
     text: 'Banking',
-    children: []
+    children: [],
   },
   {
     icon: 'shopping-cart',
     iconSize: 20,
     text: 'Sales',
-    children: []
+    children: [],
   },
   {
     icon: 'balance-scale',
@@ -74,9 +78,9 @@ export default [
         icon: 'cut',
         text: 'cut',
         label: '⌘C',
-        disabled: false
+        disabled: false,
-      }
+      },
-    ]
+    ],
   },
   {
     icon: 'analytics',
@@ -85,25 +89,25 @@ export default [
     children: [
       {
         text: 'Balance Sheet',
-        href: '/dashboard/accounting/balance-sheet'
+        href: '/dashboard/accounting/balance-sheet',
       },
       {
         text: 'Trial Balance Sheet',
-        href: '/dashboard/accounting/trial-balance-sheet'
+        href: '/dashboard/accounting/trial-balance-sheet',
       },
       {
         text: 'Journal',
-        href: '/dashboard/accounting/journal-sheet'
+        href: '/dashboard/accounting/journal-sheet',
       },
       {
         text: 'General Ledger',
-        href: '/dashboard/accounting/general-ledger'
+        href: '/dashboard/accounting/general-ledger',
       },
       {
         text: 'Profit Loss Sheet',
-        href: '/dashboard/accounting/profit-loss-sheet'
+        href: '/dashboard/accounting/profit-loss-sheet',
-      }
+      },
-    ]
+    ],
   },
   {
     text: 'Expenses',
@@ -112,23 +116,23 @@ export default [
     children: [
       {
         text: 'Expenses List',
-        href: '/dashboard/expenses'
+        href: '/dashboard/expenses',
       },
       {
         text: 'New Expenses',
-        href: '/dashboard/expenses/new'
+        href: '/dashboard/expenses/new',
-      }
+      },
-    ]
+    ],
   },
   {
-    divider: true
+    divider: true,
   },
   {
     text: 'Preferences',
-    href: '/dashboard/preferences'
+    href: '/dashboard/preferences',
   },
   {
     text: 'Auditing System',
-    href: '/dashboard/auditing/list'
+    href: '/dashboard/auditing/list',
-  }
+  },
 ];

client/src/connectors/ExchangeRatesFromDialog.connect.js

@@ -0,0 +1,31 @@
+import { connect } from 'react-redux';
+import { compose } from 'utils';
+import DialogConnect from 'connectors/Dialog.connector';
+import DialogReduxConnect from 'components/DialogReduxConnect';
+import withExchangeRatesActions from 'containers/FinancialStatements/ExchangeRates/withExchangeRatesActions';
+import withExchangeRates from 'containers/FinancialStatements/ExchangeRates/withExchangeRates';
+import { getDialogPayload } from 'store/dashboard/dashboard.reducer';
+import CurrencyFromDialogConnect from 'connectors/CurrencyFromDialog.connect';
+
+export const mapStateToProps = (state, props) => {
+  const dialogPayload = getDialogPayload(state, 'exchangeRate-form');
+
+  return {
+    exchangeRatesList: Object.values(state.exchangeRates.exchangeRates),
+    name: 'exchangeRate-form',
+    payload: { action: 'new', id: null, ...dialogPayload },
+    editExchangeRate:
+      dialogPayload && dialogPayload.action === 'edit'
+        ? state.exchangeRates.exchangeRates[dialogPayload.id]
+        : {},
+  };
+};
+const ExchangeRatesDialogConnect = connect(mapStateToProps);
+export default compose(
+  CurrencyFromDialogConnect,
+  ExchangeRatesDialogConnect,
+  withExchangeRatesActions,
+  withExchangeRates,
+  DialogReduxConnect,
+  DialogConnect
+);

client/src/containers/Accounting/MakeJournalEntriesFooter.js

@@ -1,9 +1,6 @@
 import React, { useMemo } from 'react';
-import {
+import { Intent, Button } from '@blueprintjs/core';
-  Intent,
+import { FormattedMessage as T, useIntl } from 'react-intl';
-  Button,
-} from '@blueprintjs/core';
-import { FormattedList } from 'react-intl';
 
 export default function MakeJournalEntriesFooter({
   formik: { isSubmitting },
@@ -12,15 +9,16 @@ export default function MakeJournalEntriesFooter({
 }) {
   return (
     <div>
-      <div class="form__floating-footer">
+      <div class='form__floating-footer'>
         <Button
           disabled={isSubmitting}
           intent={Intent.PRIMARY}
           name={'save'}
           onClick={() => {
             onSubmitClick({ publish: true, redirect: true });
-          }}>
+          }}
-          Save
+        >
+          <T id={'save'} />
         </Button>
 
         <Button
@@ -30,8 +28,9 @@ export default function MakeJournalEntriesFooter({
           name={'save_and_new'}
           onClick={() => {
             onSubmitClick({ publish: true, redirect: false });
-          }}>
+          }}
-          Save & New
+        >
+          <T id={'save_new'} />
         </Button>
 
         <Button
@@ -39,16 +38,18 @@ export default function MakeJournalEntriesFooter({
           className={'button-secondary ml1'}
           onClick={() => {
             onSubmitClick({ publish: false, redirect: false });
-          }}>
+          }}
-          Save as Draft
+        >
+          <T id={'save_as_draft'} />
         </Button>
 
         <Button
           className={'button-secondary ml1'}
           onClick={() => {
             onCancelClick && onCancelClick();
-          }}>
+          }}
-          Cancel
+        >
+          <T id={'cancel'}/>
         </Button>
       </div>
     </div>

client/src/containers/Accounting/MakeJournalEntriesHeader.js

@@ -6,7 +6,7 @@ import {
   Position,
 } from '@blueprintjs/core';
 import {DateInput} from '@blueprintjs/datetime';
-import {useIntl} from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import {Row, Col} from 'react-grid-system';
 import moment from 'moment';
 import {momentFormatter} from 'utils';
@@ -17,7 +17,7 @@ import ErrorMessage from 'components/ErrorMessage';
 export default function MakeJournalEntriesHeader({
   formik: { errors, touched, setFieldValue, getFieldProps }
 }) {
-  const intl = useIntl();
+  const {formatMessage} = useIntl();
  
   const handleDateChange = useCallback((date) => {
     const formatted = moment(date).format('YYYY-MM-DD');
@@ -32,7 +32,7 @@ export default function MakeJournalEntriesHeader({
       <Row>
         <Col sm={3}>
           <FormGroup
-            label={'Journal number'}
+            label={<T id={'journal_number'}/>}
             labelInfo={infoIcon}
             className={'form-group--journal-number'}
             intent={(errors.journal_number && touched.journal_number) && Intent.DANGER}
@@ -48,7 +48,7 @@ export default function MakeJournalEntriesHeader({
 
         <Col sm={2}>
           <FormGroup
-            label={intl.formatMessage({'id': 'date'})}
+          label={<T id={'date'}/>}
             intent={(errors.date && touched.date) && Intent.DANGER}
             helperText={<ErrorMessage name="date" {...{errors, touched}} />}
             minimal={true}>
@@ -63,7 +63,7 @@ export default function MakeJournalEntriesHeader({
 
         <Col sm={4}>
           <FormGroup
-            label={intl.formatMessage({'id': 'description'})}
+            label={<T id={'description'}/>}
             className={'form-group--description'}
             intent={(errors.name && touched.name) && Intent.DANGER}
             helperText={<ErrorMessage name="description" {...{errors, touched}} />}
@@ -80,7 +80,7 @@ export default function MakeJournalEntriesHeader({
       <Row>
         <Col sm={3}>
           <FormGroup
-            label={'Reference'}
+            label={<T id={'reference'}/>}
             labelInfo={infoIcon}
             className={'form-group--reference'}
             intent={(errors.reference && touched.reference) && Intent.DANGER}

client/src/containers/Accounting/MakeJournalEntriesTable.js

@@ -1,8 +1,5 @@
 import React, { useState, useMemo, useEffect, useCallback } from 'react';
-import {
+import { Button, Intent } from '@blueprintjs/core';
-  Button,
-  Intent,
-} from '@blueprintjs/core';
 import DataTable from 'components/DataTable';
 import Icon from 'components/Icon';
 import { compose, formattedAmount } from 'utils';
@@ -14,7 +11,7 @@ import {
 import { omit } from 'lodash';
 
 import withAccounts from 'containers/Accounts/withAccounts';
-
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 // Actions cell renderer.
 const ActionsCellRenderer = ({
@@ -24,7 +21,7 @@ const ActionsCellRenderer = ({
   data,
   payload,
 }) => {
-  if (data.length <= (index + 2)) {
+  if (data.length <= index + 2) {
     return '';
   }
   const onClickRemoveRole = () => {
@@ -33,26 +30,27 @@ const ActionsCellRenderer = ({
 
   return (
     <Button
-      icon={<Icon icon="times-circle" iconSize={14} />}
+      icon={<Icon icon='times-circle' iconSize={14} />}
       iconSize={14}
-      className="ml2"
+      className='ml2'
       minimal={true}
       intent={Intent.DANGER}
-      onClick={onClickRemoveRole} />
+      onClick={onClickRemoveRole}
+    />
   );
 };
 
 // Total text cell renderer.
 const TotalAccountCellRenderer = (chainedComponent) => (props) => {
-  if (props.data.length === (props.row.index + 2)) {
+  if (props.data.length === props.row.index + 2) {
-    return (<span>{ 'Total USD' }</span>);
+    return <span>{'Total USD'}</span>;
   }
   return chainedComponent(props);
 };
 
 // Total credit/debit cell renderer.
 const TotalCreditDebitCellRenderer = (chainedComponent, type) => (props) => {
-  if (props.data.length === (props.row.index + 2)) {
+  if (props.data.length === props.row.index + 2) {
     const total = props.data.reduce((total, entry) => {
       const amount = parseInt(entry[type], 10);
       const computed = amount ? total + amount : total;
@@ -60,19 +58,18 @@ const TotalCreditDebitCellRenderer = (chainedComponent, type) => (props) => {
       return computed;
     }, 0);
 
-    return (<span>{ formattedAmount(total, 'USD') }</span>);
+    return <span>{formattedAmount(total, 'USD')}</span>;
   }
   return chainedComponent(props);
 };
 
 const NoteCellRenderer = (chainedComponent) => (props) => {
-  if (props.data.length === (props.row.index + 2)) {
+  if (props.data.length === props.row.index + 2) {
     return '';
   }
   return chainedComponent(props);
 };
 
-
 /**
  * Make journal entries table component.
  */
@@ -85,17 +82,18 @@ function MakeJournalEntriesTable({
   initialValues,
 }) {
   const [rows, setRow] = useState([]);
-
+  const { formatMessage } = useIntl();
   useEffect(() => {
     setRow([
       ...initialValues.entries.map((e) => ({ ...e, rowType: 'editor' })),
       defaultRow,
       defaultRow,
-    ])
+    ]);
-  }, [initialValues, defaultRow])
+  }, [initialValues, defaultRow]);
 
   // Handles update datatable data.
-  const handleUpdateData = useCallback((rowIndex, columnId, value) => {
+  const handleUpdateData = useCallback(
+    (rowIndex, columnId, value) => {
       const newRows = rows.map((row, index) => {
         if (index === rowIndex) {
           return { ...rows[rowIndex], [columnId]: value };
@@ -103,98 +101,109 @@ function MakeJournalEntriesTable({
         return { ...row };
       });
       setRow(newRows);
-    setFieldValue('entries', newRows.map(row => ({
+      setFieldValue(
+        'entries',
+        newRows.map((row) => ({
           ...omit(row, ['rowType']),
-    })));
+        }))
-  }, [rows, setFieldValue]);
+      );
+    },
+    [rows, setFieldValue]
+  );
 
   // Handles click remove datatable row.
-  const handleRemoveRow = useCallback((rowIndex) => {
+  const handleRemoveRow = useCallback(
+    (rowIndex) => {
       const removeIndex = parseInt(rowIndex, 10);
       const newRows = rows.filter((row, index) => index !== removeIndex);
 
       setRow([...newRows]);
-    setFieldValue('entries', newRows
+      setFieldValue(
-      .filter(row => row.rowType === 'editor')
+        'entries',
-      .map(row => ({ ...omit(row, ['rowType']) })
+        newRows
-    ));
+          .filter((row) => row.rowType === 'editor')
+          .map((row) => ({ ...omit(row, ['rowType']) }))
+      );
       onClickRemoveRow && onClickRemoveRow(removeIndex);
-  }, [rows, setFieldValue, onClickRemoveRow]);
+    },
+    [rows, setFieldValue, onClickRemoveRow]
+  );
 
   // Memorized data table columns.
-  const columns = useMemo(() => [
+  const columns = useMemo(
+    () => [
       {
         Header: '#',
         accessor: 'index',
-      Cell: ({ row: {index} }) => (
+        Cell: ({ row: { index } }) => <span>{index + 1}</span>,
-        <span>{ index + 1 }</span>
+        className: 'index',
-      ),
-      className: "index",
         width: 40,
         disableResizing: true,
         disableSortBy: true,
       },
       {
-      Header: 'Account',
+        Header: formatMessage({ id: 'account' }),
         id: 'account_id',
         accessor: 'account_id',
         Cell: TotalAccountCellRenderer(AccountsListFieldCell),
-      className: "account",
+        className: 'account',
         disableSortBy: true,
         disableResizing: true,
         width: 250,
       },
       {
-      Header: 'Credit (USD)',
+        Header: formatMessage({ id: 'credit_usd' }),
         accessor: 'credit',
         Cell: TotalCreditDebitCellRenderer(MoneyFieldCell, 'credit'),
-      className: "credit",
+        className: 'credit',
         disableSortBy: true,
         disableResizing: true,
         width: 150,
       },
       {
-      Header: 'Debit (USD)',
+        Header: formatMessage({ id: 'debit_usd' }),
         accessor: 'debit',
         Cell: TotalCreditDebitCellRenderer(MoneyFieldCell, 'debit'),
-      className: "debit",
+        className: 'debit',
         disableSortBy: true,
         disableResizing: true,
         width: 150,
       },
       {
-      Header: 'Note', 
+        Header: formatMessage({ id: 'note' }),
         accessor: 'note',
         Cell: NoteCellRenderer(InputGroupCell),
         disableSortBy: true,
-      className: "note",
+        className: 'note',
       },
       {
         Header: '',
         accessor: 'action',
         Cell: ActionsCellRenderer,
-      className: "actions",
+        className: 'actions',
         disableSortBy: true,
         disableResizing: true,
         width: 45,
-    }
+      },
-  ], []);
+    ],
+    []
+  );
 
   // Handles click new line.
   const onClickNewRow = useCallback(() => {
-    setRow([
+    setRow([...rows, { ...defaultRow, rowType: 'editor' }]);
-      ...rows,
-      { ...defaultRow, rowType: 'editor' },
-    ]);
     onClickAddNewRow && onClickAddNewRow();
   }, [defaultRow, rows, onClickAddNewRow]);
 
-  const rowClassNames = useCallback((row) => ({
+  const rowClassNames = useCallback(
-    'row--total': rows.length === (row.index + 2),
+    (row) => ({
-  }), [rows]);
+      'row--total': rows.length === row.index + 2,
+    }),
+    [rows]
+  );
 
   return (
-    <div class="make-journal-entries__table">
+    <div class='make-journal-entries__table'>
       <DataTable
         columns={columns}
         data={rows}
@@ -204,27 +213,28 @@ function MakeJournalEntriesTable({
           errors: errors.entries || [],
           updateData: handleUpdateData,
           removeRow: handleRemoveRow,
-        }}/>
+        }}
+      />
 
-      <div class="mt1">
+      <div class='mt1'>
         <Button
           small={true}
           className={'button--secondary button--new-line'}
-          onClick={onClickNewRow}>
+          onClick={onClickNewRow}
-          New lines
+        >
+          <T id={'new_lines'} />
         </Button>
 
         <Button
           small={true}
           className={'button--secondary button--clear-lines ml1'}
-          onClick={onClickNewRow}>
+          onClick={onClickNewRow}
-          Clear all lines
+        >
+          <T id={'clear_all_lines'} />
         </Button>
       </div>
     </div>
   );
 }
 
-export default compose(
+export default compose(withAccounts)(MakeJournalEntriesTable);
-  withAccounts,
-)(MakeJournalEntriesTable);

client/src/containers/Accounting/ManualJournalActionsBar.js

@@ -23,6 +23,7 @@ import withResourceDetail from 'containers/Resources/withResourceDetails';
 import withManualJournals from 'containers/Accounting/withManualJournals';
 import withManualJournalsActions from 'containers/Accounting/withManualJournalsActions';
 
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 function ManualJournalActionsBar({
   resourceName = 'manual_journal',
@@ -37,6 +38,7 @@ function ManualJournalActionsBar({
 }) {
   const { path } = useRouteMatch();
   const history = useHistory();
+  const {formatMessage} = useIntl();
 
   const viewsMenuItems = manualJournalsViews.map(view => {
     return (
@@ -76,7 +78,7 @@ function ManualJournalActionsBar({
           <Button
             className={classNames(Classes.MINIMAL, 'button--table-views')}
             icon={<Icon icon='table' />}
-            text='Table Views'
+            text={<T id={'table_views'}/>}
             rightIcon={'caret-down'}
           />
         </Popover>
@@ -84,7 +86,7 @@ function ManualJournalActionsBar({
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon='plus' />}
-          text='New Journal'
+          text={<T id={'new_journal'}/>}
           onClick={onClickNewManualJournal}
         />
         <Popover
@@ -103,7 +105,7 @@ function ManualJournalActionsBar({
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon='trash' iconSize={15} />}
-            text='Delete'
+            text={<T id={'delete'}/>}
             intent={Intent.DANGER}
             onClick={handleBulkDelete}
           />
@@ -111,12 +113,12 @@ function ManualJournalActionsBar({
         <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/Accounting/ManualJournalsDataTable.js

@@ -24,7 +24,7 @@ import withDashboardActions from 'containers/Dashboard/withDashboard';
 import withViewDetails from 'containers/Views/withViewDetails';
 import withManualJournals from 'containers/Accounting/withManualJournals';
 import withManualJournalsActions from 'containers/Accounting/withManualJournalsActions';
-
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 function ManualJournalsDataTable({
   loading,
@@ -47,7 +47,7 @@ function ManualJournalsDataTable({
 }) {
   const { custom_view_id: customViewId } = useParams();
   const [initialMount, setInitialMount] = useState(false);
-
+  const { formatMessage } = useIntl();
   useUpdateEffect(() => {
     if (!manualJournalsLoading) {
       setInitialMount(true);
@@ -68,63 +68,76 @@ function ManualJournalsDataTable({
     viewMeta,
   ]);
 
-  const handlePublishJournal = useCallback((journal) => () => {
+  const handlePublishJournal = useCallback(
+    (journal) => () => {
       onPublishJournal && onPublishJournal(journal);
-  }, [onPublishJournal]);
+    },
+    [onPublishJournal]
+  );
 
-  const handleEditJournal = useCallback((journal) => () => {
+  const handleEditJournal = useCallback(
+    (journal) => () => {
       onEditJournal && onEditJournal(journal);
-  }, [onEditJournal]);
+    },
+    [onEditJournal]
+  );
 
-  const handleDeleteJournal = useCallback((journal) => () => {
+  const handleDeleteJournal = useCallback(
+    (journal) => () => {
       onDeleteJournal && onDeleteJournal(journal);
-  }, [onDeleteJournal]);
+    },
+    [onDeleteJournal]
+  );
 
   const actionMenuList = (journal) => (
     <Menu>
-      <MenuItem text='View Details' />
+      <MenuItem text={<T id={'view_details'} />} />
       <MenuDivider />
       {!journal.status && (
         <MenuItem
-          text="Publish Journal"
+          text={<T id={'publish_journal'} />}
-          onClick={handlePublishJournal(journal)} />
+          onClick={handlePublishJournal(journal)}
+        />
       )}
       <MenuItem
-        text='Edit Journal'
+        text={<T id={'edit_journal'} />}
-        onClick={handleEditJournal(journal)} />
+        onClick={handleEditJournal(journal)}
+      />
       <MenuItem
-        text='Delete Journal'
+        text={<T id={'delete_journal'} />}
         intent={Intent.DANGER}
-        onClick={handleDeleteJournal(journal)} />
+        onClick={handleDeleteJournal(journal)}
+      />
     </Menu>
   );
 
-  const columns = useMemo(() => [
+  const columns = useMemo(
+    () => [
       {
         id: 'date',
-      Header: 'Date',
+        Header: formatMessage({ id: 'date' }),
-      accessor: r => moment().format('YYYY-MM-DD'),
+        accessor: (r) => moment().format('YYYY-MM-DD'),
         disableResizing: true,
         width: 150,
         className: 'date',
       },
       {
         id: 'amount',
-      Header: 'Amount',
+        Header: formatMessage({ id: 'amount' }),
-      accessor: r => (<Money amount={r.amount} currency={'USD'} />),
+        accessor: (r) => <Money amount={r.amount} currency={'USD'} />,
         disableResizing: true,
         className: 'amount',
       },
       {
         id: 'journal_number',
-      Header: 'Journal No.',
+        Header: formatMessage({id:'journal_no'}),
         accessor: 'journal_number',
         disableResizing: true,
         className: 'journal_number',
       },
       {
         id: 'status',
-      Header: 'Status',
+        Header: formatMessage({id:'status'}),
         accessor: (r) => {
           return r.status ? 'Published' : 'Draft';
         },
@@ -134,8 +147,8 @@ function ManualJournalsDataTable({
       },
       {
         id: 'note',
-      Header: 'Note',
+        Header: formatMessage({id:'note'}),
-      accessor: r => (<Icon icon={'file-alt'} iconSize={16} />),
+        accessor: (r) => <Icon icon={'file-alt'} iconSize={16} />,
         disableResizing: true,
         disableSorting: true,
         width: 100,
@@ -143,15 +156,15 @@ function ManualJournalsDataTable({
       },
       {
         id: 'transaction_type',
-      Header: 'Transaction type ',
+        Header: formatMessage({id:'transaction_type'}),
         accessor: 'transaction_type',
         width: 100,
         className: 'transaction_type',
       },
       {
         id: 'created_at',
-      Header: 'Created At',
+        Header: formatMessage({id:'created_at'}),
-      accessor: r => moment().format('YYYY-MM-DD'),
+        accessor: (r) => moment().format('YYYY-MM-DD'),
         disableResizing: true,
         width: 150,
         className: 'created_at',
@@ -171,15 +184,24 @@ function ManualJournalsDataTable({
         width: 50,
         disableResizing: true,
       },
-  ], []);
+    ],
+    []
+  );
 
-  const handleDataTableFetchData = useCallback((...args) => {
+  const handleDataTableFetchData = useCallback(
+    (...args) => {
       onFetchData && onFetchData(...args);
-  }, [onFetchData]);
+    },
+    [onFetchData]
+  );
 
-  const handleSelectedRowsChange = useCallback((selectedRows) => {
+  const handleSelectedRowsChange = useCallback(
-    onSelectedRowsChange && onSelectedRowsChange(selectedRows.map(s => s.original));
+    (selectedRows) => {
-  }, [onSelectedRowsChange]);
+      onSelectedRowsChange &&
+        onSelectedRowsChange(selectedRows.map((s) => s.original));
+    },
+    [onSelectedRowsChange]
+  );
 
   return (
     <LoadingIndicator loading={loading} mount={false}>
@@ -203,5 +225,5 @@ export default compose(
   // withViewsActions,
   withManualJournalsActions,
   withManualJournals,
-  withViewDetails,
+  withViewDetails
 )(ManualJournalsDataTable);

client/src/containers/Accounting/ManualJournalsList.js

@@ -3,6 +3,7 @@ import { Route, Switch, useHistory } from 'react-router-dom';
 import { useQuery } from 'react-query';
 import { Alert, Intent } from '@blueprintjs/core';
 import AppToaster from 'components/AppToaster';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
@@ -17,7 +18,6 @@ import withViewsActions from 'containers/Views/withViewsActions';
 
 import { compose } from 'utils';
 
-
 /**
  * Manual journals table.
  */
@@ -43,16 +43,20 @@ function ManualJournalsTable({
   });
 
   const fetchManualJournals = useQuery('manual-journals-table', () =>
-    requestFetchManualJournalsTable());
+    requestFetchManualJournalsTable()
+  );
 
   useEffect(() => {
     changePageTitle('Manual Journals');
   }, [changePageTitle]);
 
   // Handle delete manual journal click.
-  const handleDeleteJournal = useCallback((journal) => {
+  const handleDeleteJournal = useCallback(
+    (journal) => {
       setDeleteManualJournal(journal);
-  }, [setDeleteManualJournal]);
+    },
+    [setDeleteManualJournal]
+  );
 
   // Handle cancel delete manual journal.
   const handleCancelManualJournalDelete = useCallback(() => {
@@ -67,29 +71,34 @@ function ManualJournalsTable({
     });
   }, [deleteManualJournal, requestDeleteManualJournal]);
 
-  const handleBulkDelete = useCallback((accountsIds) => {
+  const handleBulkDelete = useCallback(
+    (accountsIds) => {
       setBulkDelete(accountsIds);
-  }, [setBulkDelete]);
+    },
+    [setBulkDelete]
+  );
 
   const handleConfirmBulkDelete = useCallback(() => {
-    requestDeleteBulkManualJournals(bulkDelete).then(() => {
+    requestDeleteBulkManualJournals(bulkDelete)
+      .then(() => {
         setBulkDelete(false);
         AppToaster.show({ message: 'the_accounts_have_been_deleted' });
-    }).catch((error) => {
+      })
+      .catch((error) => {
         setBulkDelete(false);
       });
-  }, [
+  }, [requestDeleteBulkManualJournals, bulkDelete]);
-    requestDeleteBulkManualJournals,
-    bulkDelete,
-  ]);
 
   const handleCancelBulkDelete = useCallback(() => {
     setBulkDelete(false);
   }, []);
 
-  const handleEditJournal = useCallback((journal) => {
+  const handleEditJournal = useCallback(
+    (journal) => {
       history.push(`/dashboard/accounting/manual-journals/${journal.id}/edit`);
-  }, [history]);
+    },
+    [history]
+  );
 
   // Handle filter change to re-fetch data-table.
   const handleFilterChanged = useCallback(() => {
@@ -102,36 +111,49 @@ function ManualJournalsTable({
   }, [fetchManualJournals]);
 
   // Handle fetch data of manual jouranls datatable.
-  const handleFetchData = useCallback(({ pageIndex, pageSize, sortBy }) => {
+  const handleFetchData = useCallback(
+    ({ pageIndex, pageSize, sortBy }) => {
       addManualJournalsTableQueries({
-      ...(sortBy.length > 0) ? {
+        ...(sortBy.length > 0
+          ? {
               column_sort_by: sortBy[0].id,
               sort_order: sortBy[0].desc ? 'desc' : 'asc',
-      } : {},
+            }
+          : {}),
       });
-  }, [
+    },
-    addManualJournalsTableQueries,
+    [addManualJournalsTableQueries]
-  ]);
+  );
 
-  const handlePublishJournal = useCallback((journal) => {
+  const handlePublishJournal = useCallback(
+    (journal) => {
       requestPublishManualJournal(journal.id).then(() => {
-      AppToaster.show({ message: 'the_manual_journal_id_has_been_published' });
+        AppToaster.show({
-    })
+          message: 'the_manual_journal_id_has_been_published',
-  }, [requestPublishManualJournal]);
+        });
+      });
+    },
+    [requestPublishManualJournal]
+  );
 
   // Handle selected rows change.
-  const handleSelectedRowsChange = useCallback((accounts) => {
+  const handleSelectedRowsChange = useCallback(
+    (accounts) => {
       setSelectedRows(accounts);
-  }, [setSelectedRows]);
+    },
+    [setSelectedRows]
+  );
 
   return (
     <DashboardInsider
       loading={fetchViews.isFetching || fetchManualJournals.isFetching}
-      name={'manual-journals'}>
+      name={'manual-journals'}
+    >
       <ManualJournalsActionsBar
         onBulkDelete={handleBulkDelete}
         selectedRows={selectedRows}
-        onFilterChanged={handleFilterChanged} />
+        onFilterChanged={handleFilterChanged}
+      />
 
       <DashboardPageContent>
         <Switch>
@@ -140,9 +162,9 @@ function ManualJournalsTable({
             path={[
               '/dashboard/accounting/manual-journals/:custom_view_id/custom_view',
               '/dashboard/accounting/manual-journals',
-            ]}>
+            ]}
-            <ManualJournalsViewTabs
+          >
-              onViewChanged={handleViewChanged} />
+            <ManualJournalsViewTabs onViewChanged={handleViewChanged} />
           </Route>
         </Switch>
 
@@ -151,11 +173,12 @@ function ManualJournalsTable({
           onFetchData={handleFetchData}
           onEditJournal={handleEditJournal}
           onPublishJournal={handlePublishJournal}
-          onSelectedRowsChange={handleSelectedRowsChange} />
+          onSelectedRowsChange={handleSelectedRowsChange}
+        />
 
         <Alert
-          cancelButtonText='Cancel'
+          cancelButtonText={<T id={'cancel'} />}
-          confirmButtonText='Move to Trash'
+          confirmButtonText={<T id={'move_to_trash'} />}
           icon='trash'
           intent={Intent.DANGER}
           isOpen={deleteManualJournal}
@@ -169,8 +192,8 @@ function ManualJournalsTable({
         </Alert>
 
         <Alert
-          cancelButtonText='Cancel'
+          cancelButtonText={<T id={'cancel'} />}
-          confirmButtonText='Move to Trash'
+          confirmButtonText={<T id={'move_to_trash'} />}
           icon='trash'
           intent={Intent.DANGER}
           isOpen={bulkDelete}
@@ -190,5 +213,5 @@ function ManualJournalsTable({
 export default compose(
   withDashboardActions,
   withManualJournalsActions,
-  withViewsActions,
+  withViewsActions
 )(ManualJournalsTable);

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"
+          cancelButtonText={<T id={'cancel'}/>}
-          confirmButtonText="Inactivate"
+          confirmButtonText={<T id={'inactivate'}/>}
           icon="trash"
           intent={Intent.WARNING}
           isOpen={inactiveAccount}
@@ -239,8 +240,8 @@ function AccountsChart({
         </Alert>
 
         <Alert
-          cancelButtonText="Cancel"
+       cancelButtonText={<T id={'cancel'}/>}
-          confirmButtonText="Delete"
+          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/Authentication/InviteAccept.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
-import { useIntl } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import ErrorMessage from 'components/ErrorMessage';
 import AppToaster from 'components/AppToaster';
 import { compose } from 'utils';
@@ -15,27 +15,29 @@ import {
   Position,
   Spinner,
 } from '@blueprintjs/core';
+
 import Icon from 'components/Icon';
 import { Row, Col } from 'react-grid-system';
 import AuthInsider from 'containers/Authentication/AuthInsider';
 import { Link, useHistory } from 'react-router-dom';
 import useAsync from 'hooks/async';
+import { If } from 'components';
 
-
+function Invite({ requestInviteAccept, requestInviteMetaByToken }) {
-function Invite({
+  const { formatMessage } = useIntl();
-  requestInviteAccept,
-  requestInviteMetaByToken,
-}) {
-  const intl = useIntl();
   const { token } = useParams();
   const history = useHistory();
   const [shown, setShown] = useState(false);
-  const passwordRevealer = useCallback(() => { setShown(!shown); }, [shown]);
+  const passwordRevealer = useCallback(() => {
+    setShown(!shown);
+  }, [shown]);
 
   const ValidationSchema = Yup.object().shape({
-    first_name: Yup.string().required(),
+    first_name: Yup.string().required(formatMessage({ id: 'required' })),
-    last_name: Yup.string().required(),
+    last_name: Yup.string().required(formatMessage({ id: 'required' })),
-    phone_number: Yup.string().matches().required(),
+    phone_number: Yup.string()
+      .matches()
+      .required(formatMessage({ id: 'required' })),
     password: Yup.string()
       .min(4, 'Password has to be longer than 4 characters!')
       .required('Password is required!'),
@@ -49,11 +51,10 @@ function Invite({
   const inviteValue = {
     organization_name: '',
     invited_email: '',
-    ...inviteMeta.value ? 
+    ...(inviteMeta.value ? inviteMeta.value.data.data : {}),
-      inviteMeta.value.data.data : {},
   };
 
-  if (inviteErrors.find(e => e.type === 'INVITE.TOKEN.NOT.FOUND')) {
+  if (inviteErrors.find((e) => e.type === 'INVITE.TOKEN.NOT.FOUND')) {
     AppToaster.show({
       message: 'An unexpected error occurred',
       intent: Intent.DANGER,
@@ -62,12 +63,15 @@ function Invite({
     history.push('/auth/login');
   }
 
-  const initialValues = useMemo(() => ({
+  const initialValues = useMemo(
+    () => ({
       first_name: '',
       last_name: '',
       phone_number: '',
       password: '',
-  }), []);
+    }),
+    []
+  );
 
   const {
     values,
@@ -95,15 +99,15 @@ function Invite({
         .catch((errors) => {
           if (errors.find((e) => e.type === 'INVITE.TOKEN.NOT.FOUND')) {
             AppToaster.show({
-              message: 'An unexpected error occurred',
+              message: formatMessage({ id: 'an_unexpected_error_occurred' }),
               intent: Intent.DANGER,
               position: Position.BOTTOM,
             });
             history.push('/auth/login');
           }
-          if (errors.find(e => e.type === 'PHONE_MUMNER.ALREADY.EXISTS')){
+          if (errors.find((e) => e.type === 'PHONE_MUMNER.ALREADY.EXISTS')) {
             setErrors({
-              phone_number: 'This phone number is used in another account.'
+              phone_number: 'This phone number is used in another account.',
             });
           }
           setSubmitting(false);
@@ -111,23 +115,40 @@ function Invite({
     },
   });
 
-  const passwordRevealerTmp = useMemo(() => (
+  const passwordRevealerTmp = useMemo(
-    <span class="password-revealer" onClick={() => passwordRevealer()}>
+    () => (
-      {(shown) ? (
+      <span class='password-revealer' onClick={() => passwordRevealer()}>
-        <><Icon icon='eye-slash' /> <span class="text">Hide</span></>
+        <If condition={shown}>
-      ) : (
+          <>
-        <><Icon icon='eye' /> <span class="text">Show</span></>
+            <Icon icon='eye-slash' />{' '}
-      )} 
+            <span class='text'>
-    </span>), [shown, passwordRevealer]);
+              <T id={'hide'} />
+            </span>
+          </>
+        </If>
+        <If condition={!shown}>
+          <>
+            <Icon icon='eye' />{' '}
+            <span class='text'>
+              <T id={'show'} />
+            </span>
+          </>
+        </If>
+      </span>
+    ),
+    [shown, passwordRevealer]
+  );
 
   return (
     <AuthInsider>
       <div className={'invite-form'}>
         <div className={'authentication-page__label-section'}>
-          <h3>Welcome to Bigcapital</h3>
+          <h3>
+            <T id={'welcome_to_bigcapital'} />
+          </h3>
           <p>
-            Enter your personal information <b>{ inviteValue.organization_name }</b>{' '}
+            <T id={'enter_your_personal_information'} />
-            Organization.
+            <b>{inviteValue.organization_name}</b> Organization.
           </p>
         </div>
 
@@ -135,30 +156,37 @@ function Invite({
           <Row>
             <Col md={6}>
               <FormGroup
-                label={'First Name'}
+                label={<T id={'First Name'} />}
                 className={'form-group--first_name'}
-                intent={(errors.first_name && touched.first_name) && Intent.DANGER}
+                intent={
-                helperText={<ErrorMessage name={'first_name'} {...{errors, touched}} />}
+                  errors.first_name && touched.first_name && Intent.DANGER
+                }
+                helperText={
+                  <ErrorMessage name={'first_name'} {...{ errors, touched }} />
+                }
               >
                 <InputGroup
-                  intent={(errors.first_name && touched.first_name) &&
+                  intent={
-                    Intent.DANGER
+                    errors.first_name && touched.first_name && Intent.DANGER
                   }
-                  {...getFieldProps('first_name')} />
+                  {...getFieldProps('first_name')}
+                />
               </FormGroup>
             </Col>
 
             <Col md={6}>
               <FormGroup
-                label={'Last Name'}
+                label={<T id={'Last Name'} />}
                 className={'form-group--last_name'}
-                intent={(errors.last_name && touched.last_name) &&
+                intent={errors.last_name && touched.last_name && Intent.DANGER}
-                  Intent.DANGER
+                helperText={
+                  <ErrorMessage name={'last_name'} {...{ errors, touched }} />
                 }
-                helperText={<ErrorMessage name={'last_name'} {...{errors, touched}} />}
               >
                 <InputGroup
-                  intent={(errors.last_name && touched.last_name) && Intent.DANGER}
+                  intent={
+                    errors.last_name && touched.last_name && Intent.DANGER
+                  }
                   {...getFieldProps('last_name')}
                 />
               </FormGroup>
@@ -166,40 +194,56 @@ function Invite({
           </Row>
 
           <FormGroup
-            label={'Phone Number'}
+            label={<T id={'Phone Number'} />}
             className={'form-group--phone_number'}
-            intent={(errors.phone_number && touched.phone_number) && Intent.DANGER}
+            intent={
-            helperText={<ErrorMessage name={'phone_number'} {...{errors, touched}} />}
+              errors.phone_number && touched.phone_number && Intent.DANGER
+            }
+            helperText={
+              <ErrorMessage name={'phone_number'} {...{ errors, touched }} />
+            }
           >
             <InputGroup
-              intent={(errors.phone_number && touched.phone_number) && Intent.DANGER}
+              intent={
+                errors.phone_number && touched.phone_number && Intent.DANGER
+              }
               {...getFieldProps('phone_number')}
             />
           </FormGroup>
 
           <FormGroup
-            label={'Password'}
+            label={<T id={'password'} />}
             labelInfo={passwordRevealerTmp}
             className={'form-group--password has-password-revealer'}
-            intent={(errors.password && touched.password) && Intent.DANGER}
+            intent={errors.password && touched.password && Intent.DANGER}
-            helperText={<ErrorMessage name={'password'} {...{errors, touched}} />}
+            helperText={
+              <ErrorMessage name={'password'} {...{ errors, touched }} />
+            }
           >
             <InputGroup
               lang={true}
               type={shown ? 'text' : 'password'}
-              intent={(errors.password && touched.password) && Intent.DANGER}
+              intent={errors.password && touched.password && Intent.DANGER}
               {...getFieldProps('password')}
             />
           </FormGroup>
 
           <div className={'invite-form__statement-section'}>
             <p>
-              You email address is <b>{ inviteValue.invited_email },</b> <br />
+              <T id={'You email address is'} />{' '}
-              You will use this address to sign in to Bigcapital.
+              <b>{inviteValue.invited_email},</b> <br />
+              <T id={'you_will_use_this_address_to_sign_in_to_bigcapital'} />
             </p>
             <p>
-              By signing in or creating an account, you agree with our <br />
+              <T id={'signing_in_or_creating'} /> <br />
-              <Link>Terms & Conditions</Link> and <Link> Privacy Statement</Link>
+              <Link>
+                <T id={'terms_conditions'} />
+              </Link>{' '}
+              <T id={'and'} />
+              <Link>
+                {' '}
+                <T id={'privacy_statement'} />
+              </Link>
             </p>
           </div>
 
@@ -210,13 +254,13 @@ function Invite({
               fill={true}
               loading={isSubmitting}
             >
-              Create Account
+              <T id={'create_account'} />
             </Button>
           </div>
         </form>
 
         {inviteMeta.pending && (
-          <div class="authentication-page__loading-overlay">
+          <div class='authentication-page__loading-overlay'>
             <Spinner size={40} />
           </div>
         )}
@@ -225,6 +269,4 @@ function Invite({
   );
 }
 
-export default compose(
+export default compose(withAuthenticationActions)(Invite);
-  withAuthenticationActions,
-)(Invite);

client/src/containers/Authentication/Login.js

@@ -69,7 +69,7 @@ function Login({
         const toastBuilders = [];
         if (errors.find((e) => e.type === ERRORS_TYPES.INVALID_DETAILS)) {
           toastBuilders.push({
-            message: formatMessage('email_and_password_entered_did_not_match'),
+            message: formatMessage({id:'email_and_password_entered_did_not_match'}),
             intent: Intent.DANGER,
           });
         }
@@ -102,7 +102,7 @@ function Login({
       <div className='login-form'>
         <div className={'authentication-page__label-section'}>
           <h3><T id={'log_in'} /></h3>
-          <T id={'need_bigcapital_account?'} />
+          <T id={'need_bigcapital_account'} />
           <Link to='/auth/register'> <T id={'create_an_account'} /></Link>
         </div>
 

client/src/containers/Authentication/Register.js

@@ -1,13 +1,14 @@
 import React, { useMemo, useState, useCallback } from 'react';
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
-import { useIntl } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
 import {
   Button,
   InputGroup,
   Intent,
   FormGroup,
-  Spinner
+  Spinner,
 } from '@blueprintjs/core';
 import { Row, Col } from 'react-grid-system';
 import { Link, useHistory } from 'react-router-dom';
@@ -19,35 +20,40 @@ import { compose } from 'utils';
 import Icon from 'components/Icon';
 import { If } from 'components';
 
-function Register({
+function Register({ requestRegister }) {
-  requestRegister,
+  const { formatMessage } = useIntl();
-}) {
-  const intl = useIntl();
   const history = useHistory();
   const [shown, setShown] = useState(false);
-  const passwordRevealer = useCallback(() => { setShown(!shown); }, [shown]);
+  const passwordRevealer = useCallback(() => {
+    setShown(!shown);
+  }, [shown]);
 
   const ValidationSchema = Yup.object().shape({
-    organization_name: Yup.string().required(),
+    organization_name: Yup.string().required(formatMessage({ id: 'required' })),
-    first_name: Yup.string().required(),
+    first_name: Yup.string().required(formatMessage({ id: 'required' })),
-    last_name: Yup.string().required(),
+    last_name: Yup.string().required(formatMessage({ id: 'required' })),
-    email: Yup.string().email().required(),
+    email: Yup.string()
+      .email()
+      .required(formatMessage({ id: 'required' })),
     phone_number: Yup.string()
       .matches()
-      .required(intl.formatMessage({ id: 'required' })),
+      .required(formatMessage({ id: 'required' })),
     password: Yup.string()
       .min(4, 'Password has to be longer than 8 characters!')
       .required('Password is required!'),
   });
 
-  const initialValues = useMemo(() => ({
+  const initialValues = useMemo(
+    () => ({
       organization_name: '',
       first_name: '',
       last_name: '',
       email: '',
       phone_number: '',
       password: '',
-  }), []);
+    }),
+    []
+  );
 
   const {
     errors,
@@ -62,26 +68,27 @@ function Register({
     validationSchema: ValidationSchema,
     initialValues: {
       ...initialValues,
-      country: 'libya'
+      country: 'libya',
     },
     onSubmit: (values, { setSubmitting, setErrors }) => {
       requestRegister(values)
         .then((response) => {
           AppToaster.show({
-            message: 'success',
+            message: formatMessage({ id: 'success' }),
           });
           setSubmitting(false);
           history.push('/auth/login');
         })
         .catch((errors) => {
-          if (errors.some(e => e.type === 'PHONE_NUMBER_EXISTS')) {
+          if (errors.some((e) => e.type === 'PHONE_NUMBER_EXISTS')) {
             setErrors({
-              phone_number: 'The phone number is already used in another account.'
+              phone_number:
+                'The phone number is already used in another account.',
             });
           }
-          if (errors.some(e => e.type === 'EMAIL_EXISTS')) {
+          if (errors.some((e) => e.type === 'EMAIL_EXISTS')) {
             setErrors({
-              email: 'The email is already used in another account.'
+              email: 'The email is already used in another account.',
             });
           }
           setSubmitting(false);
@@ -89,34 +96,66 @@ function Register({
     },
   });
 
-  const passwordRevealerTmp = useMemo(() => (
+  const passwordRevealerTmp = useMemo(
-    <span class="password-revealer" onClick={() => passwordRevealer()}>
+    () => (
-      {(shown) ? (
+      <span class='password-revealer' onClick={() => passwordRevealer()}>
-        <><Icon icon='eye-slash' /> <span class="text">Hide</span></>
+        <If condition={shown}>
-      ) : (
+          <>
-        <><Icon icon='eye' /> <span class="text">Show</span></>
+            <Icon icon='eye-slash' />{' '}
-      )} 
+            <span class='text'>
-    </span>), [shown, passwordRevealer]);
+              <T id={'hide'} />
+            </span>
+          </>
+        </If>
+        <If condition={!shown}>
+          <>
+            <Icon icon='eye' />{' '}
+            <span class='text'>
+              <T id={'show'} />
+            </span>
+          </>
+        </If>
+      </span>
+    ),
+    [shown, passwordRevealer]
+  );
 
   return (
     <AuthInsider>
       <div className={'register-form'}>
         <div className={'authentication-page__label-section'}>
           <h3>
-            Register a New <br />Organization.
+            <T id={'register_a_new_organization'} />
           </h3>
-          You have a bigcapital account ?<Link to='/auth/login'> Login</Link>
+          <T id={'you_have_a_bigcapital_account'} />
+          <Link to='/auth/login'>
+            {' '}
+            <T id={'login'} />
+          </Link>
         </div>
 
         <form onSubmit={handleSubmit} className={'authentication-page__form'}>
           <FormGroup
-            label={'Organization Name'}
+            label={<T id={'organization_name'} />}
             className={'form-group--name'}
-            intent={(errors.organization_name && touched.organization_name) && Intent.DANGER}
+            intent={
-            helperText={<ErrorMessage {...{errors, touched}} name={'organization_name'} />}
+              errors.organization_name &&
+              touched.organization_name &&
+              Intent.DANGER
+            }
+            helperText={
+              <ErrorMessage
+                {...{ errors, touched }}
+                name={'organization_name'}
+              />
+            }
           >
             <InputGroup
-              intent={(errors.organization_name && touched.organization_name) && Intent.DANGER}
+              intent={
+                errors.organization_name &&
+                touched.organization_name &&
+                Intent.DANGER
+              }
               {...getFieldProps('organization_name')}
             />
           </FormGroup>
@@ -124,13 +163,19 @@ function Register({
           <Row className={'name-section'}>
             <Col md={6}>
               <FormGroup
-                label={'First Name'}
+                label={<T id={'first_name'} />}
-                intent={(errors.first_name && touched.first_name) && Intent.DANGER}
+                intent={
-                helperText={<ErrorMessage name={'first_name'} {...{errors, touched}} />}
+                  errors.first_name && touched.first_name && Intent.DANGER
+                }
+                helperText={
+                  <ErrorMessage name={'first_name'} {...{ errors, touched }} />
+                }
                 className={'form-group--first-name'}
               >
                 <InputGroup
-                  intent={(errors.first_name && touched.first_name) && Intent.DANGER}
+                  intent={
+                    errors.first_name && touched.first_name && Intent.DANGER
+                  }
                   {...getFieldProps('first_name')}
                 />
               </FormGroup>
@@ -138,13 +183,17 @@ function Register({
 
             <Col md={6}>
               <FormGroup
-                label={'Last Name'}
+                label={<T id={'last_name'} />}
-                intent={(errors.last_name && touched.last_name) && Intent.DANGER}
+                intent={errors.last_name && touched.last_name && Intent.DANGER}
-                helperText={<ErrorMessage name={'last_name'} {...{errors, touched}} />}
+                helperText={
+                  <ErrorMessage name={'last_name'} {...{ errors, touched }} />
+                }
                 className={'form-group--last-name'}
               >
                 <InputGroup
-                  intent={(errors.last_name && touched.last_name) && Intent.DANGER}
+                  intent={
+                    errors.last_name && touched.last_name && Intent.DANGER
+                  }
                   {...getFieldProps('last_name')}
                 />
               </FormGroup>
@@ -152,51 +201,65 @@ function Register({
           </Row>
 
           <FormGroup
-            label={'Phone Number'}
+            label={<T id={'phone_number'} />}
-            intent={(errors.phone_number && touched.phone_number) && Intent.DANGER}
+            intent={
-            helperText={<ErrorMessage name={'phone_number'} {...{errors, touched}} />}
+              errors.phone_number && touched.phone_number && Intent.DANGER
+            }
+            helperText={
+              <ErrorMessage name={'phone_number'} {...{ errors, touched }} />
+            }
             className={'form-group--phone-number'}
           >
             <InputGroup
               intent={
-                (errors.phone_number && touched.phone_number) &&
+                errors.phone_number && touched.phone_number && Intent.DANGER
-                Intent.DANGER
               }
               {...getFieldProps('phone_number')}
             />
           </FormGroup>
 
           <FormGroup
-            label={'Email'}
+            label={<T id={'email'} />}
-            intent={(errors.email && touched.email) && Intent.DANGER}
+            intent={errors.email && touched.email && Intent.DANGER}
-            helperText={<ErrorMessage name={'email'} {...{errors, touched}} />}
+            helperText={
+              <ErrorMessage name={'email'} {...{ errors, touched }} />
+            }
             className={'form-group--email'}
           >
             <InputGroup
-              intent={(errors.email && touched.email) && Intent.DANGER}
+              intent={errors.email && touched.email && Intent.DANGER}
               {...getFieldProps('email')}
             />
           </FormGroup>
 
           <FormGroup
-            label={'Password'}
+            label={<T id={'password'} />}
             labelInfo={passwordRevealerTmp}
-            intent={(errors.password && touched.password) && Intent.DANGER}
+            intent={errors.password && touched.password && Intent.DANGER}
-            helperText={<ErrorMessage name={'password'} {...{errors, touched}} />}
+            helperText={
+              <ErrorMessage name={'password'} {...{ errors, touched }} />
+            }
             className={'form-group--password has-password-revealer'}
           >
             <InputGroup
               lang={true}
               type={shown ? 'text' : 'password'}
-              intent={(errors.password && touched.password) && Intent.DANGER}
+              intent={errors.password && touched.password && Intent.DANGER}
               {...getFieldProps('password')}
             />
           </FormGroup>
 
           <div className={'register-form__agreement-section'}>
           <p>
-              By signing in or creating an account, you agree with our <br />
+              <T id={'signing_in_or_creating'} /> <br />
-              <Link>Terms & Conditions</Link> and <Link> Privacy Statement</Link>
+              <Link>
+                <T id={'terms_conditions'} />
+              </Link>{' '}
+              <T id={'and'} />
+              <Link>
+                {' '}
+                <T id={'privacy_statement'} />
+              </Link>
             </p>
           </div>
 
@@ -208,13 +271,13 @@ function Register({
               fill={true}
               loading={isSubmitting}
             >
-              Register
+              <T id={'register'} />
             </Button>
           </div>
         </form>
 
         <If condition={isSubmitting}>
-          <div class="authentication-page__loading-overlay">
+          <div class='authentication-page__loading-overlay'>
             <Spinner size={50} />
           </div>
         </If>
@@ -223,6 +286,4 @@ function Register({
   );
 }
 
-export default compose(
+export default compose(withAuthenticationActions)(Register);
-  withAuthenticationActions,
-)(Register);

client/src/containers/Authentication/ResetPassword.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo } from 'react';
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
-import { useIntl } from 'react-intl';
+
 import {
   Button,
   InputGroup,
@@ -15,12 +15,10 @@ import AppToaster from 'components/AppToaster';
 import { compose } from 'utils';
 import withAuthenticationActions from './withAuthenticationActions';
 import AuthInsider from 'containers/Authentication/AuthInsider';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
-
+function ResetPassword({ requestResetPassword }) {
-function ResetPassword({
+  const { formatMessage } = useIntl();
-  requestResetPassword,
-}) {
-  const intl = useIntl();
   const { token } = useParams();
   const history = useHistory();
 
@@ -33,10 +31,13 @@ function ResetPassword({
       .required('Confirm Password is required'),
   });
 
-  const initialValues = useMemo(() => ({
+  const initialValues = useMemo(
+    () => ({
       password: '',
       confirm_password: '',
-  }), []);
+    }),
+    []
+  );
 
   const {
     touched,
@@ -56,7 +57,7 @@ function ResetPassword({
       requestResetPassword(values, token)
         .then((response) => {
           AppToaster.show({
-            message: 'The password for your account was successfully updated.',
+            message: formatMessage('password_successfully_updated'),
             intent: Intent.DANGER,
             position: Position.BOTTOM,
           });
@@ -64,9 +65,9 @@ function ResetPassword({
           setSubmitting(false);
         })
         .catch((errors) => {
-          if (errors.find(e => e.type === 'TOKEN_INVALID')) {
+          if (errors.find((e) => e.type === 'TOKEN_INVALID')) {
             AppToaster.show({
-              message: 'An unexpected error occurred',
+              message: formatMessage('an_unexpected_error_occurred'),
               intent: Intent.DANGER,
               position: Position.BOTTOM,
             });
@@ -81,15 +82,22 @@ function ResetPassword({
     <AuthInsider>
       <div className={'submit-np-form'}>
         <div className={'authentication-page__label-section'}>
-          <h3>Choose a new password</h3>
+          <h3>
-          You remembered your password ? <Link to='/auth/login'>Login</Link>
+            <T id={'choose_a_new_password'} />
+          </h3>
+          <T id={'you_remembered_your_password'} />{' '}
+          <Link to='/auth/login'>
+            <T id={'login'} />
+          </Link>
         </div>
 
         <form onSubmit={handleSubmit}>
           <FormGroup
-            label={'Password'}
+            label={<T id={'password'} />}
-            intent={(errors.password && touched.password) && Intent.DANGER}
+            intent={errors.password && touched.password && Intent.DANGER}
-            helperText={<ErrorMessage name={'password'} {...{errors, touched}} />}
+            helperText={
+              <ErrorMessage name={'password'} {...{ errors, touched }} />
+            }
             className={'form-group--password'}
           >
             <InputGroup
@@ -101,16 +109,29 @@ function ResetPassword({
           </FormGroup>
 
           <FormGroup
-            label={'New Password'}
+            label={<T id={'new_password'} />}
             labelInfo={'(again):'}
-            intent={(errors.confirm_password && touched.confirm_password) && Intent.DANGER}
+            intent={
-            helperText={<ErrorMessage name={'confirm_password'} {...{errors, touched}} />}
+              errors.confirm_password &&
+              touched.confirm_password &&
+              Intent.DANGER
+            }
+            helperText={
+              <ErrorMessage
+                name={'confirm_password'}
+                {...{ errors, touched }}
+              />
+            }
             className={'form-group--confirm-password'}
           >
             <InputGroup
               lang={true}
               type={'password'}
-              intent={(errors.confirm_password && touched.confirm_password) && Intent.DANGER}
+              intent={
+                errors.confirm_password &&
+                touched.confirm_password &&
+                Intent.DANGER
+              }
               {...getFieldProps('confirm_password')}
             />
           </FormGroup>
@@ -121,8 +142,9 @@ function ResetPassword({
               className={'btn-new'}
               intent={Intent.PRIMARY}
               type='submit'
-              loading={isSubmitting}>
+              loading={isSubmitting}
-              Submit new password
+            >
+              <T id={'submit_new_password'} />
             </Button>
           </div>
         </form>
@@ -131,6 +153,4 @@ function ResetPassword({
   );
 }
 
-export default compose(
+export default compose(withAuthenticationActions)(ResetPassword);
-  withAuthenticationActions,
-)(ResetPassword);

client/src/containers/Authentication/SendResetPassword.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
-import { useIntl } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 import { Button, InputGroup, Intent, FormGroup } from '@blueprintjs/core';
 import { FormattedMessage } from 'react-intl';
@@ -15,23 +15,23 @@ import AuthInsider from 'containers/Authentication/AuthInsider';
 
 import withAuthenticationActions from './withAuthenticationActions';
 
-
+function SendResetPassword({ requestSendResetPassword }) {
-function SendResetPassword({
+  const { formatMessage } = useIntl();
-  requestSendResetPassword,
-}) {
-  const intl = useIntl();
   const history = useHistory();
 
   // Validation schema.
   const ValidationSchema = Yup.object().shape({
     crediential: Yup.string('')
-      .required(intl.formatMessage({ id: 'required' }))
+      .required(formatMessage({ id: 'required' }))
-      .email(intl.formatMessage({ id: 'invalid_email_or_phone_numner' })),
+      .email(formatMessage({ id: 'invalid_email_or_phone_numner' })),
   });
 
-  const initialValues = useMemo(() => ({
+  const initialValues = useMemo(
+    () => ({
       crediential: '',
-  }), []);
+    }),
+    []
+  );
 
   // Formik validation
   const {
@@ -60,9 +60,9 @@ function SendResetPassword({
           setSubmitting(false);
         })
         .catch((errors) => {
-          if (errors.find(e => e.type === 'EMAIL.NOT.REGISTERED')){
+          if (errors.find((e) => e.type === 'EMAIL.NOT.REGISTERED')) {
             AppToaster.show({
-              message: 'We couldn\'t find your account with that email',
+              message: "We couldn't find your account with that email",
               intent: Intent.DANGER,
             });
           }
@@ -75,19 +75,27 @@ function SendResetPassword({
     <AuthInsider>
       <div class='reset-form'>
         <div className={'authentication-page__label-section'}>
-          <h3>Reset Your Password</h3>
+          <h3>
-          <p>Enter your email address and we’ll send you a link to reset your password.</p>
+            <T id={'reset_your_password'} />
+          </h3>
+          <p>
+            <T id={'we_ll_send_you_a_link_to_reset_your_password'} />
+          </p>
         </div>
 
         <form onSubmit={handleSubmit} className={'send-reset-password'}>
           <FormGroup
             label={'Email or Phone Number'}
-            intent={(errors.crediential && touched.crediential) && Intent.DANGER}
+            intent={errors.crediential && touched.crediential && Intent.DANGER}
-            helperText={<ErrorMessage name={'crediential'} {...{errors, touched}} />}
+            helperText={
+              <ErrorMessage name={'crediential'} {...{ errors, touched }} />
+            }
             className={'form-group--crediential'}
           >
             <InputGroup
-              intent={(errors.crediential && touched.crediential) && Intent.DANGER}
+              intent={
+                errors.crediential && touched.crediential && Intent.DANGER
+              }
               large={true}
               {...getFieldProps('crediential')}
             />
@@ -100,14 +108,14 @@ function SendResetPassword({
               fill={true}
               loading={isSubmitting}
             >
-              {intl.formatMessage({ id: 'Send password reset link' })}
+              <T id={'send_password_reset_link'} />
             </Button>
           </div>
         </form>
 
         <div class='authentication-page__footer-links'>
           <Link to='/auth/login'>
-            <FormattedMessage id='Return to log in' />
+            <T id={'return_to_log_in'} />
           </Link>
         </div>
       </div>
@@ -115,6 +123,4 @@ function SendResetPassword({
   );
 }
 
-export default compose(
+export default compose(withAuthenticationActions)(SendResetPassword);
-  withAuthenticationActions,
-)(SendResetPassword);

client/src/containers/Dialogs/AccountFormDialog.js

@@ -8,12 +8,13 @@ import {
   TextArea,
   MenuItem,
   Checkbox,
-  Position
+  Position,
 } from '@blueprintjs/core';
 import { Select } from '@blueprintjs/select';
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
-import { useIntl } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
 import { omit } from 'lodash';
 import { useQuery, queryCache } from 'react-query';
 
@@ -27,7 +28,6 @@ import Icon from 'components/Icon';
 import ErrorMessage from 'components/ErrorMessage';
 import { fetchAccountTypes } from 'store/accounts/accounts.actions';
 
-
 function AccountFormDialog({
   name,
   payload,
@@ -57,25 +57,29 @@ function AccountFormDialog({
     account_type_id: Yup.string()
       .nullable()
       .required(intl.formatMessage({ id: 'required' })),
-    description: Yup.string().trim()
+    description: Yup.string().trim(),
   });
 
-  const initialValues = useMemo(() => ({
+  const initialValues = useMemo(
+    () => ({
       account_type_id: null,
       name: '',
       description: '',
-  }), []);
+    }),
+    []
+  );
 
   const [selectedAccountType, setSelectedAccountType] = useState(null);
   const [selectedSubaccount, setSelectedSubaccount] = useState(
-    payload.action === 'new_child' ? 
+    payload.action === 'new_child'
-      accounts.find(a => a.id === payload.id) : null,
+      ? accounts.find((a) => a.id === payload.id)
+      : null
   );
 
   const transformApiErrors = (errors) => {
     const fields = {};
-    if (errors.find(e => e.type === 'NOT_UNIQUE_CODE')) {
+    if (errors.find((e) => e.type === 'NOT_UNIQUE_CODE')) {
-      fields.code = 'Account code is not unqiue.'
+      fields.code = 'Account code is not unqiue.';
     }
     return fields;
   };
@@ -84,7 +88,7 @@ function AccountFormDialog({
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
-      ...(payload.action === 'edit' && account) ? account : initialValues,
+      ...(payload.action === 'edit' && account ? account : initialValues),
     },
     validationSchema: accountFormValidationSchema,
     onSubmit: (values, { setSubmitting, setErrors }) => {
@@ -93,8 +97,9 @@ function AccountFormDialog({
       if (payload.action === 'edit') {
         requestEditAccount({
           payload: payload.id,
-          form: { ...omit(values, [...exclude, 'account_type_id']) }
+          form: { ...omit(values, [...exclude, 'account_type_id']) },
-        }).then((response) => {
+        })
+          .then((response) => {
             closeDialog(name);
             AppToaster.show({
               message: 'the_account_has_been_edited',
@@ -102,12 +107,14 @@ function AccountFormDialog({
             });
             setSubmitting(false);
             queryCache.refetchQueries('accounts-table', { force: true });
-        }).catch((errors) => {
+          })
+          .catch((errors) => {
             setSubmitting(false);
             setErrors(transformApiErrors(errors));
           });
       } else {
-        requestSubmitAccount({ form: { ...omit(values, exclude) } }).then((response) => {
+        requestSubmitAccount({ form: { ...omit(values, exclude) } })
+          .then((response) => {
             closeDialog(name);
             AppToaster.show({
               message: 'the_account_has_been_submit',
@@ -116,20 +123,22 @@ function AccountFormDialog({
             });
             setSubmitting(false);
             queryCache.refetchQueries('accounts-table', { force: true });
-        }).catch((errors) => {
+          })
+          .catch((errors) => {
             setSubmitting(false);
             setErrors(transformApiErrors(errors));
           });
       }
-    }
+    },
   });
-  const { errors, values, touched } = useMemo(() => (formik), [formik]);
+  const { errors, values, touched } = useMemo(() => formik, [formik]);
 
   // Set default account type.
   useEffect(() => {
     if (account && account.account_type_id) {
-      const defaultType = accountsTypes.find((t) =>
+      const defaultType = accountsTypes.find(
-        t.id === account.account_type_id);
+        (t) => t.id === account.account_type_id
+      );
 
       defaultType && setSelectedAccountType(defaultType);
     }
@@ -155,44 +164,64 @@ function AccountFormDialog({
   // Account item of select accounts field.
   const accountItem = (item, { handleClick, modifiers, query }) => {
     return (
-      <MenuItem text={item.name} label={item.code} key={item.id} onClick={handleClick} />
+      <MenuItem
+        text={item.name}
+        label={item.code}
+        key={item.id}
+        onClick={handleClick}
+      />
     );
   };
 
   // Filters accounts items.
-  const filterAccountsPredicater = useCallback((query, account, _index, exactMatch) => {
+  const filterAccountsPredicater = useCallback(
+    (query, account, _index, exactMatch) => {
       const normalizedTitle = account.name.toLowerCase();
       const normalizedQuery = query.toLowerCase();
 
       if (exactMatch) {
         return normalizedTitle === normalizedQuery;
       } else {
-      return `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+        return (
+          `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0
+        );
       }
-  }, []);
+    },
+    []
+  );
 
   // Handles dialog close.
-  const handleClose = useCallback(() => { closeDialog(name); }, [closeDialog, name]);
+  const handleClose = useCallback(() => {
+    closeDialog(name);
+  }, [closeDialog, name]);
 
   // Fetches accounts list.
-  const fetchAccountsList = useQuery('accounts-list',
+  const fetchAccountsList = useQuery(
-    () => requestFetchAccounts(), { manual: true });
+    'accounts-list',
+    () => requestFetchAccounts(),
+    { manual: true }
+  );
 
   // Fetches accounts types.
-  const fetchAccountsTypes = useQuery('accounts-types-list', async () => {
+  const fetchAccountsTypes = useQuery(
+    'accounts-types-list',
+    async () => {
       await requestFetchAccountTypes();
-  }, { manual: true });
+    },
+    { manual: true }
+  );
 
   // Fetch the given account id on edit mode.
   const fetchAccount = useQuery(
     payload.action === 'edit' && ['account', payload.id],
     (key, id) => requestFetchAccount(id),
-    { manual: true });
+    { manual: true }
+  );
 
-  const isFetching = (
+  const isFetching =
     fetchAccountsList.isFetching ||
     fetchAccountTypes.isFetching ||
-    fetchAccount.isFetching);
+    fetchAccount.isFetching;
 
   // Fetch requests on dialog opening.
   const onDialogOpening = useCallback(() => {
@@ -201,16 +230,22 @@ function AccountFormDialog({
     fetchAccount.refetch();
   }, []);
 
-  const onChangeAccountType = useCallback((accountType) => {
+  const onChangeAccountType = useCallback(
+    (accountType) => {
       setSelectedAccountType(accountType);
       formik.setFieldValue('account_type_id', accountType.id);
-  }, [setSelectedAccountType, formik]);
+    },
+    [setSelectedAccountType, formik]
+  );
 
   // Handles change sub-account.
-  const onChangeSubaccount = useCallback((account) => {
+  const onChangeSubaccount = useCallback(
+    (account) => {
       setSelectedSubaccount(account);
       formik.setFieldValue('parent_account_id', account.id);
-  }, [setSelectedSubaccount, formik]);
+    },
+    [setSelectedSubaccount, formik]
+  );
 
   const onDialogClosed = useCallback(() => {
     formik.resetForm();
@@ -218,21 +253,25 @@ function AccountFormDialog({
     setSelectedAccountType(null);
   }, [formik]);
 
-  const infoIcon = useMemo(() => (<Icon icon="info-circle" iconSize={12} />), []);
+  const infoIcon = useMemo(() => <Icon icon='info-circle' iconSize={12} />, []);
 
   const subAccountLabel = useMemo(() => {
-    return (<span>{'Sub account?'} <Icon icon="info-circle" iconSize={12} /></span>);
+    return (
+      <span>
+        <T id={'sub_account'}/> <Icon icon='info-circle' iconSize={12} />
+      </span>
+    );
   }, []);
 
-  const requiredSpan = useMemo(() => (<span class="required">*</span>), []);
+  const requiredSpan = useMemo(() => <span class='required'>*</span>, []);
 
   return (
     <Dialog
       name={name}
-      title={payload.action === 'edit' ? 'Edit Account' : 'New Account'}
+      title={payload.action === 'edit' ? <T id={'edit_account'}/> : <T id={'new_account'}/>}
       className={{
         'dialog--loading': isFetching,
-        'dialog--account-form': true
+        'dialog--account-form': true,
       }}
       autoFocus={true}
       canEscapeKeyClose={true}
@@ -245,15 +284,18 @@ function AccountFormDialog({
       <form onSubmit={formik.handleSubmit}>
         <div className={Classes.DIALOG_BODY}>
           <FormGroup
-            label={'Account Type'}
+            label={<T id={'account_type'}/>}
             labelInfo={requiredSpan}
             className={classNames(
               'form-group--account-type',
               'form-group--select-list',
-              Classes.FILL)}
+              Classes.FILL
+            )}
             inline={true}
-            helperText={<ErrorMessage name="account_type_id" {...formik} />}
+            helperText={<ErrorMessage name='account_type_id' {...formik} />}
-            intent={(errors.account_type_id && touched.account_type_id) && Intent.DANGER}
+            intent={
+              errors.account_type_id && touched.account_type_id && Intent.DANGER
+            }
           >
             <Select
               items={accountsTypes}
@@ -265,39 +307,42 @@ function AccountFormDialog({
             >
               <Button
                 rightIcon='caret-down'
-                text={selectedAccountType ?
+                text={
-                  selectedAccountType.name : 'Select account type'}
+                  selectedAccountType
+                    ? selectedAccountType.name
+                    : 'Select account type'
+                }
                 disabled={payload.action === 'edit'}
               />
             </Select>
           </FormGroup>
 
           <FormGroup
-            label={'Account Name'}
+            label={<T id={'account_name'}/>}
             labelInfo={requiredSpan}
             className={'form-group--account-name'}
-            intent={(errors.name && touched.name) && Intent.DANGER}
+            intent={errors.name && touched.name && Intent.DANGER}
-            helperText={<ErrorMessage name="name" {...formik} />}
+            helperText={<ErrorMessage name='name' {...formik} />}
             inline={true}
           >
             <InputGroup
               medium={true}
-              intent={(errors.name && touched.name) && Intent.DANGER}
+              intent={errors.name && touched.name && Intent.DANGER}
               {...formik.getFieldProps('name')}
             />
           </FormGroup>
 
           <FormGroup
-            label={'Account Code'}
+            label={<T id={'account_code'}/>}
             className={'form-group--account-code'}
-            intent={(errors.code && touched.code) && Intent.DANGER}
+            intent={errors.code && touched.code && Intent.DANGER}
-            helperText={<ErrorMessage name="code" {...formik} />}
+            helperText={<ErrorMessage name='code' {...formik} />}
             inline={true}
             labelInfo={infoIcon}
           >
             <InputGroup
               medium={true}
-              intent={(errors.code && touched.code) && Intent.DANGER}
+              intent={errors.code && touched.code && Intent.DANGER}
               {...formik.getFieldProps('code')}
             />
           </FormGroup>
@@ -316,11 +361,12 @@ function AccountFormDialog({
 
           {values.subaccount && (
             <FormGroup
-              label={'Parent Account'}
+              label={<T id={'parent_account'}/>}
               className={classNames(
                 'form-group--parent-account',
                 'form-group--select-list',
-                Classes.FILL)}
+                Classes.FILL
+              )}
               inline={true}
             >
               <Select
@@ -335,7 +381,9 @@ function AccountFormDialog({
                 <Button
                   rightIcon='caret-down'
                   text={
-                    selectedSubaccount ? selectedSubaccount.name : 'Select Parent Account'
+                    selectedSubaccount
+                      ? selectedSubaccount.name
+                      : 'Select Parent Account'
                   }
                 />
               </Select>
@@ -343,7 +391,7 @@ function AccountFormDialog({
           )}
 
           <FormGroup
-            label={'Description'}
+            label={<T id={'description'}/>}
             className={'form-group--description'}
             intent={formik.errors.description && Intent.DANGER}
             helperText={formik.errors.description && formik.errors.credential}
@@ -359,9 +407,13 @@ function AccountFormDialog({
 
         <div className={Classes.DIALOG_FOOTER}>
           <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <Button onClick={handleClose}>Close</Button>
+            <Button onClick={handleClose}><T id={'close'}/></Button>
-            <Button intent={Intent.PRIMARY} disabled={formik.isSubmitting} type='submit'>
+            <Button
-              {payload.action === 'edit' ? 'Edit' : 'Submit'}
+              intent={Intent.PRIMARY}
+              disabled={formik.isSubmitting}
+              type='submit'
+            >
+              {payload.action === 'edit' ? <T id={'edit'}/> : <T id={'submit'}/>}
             </Button>
           </div>
         </div>
@@ -370,6 +422,4 @@ function AccountFormDialog({
   );
 }
 
-export default AccountFormDialogContainer(
+export default AccountFormDialogContainer(AccountFormDialog);
-  AccountFormDialog,
-);

client/src/containers/Dialogs/CurrencyDialog.js

@@ -7,7 +7,7 @@ import {
   Intent,
 } from '@blueprintjs/core';
 import * as Yup from 'yup';
-import { useIntl } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import { useFormik } from 'formik';
 import { compose } from 'utils';
 import Dialog from 'components/Dialog';
@@ -30,15 +30,15 @@ function CurrencyDialog({
   requestEditCurrency,
   editCurrency,
 }) {
-  const intl = useIntl();
+  const {formatMessage} = useIntl();
 
   const ValidationSchema = Yup.object().shape({
     currency_name: Yup.string().required(
-      intl.formatMessage({ id: 'required' })
+      formatMessage({ id: 'required' })
     ),
     currency_code: Yup.string()
       .max(4)
-      .required(intl.formatMessage({ id: 'required' })),
+      .required(formatMessage({ id: 'required' })),
   });
   const initialValues = useMemo(
     () => ({
@@ -110,7 +110,7 @@ function CurrencyDialog({
   return (
     <Dialog
       name={name}
-      title={payload.action === 'edit' ? 'Edit Currency' : ' New Currency'}
+      title={payload.action === 'edit' ? <T id={'edit_currency'}/> : <T id={'new_currency'}/>}
       className={classNames(
         {
           'dialog--loading': fetchHook.pending,
@@ -126,7 +126,7 @@ function CurrencyDialog({
       <form onSubmit={formik.handleSubmit}>
         <div className={Classes.DIALOG_BODY}>
           <FormGroup
-            label={'Currency Name'}
+            label={<T id={'currency_name'}/>}
             labelInfo={requiredSpan}
             className={'form-group--currency-name'}
             intent={
@@ -144,7 +144,7 @@ function CurrencyDialog({
             />
           </FormGroup>
           <FormGroup
-            label={'Currency Code'}
+            label={<T id={'currency_code'}/>}
             labelInfo={requiredSpan}
             className={'form-group--currency-code'}
             intent={
@@ -164,9 +164,9 @@ function CurrencyDialog({
         </div>
         <div className={Classes.DIALOG_FOOTER}>
           <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <Button onClick={handleClose}>Close</Button>
+            <Button onClick={handleClose}><T id={'close'}/></Button>
             <Button intent={Intent.PRIMARY} type='submit'>
-              {payload.action === 'edit' ? 'Edit' : 'Submit'}
+            {payload.action === 'edit' ? <T id={'edit'}/> : <T id={'submit'}/>}
             </Button>
           </div>
         </div>

client/src/containers/Dialogs/ExchangeRateDialog.js

@@ -0,0 +1,282 @@
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import {
+  Button,
+  Classes,
+  FormGroup,
+  InputGroup,
+  Intent,
+  Position,
+  MenuItem,
+} from '@blueprintjs/core';
+import { pick } from 'lodash';
+import * as Yup from 'yup';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import { useFormik } from 'formik';
+import Dialog from 'components/Dialog';
+
+import { useQuery, queryCache } from 'react-query';
+import AppToaster from 'components/AppToaster';
+import ErrorMessage from 'components/ErrorMessage';
+import classNames from 'classnames';
+import { Select } from '@blueprintjs/select';
+import moment from 'moment';
+import { DateInput } from '@blueprintjs/datetime';
+import { momentFormatter } from 'utils';
+import ExchangeRatesDialogConnect from 'connectors/ExchangeRatesFromDialog.connect';
+
+function ExchangeRateDialog({
+  name,
+  payload,
+  isOpen,
+
+  openDialog,
+  closeDialog,
+  currencies,
+
+  requestSubmitExchangeRate,
+  requestFetchExchangeRates,
+  requestEditExchangeRate,
+  requestFetchCurrencies,
+  editExchangeRate,
+  addExchangeRatesTableQueries,
+}) {
+  const {formatMessage} = useIntl();
+
+  const [selectedItems, setSelectedItems] = useState({});
+
+  const validationSchema = Yup.object().shape({
+    exchange_rate: Yup.number().required(
+      formatMessage({ id: 'required' })
+    ),
+    currency_code: Yup.string()
+      .max(3)
+      .required(formatMessage({ id: 'required' })),
+    date: Yup.date().required(formatMessage({ id: 'required' })),
+  });
+
+  const initialValues = useMemo(
+    () => ({
+      exchange_rate: '',
+      currency_code: '',
+      date: moment(new Date()).format('YYYY-MM-DD'),
+    }),
+    []
+  );
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    validationSchema,
+    initialValues: {
+      ...(payload.action === 'edit' &&
+        pick(editExchangeRate, Object.keys(initialValues))),
+    },
+    onSubmit: (values, { setSubmitting }) => {
+      if (payload.action === 'edit') {
+        requestEditExchangeRate(payload.id, values)
+          .then((response) => {
+            closeDialog(name);
+            AppToaster.show({
+              message: 'the_exchange_rate_has_been_edited',
+            });
+            setSubmitting(false);
+          })
+          .catch((error) => {
+            setSubmitting(false);
+          });
+      } else {
+        requestSubmitExchangeRate(values)
+          .then((response) => {
+            closeDialog(name);
+            AppToaster.show({
+              message: 'the_exchangeRate_has_been_submit',
+            });
+            setSubmitting(false);
+          })
+          .catch((error) => {
+            setSubmitting(false);
+          });
+      }
+    },
+  });
+
+  const { values, errors, touched } = useMemo(() => formik, [formik]);
+
+  const requiredSpan = useMemo(() => <span class='required'>*</span>, []);
+
+  const handleClose = useCallback(() => {
+    closeDialog(name);
+  }, [name, closeDialog]);
+
+  const fetchHook = useQuery('exchange-rates-dialog', () => {
+    return Promise.all([requestFetchExchangeRates(), requestFetchCurrencies()]);
+  });
+
+  const onDialogClosed = useCallback(() => {
+    formik.resetForm();
+    closeDialog(name);
+  }, [formik, closeDialog, name]);
+
+  const onDialogOpening = useCallback(() => {
+    fetchHook.refetch();
+  }, [fetchHook]);
+
+  const handleDateChange = useCallback(
+    (date) => {
+      const formatted = moment(date).format('YYYY-MM-DD');
+      formik.setFieldValue('date', formatted);
+    },
+    [formik.setFieldValue]
+  );
+
+  const onItemsSelect = useCallback(
+    (filedName) => {
+      return (filed) => {
+        setSelectedItems({
+          ...selectedItems,
+          [filedName]: filed,
+        });
+        formik.setFieldValue(filedName, filed.currency_code);
+      };
+    },
+    [formik.setFieldValue, selectedItems]
+  );
+
+  const filterCurrencyCode = (query, currency_code, _index, exactMatch) => {
+    const normalizedTitle = currency_code.currency_code.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return (
+        `${currency_code.currency_code} ${normalizedTitle}`.indexOf(
+          normalizedQuery
+        ) >= 0
+      );
+    }
+  };
+
+  const currencyCodeRenderer = useCallback((CurrencyCode, { handleClick }) => {
+    return (
+      <MenuItem
+        className={'exchangeRate-menu'}
+        key={CurrencyCode.id}
+        text={CurrencyCode.currency_code}
+        onClick={handleClick}
+      />
+    );
+  }, []);
+
+  const getSelectedItemLabel = useCallback(
+    (fieldName, defaultLabel) => {
+      return typeof selectedItems[fieldName] !== 'undefined'
+        ? selectedItems[fieldName].currency_code
+        : defaultLabel;
+    },
+    [selectedItems]
+  );
+
+  return (
+    <Dialog
+      name={name}
+      title={
+        payload.action === 'edit' ?  <T id={'edit_exchange_rate'}/> : <T id={'new_exchange_rate'}/>
+
+      }
+      className={classNames(
+        {
+          'dialog--loading': fetchHook.pending,
+        },
+        'dialog--exchangeRate-form'
+      )}
+      isOpen={isOpen}
+      onClosed={onDialogClosed}
+      onOpening={onDialogOpening}
+      isLoading={fetchHook.pending}
+      onClose={handleClose}
+    >
+      <form onSubmit={formik.handleSubmit}>
+        <div className={Classes.DIALOG_BODY}>
+          <FormGroup
+            label={<T id={'date'}/>}
+            inline={true}
+            labelInfo={requiredSpan}
+            intent={errors.date && touched.date && Intent.DANGER}
+            helperText={<ErrorMessage name='date' {...formik} />}
+          >
+            <DateInput
+              fill={true}
+              {...momentFormatter('YYYY-MM-DD')}
+              defaultValue={new Date()}
+              onChange={handleDateChange}
+              popoverProps={{ position: Position.BOTTOM }}
+              // disabled={payload.action === 'edit'}
+            />
+          </FormGroup>
+
+          <FormGroup
+            label={<T id={'exchange_rate'}/>}
+            labelInfo={requiredSpan}
+            intent={
+              errors.exchange_rate && touched.exchange_rate && Intent.DANGER
+            }
+            helperText={<ErrorMessage name='exchange_rate' {...formik} />}
+            inline={true}
+          >
+            <InputGroup
+              medium={true}
+              intent={
+                errors.exchange_rate && touched.exchange_rate && Intent.DANGER
+              }
+              {...formik.getFieldProps('exchange_rate')}
+            />
+          </FormGroup>
+
+          <FormGroup
+            label={<T id={'currency_code'}/>}
+            labelInfo={requiredSpan}
+            className={classNames(
+              'form-group--select-list',
+
+              Classes.FILL
+            )}
+            inline={true}
+            intent={
+              errors.currency_code && touched.currency_code && Intent.DANGER
+            }
+            helperText={<ErrorMessage name='currency_code' {...formik} />}
+          >
+            <Select
+              items={Object.values(currencies)}
+              noResults={<MenuItem disabled={true} text='No results.' />}
+              itemRenderer={currencyCodeRenderer}
+              itemPredicate={filterCurrencyCode}
+              popoverProps={{ minimal: true }}
+              onItemSelect={onItemsSelect('currency_code')}
+            >
+              <Button
+                rightIcon='caret-down'
+                fill={true}
+                text={getSelectedItemLabel(
+                  'currency_code',
+                  'select Currency Code'
+                )}
+                // disabled={payload.action === 'edit'}
+              />
+            </Select>
+          </FormGroup>
+        </div>
+        <div className={Classes.DIALOG_FOOTER}>
+          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+            <Button onClick={handleClose}><T id={'close'}/></Button>
+            <Button intent={Intent.PRIMARY} type='submit'>
+            {payload.action === 'edit' ? <T id={'edit'}/> : <T id={'submit'}/>}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </Dialog>
+  );
+}
+
+export default ExchangeRatesDialogConnect(ExchangeRateDialog);

client/src/containers/Dialogs/InviteUserDialog.js

@@ -1,5 +1,5 @@
 import React, { useMemo, useCallback } from 'react';
-import { useIntl } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
 import {
@@ -28,7 +28,7 @@ function InviteUserDialog({
   requestFetchUser,
   requestEditUser,
 }) {
-  const intl = useIntl();
+  const { formatMessage } = useIntl();
 
   const fetchHook = useAsync(async () => {
     await Promise.all([
@@ -37,12 +37,12 @@ function InviteUserDialog({
   }, false);
 
   const validationSchema = Yup.object().shape({
-    first_name: Yup.string().required(intl.formatMessage({ id: 'required' })),
+    first_name: Yup.string().required(formatMessage({ id: 'required' })),
-    last_name: Yup.string().required(intl.formatMessage({ id: 'required' })),
+    last_name: Yup.string().required(formatMessage({ id: 'required' })),
     email: Yup.string()
       .email()
-      .required(intl.formatMessage({ id: 'required' })),
+      .required(formatMessage({ id: 'required' })),
-    phone_number: Yup.number().required(intl.formatMessage({ id: 'required' })),
+    phone_number: Yup.number().required(formatMessage({ id: 'required' })),
   });
 
   const initialValues = useMemo(
@@ -101,7 +101,7 @@ function InviteUserDialog({
   return (
     <Dialog
       name={name}
-      title={payload.action === 'edit' ? 'Edit invite' : ''}
+      title={payload.action === 'edit' ? <T id={'edit_invite'} /> : ''}
       className={classNames({
         'dialog--loading': fetchHook.pending,
         'dialog--invite-user': true,
@@ -116,7 +116,7 @@ function InviteUserDialog({
       <form onSubmit={formik.handleSubmit}>
         <div className={Classes.DIALOG_BODY}>
           <FormGroup
-            label={'First Name'}
+            label={<T id={'first_name'} />}
             className={'form-group--first-name'}
             intent={errors.first_name && touched.first_name && Intent.DANGER}
             helperText={<ErrorMessage name='first_name' {...formik} />}
@@ -129,7 +129,7 @@ function InviteUserDialog({
           </FormGroup>
 
           <FormGroup
-            label={'Last Name'}
+            label={<T id={'last_name'} />}
             className={'form-group--last-name'}
             intent={errors.last_name && touched.last_name && Intent.DANGER}
             helperText={<ErrorMessage name='last_name' {...formik} />}
@@ -142,7 +142,7 @@ function InviteUserDialog({
           </FormGroup>
 
           <FormGroup
-            label={'Email'}
+            label={<T id={'email'} />}
             className={'form-group--email'}
             intent={errors.email && touched.email && Intent.DANGER}
             helperText={<ErrorMessage name='email' {...formik} />}
@@ -156,7 +156,7 @@ function InviteUserDialog({
           </FormGroup>
 
           <FormGroup
-            label={'Phone Number'}
+            label={<T id={'phone_number'} />}
             className={'form-group--phone-number'}
             intent={
               errors.phone_number && touched.phone_number && Intent.DANGER
@@ -175,9 +175,9 @@ function InviteUserDialog({
 
         <div className={Classes.DIALOG_FOOTER}>
           <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <Button onClick={handleClose}>Close</Button>
+            <Button onClick={handleClose}><T id={'close'}/></Button>
             <Button intent={Intent.PRIMARY} type='submit'>
-              {payload.action === 'edit' ? 'Edit' : ''}
+              {payload.action === 'edit' ? <T id={'edit'}/> : ''}
             </Button>
           </div>
         </div>

client/src/containers/Dialogs/ItemCategoryDialog.js

@@ -11,7 +11,7 @@ import {
 import { Select } from '@blueprintjs/select';
 import { pick } from 'lodash';
 import * as Yup from 'yup';
-import { useIntl } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import { useFormik } from 'formik';
 import { compose } from 'utils';
 import { useQuery } from 'react-query';
@@ -55,13 +55,13 @@ function ItemCategoryDialog({
   requestEditItemCategory,
 }) {
   const [selectedParentCategory, setParentCategory] = useState(null);
-  const intl = useIntl();
+  const {formatMessage} = useIntl();
 
   const fetchList = useQuery(['items-categories-list'],
     () => requestFetchItemCategories());
 
   const ValidationSchema = Yup.object().shape({
-    name: Yup.string().required(intl.formatMessage({ id: 'required' })),
+    name: Yup.string().required(formatMessage({ id: 'required' })),
     parent_category_id: Yup.string().nullable(),
     description: Yup.string().trim()
   });
@@ -149,7 +149,7 @@ function ItemCategoryDialog({
   return (
     <Dialog
       name={name}
-      title={payload.action === 'edit' ? 'Edit Category' : ' New Category'}
+      title={payload.action === 'edit' ? <T id={'edit_category'}/> : <T id={'new_category'}/>}
       className={classNames({
         'dialog--loading': fetchList.isFetching,
       },
@@ -164,7 +164,7 @@ function ItemCategoryDialog({
       <form onSubmit={formik.handleSubmit}>
         <div className={Classes.DIALOG_BODY}>
           <FormGroup
-            label={'Category Name'}
+            label={<T id={'category_name'}/>}
             labelInfo={requiredSpan}
             className={'form-group--category-name'}
             intent={(errors.name && touched.name) && Intent.DANGER}
@@ -179,7 +179,7 @@ function ItemCategoryDialog({
           </FormGroup>
 
           <FormGroup
-            label={'Parent Category'}
+            label={<T id={'parent_category'}/>}
             labelInfo={infoIcon}
             className={classNames(
               'form-group--select-list',
@@ -207,7 +207,7 @@ function ItemCategoryDialog({
           </FormGroup>
 
           <FormGroup
-            label={'Description'}
+            label={<T id={'description'}/>}
             className={'form-group--description'}
             intent={(errors.description && touched.description) && Intent.DANGER}
             helperText={(<ErrorMessage name="description" {...formik} />)}
@@ -222,9 +222,9 @@ function ItemCategoryDialog({
         </div>
         <div className={Classes.DIALOG_FOOTER}>
           <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <Button onClick={handleClose}>Close</Button>
+            <Button onClick={handleClose}><T id={'close'}/></Button>
             <Button intent={Intent.PRIMARY} type='submit'>
-              {payload.action === 'edit' ? 'Edit' : 'Submit'}
+            {payload.action === 'edit' ? <T id={'edit'}/> : <T id={'submit'}/>}
             </Button>
           </div>
         </div>

client/src/containers/Dialogs/ItemFromDialog.js

@@ -5,10 +5,10 @@ import {
   FormGroup,
   InputGroup,
   Intent,
-  TextArea
+  TextArea,
 } from '@blueprintjs/core';
 import * as Yup from 'yup';
-import { useIntl } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import { useFormik } from 'formik';
 import { compose } from 'utils';
 import Dialog from 'components/Dialog';
@@ -25,30 +25,30 @@ function ItemFromDialog({
   submitItemCategory,
   fetchCategory,
   openDialog,
-  closeDialog
+  closeDialog,
 }) {
   const [state, setState] = useState({});
-  const intl = useIntl();
+  const { formatMessage } = useIntl();
   const ValidationSchema = Yup.object().shape({
-    name: Yup.string().required(intl.formatMessage({ id: 'required' })),
+    name: Yup.string().required(formatMessage({ id: 'required' })),
-    description: Yup.string().trim()
+    description: Yup.string().trim(),
   });
 
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {},
     validationSchema: ValidationSchema,
-    onSubmit: values => {
+    onSubmit: (values) => {
       submitItemCategory({ values })
-        .then(response => {
+        .then((response) => {
           AppToaster.show({
-            message: 'the_category_has_been_submit'
+            message: 'the_category_has_been_submit',
           });
         })
-        .catch(error => {
+        .catch((error) => {
           alert(error.message);
         });
-    }
+    },
   });
 
   const fetchHook = useAsync(async () => {
@@ -71,10 +71,12 @@ function ItemFromDialog({
   return (
     <Dialog
       name={name}
-      title={payload.action === 'new' ? 'New' : ' New Category'}
+      title={
+        payload.action === 'new' ? <T id={'new'} /> : <T id={'new_category'} />
+      }
       className={{
         'dialog--loading': state.isLoading,
-        'dialog--item-form': true
+        'dialog--item-form': true,
       }}
       isOpen={isOpen}
       onClosed={onDialogClosed}
@@ -84,7 +86,7 @@ function ItemFromDialog({
       <form onSubmit={formik.handleSubmit}>
         <div className={Classes.DIALOG_BODY}>
           <FormGroup
-            label={'Category Name'}
+            label={<T id={'category_name'} />}
             className={'form-group--category-name'}
             intent={formik.errors.name && Intent.DANGER}
             helperText={formik.errors.name && formik.errors.name}
@@ -97,7 +99,7 @@ function ItemFromDialog({
             />
           </FormGroup>
           <FormGroup
-            label={'Description'}
+            label={<T id={'description'} />}
             className={'form-group--description'}
             intent={formik.errors.description && Intent.DANGER}
             helperText={formik.errors.description && formik.errors.credential}
@@ -112,9 +114,15 @@ function ItemFromDialog({
         </div>
         <div className={Classes.DIALOG_FOOTER}>
           <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <Button onClick={handleClose}>Close</Button>
+            <Button onClick={handleClose}>
+              <T id={'close'} />
+            </Button>
             <Button intent={Intent.PRIMARY} type='submit'>
-              {payload.action === 'new' ? 'New' : 'Submit'}
+              {payload.action === 'new' ? (
+                <T id={'new'} />
+              ) : (
+                <T id={'submit'} />
+              )}
             </Button>
           </div>
         </div>

client/src/containers/Dialogs/UserFormDialog.js

@@ -1,5 +1,5 @@
 import React, { useMemo, useCallback } from 'react';
-import { useIntl } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
 import {
@@ -37,7 +37,9 @@ function UserFormDialog({
   }, false);
 
   const validationSchema = Yup.object().shape({
-    email: Yup.string().email().required(intl.formatMessage({id:'required'})),
+    email: Yup.string()
+      .email()
+      .required(intl.formatMessage({ id: 'required' })),
   });
 
   const initialValues = {
@@ -96,7 +98,13 @@ function UserFormDialog({
   return (
     <Dialog
       name={name}
-      title={payload.action === 'edit' ? 'Edit invite' : 'invite User'}
+      title={
+        payload.action === 'edit' ? (
+          <T id={'edit_invite'} />
+        ) : (
+          <T id={'invite_user'} />
+        )
+      }
       className={classNames({
         'dialog--loading': fetchHook.pending,
         'dialog--invite-form': true,
@@ -110,18 +118,20 @@ function UserFormDialog({
     >
       <form onSubmit={handleSubmit}>
         <div className={Classes.DIALOG_BODY}>
-          <p class="mb2">Your teammate will get an email that gives them access to your team.</p>
+          <p class='mb2'>
+            <T id={'your_access_to_your_team'} />
+          </p>
 
           <FormGroup
-            label={'Email'}
+            label={<T id={'email'} />}
             className={classNames('form-group--email', Classes.FILL)}
-            intent={(errors.email && touched.email) && Intent.DANGER}
+            intent={errors.email && touched.email && Intent.DANGER}
             helperText={<ErrorMessage name='email' {...{ errors, touched }} />}
             inline={true}
           >
             <InputGroup
               medium={true}
-              intent={(errors.email && touched.email) && Intent.DANGER}
+              intent={errors.email && touched.email && Intent.DANGER}
               {...getFieldProps('email')}
             />
           </FormGroup>
@@ -129,9 +139,15 @@ function UserFormDialog({
 
         <div className={Classes.DIALOG_FOOTER}>
           <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <Button onClick={handleClose}>Close</Button>
+            <Button onClick={handleClose}>
+              <T id={'close'} />
+            </Button>
             <Button intent={Intent.PRIMARY} type='submit'>
-              {payload.action === 'edit' ? 'Edit' : 'invite'}
+              {payload.action === 'edit' ? (
+                <T id={'edit'} />
+              ) : (
+                <T id={'invite'} />
+              )}
             </Button>
           </div>
         </div>

client/src/containers/Expenses/ExpensesList.js

@@ -8,6 +8,7 @@ import ExpensesViewsTabs from 'components/Expenses/ExpensesViewsTabs';
 import ExpensesTable from 'components/Expenses/ExpensesTable';
 import connector from 'connectors/ExpensesList.connector';
 import AppToaster from 'components/AppToaster';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 function ExpensesList({
   fetchExpenses,
@@ -59,8 +60,8 @@ function ExpensesList({
       </DashboardPageContent>
 
       <Alert
-        cancelButtonText='Cancel'
+        cancelButtonText={<T id={'cancel'}/>}
-        confirmButtonText='Move to Trash'
+        confirmButtonText={<T id={'move_to_trash'}/>}
         icon='trash'
         intent={Intent.DANGER}
         isOpen={deleteExpenseState}

client/src/containers/FinancialStatements/ExchangeRates/ExchangeRate.js

@@ -0,0 +1,122 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { useQuery } from 'react-query';
+import { useParams } from 'react-router-dom';
+import { Alert, Intent } from '@blueprintjs/core';
+import AppToaster from 'components/AppToaster';
+
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import ExchangeRateTable from './ExchangeRateTable';
+import ExchangeRateActionsBar from './ExchangeRateActionsBar';
+
+import withDashboardActions from 'containers/Dashboard/withDashboard';
+import withResourceActions from 'containers/Resources/withResourcesActions';
+import withExchangeRatesActions from 'containers/FinancialStatements/ExchangeRates/withExchangeRatesActions';
+
+import { compose } from 'utils';
+
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
+function ExchangeRate({
+  views,
+  changePageTitle,
+  requestFetchResourceFields,
+  requestFetchExchangeRates,
+  requestDeleteExchangeRate,
+  addExchangeRatesTableQueries,
+}) {
+  const { id } = useParams();
+  const [deleteExchangeRate, setDeleteExchangeRate] = useState(false);
+  const [selectedRows, setSelectedRows] = useState([]);
+
+  const fetchHook = useQuery('exchange-rates', () => {
+    return Promise.all([requestFetchExchangeRates()]);
+  });
+
+  useEffect(() => {
+    id
+      ? changePageTitle('Exchange Rate Details')
+      : changePageTitle('Exchange Rate List');
+  }, [id, changePageTitle]);
+
+  const handelDeleteExchangeRate = useCallback(
+    (exchange_rate) => {
+      setDeleteExchangeRate(exchange_rate);
+    },
+    [setDeleteExchangeRate]
+  );
+
+  const handelEditExchangeRate = (exchange_rate) => {};
+
+  const handelCancelExchangeRateDelete = useCallback(() => {
+    setDeleteExchangeRate(false);
+  }, [setDeleteExchangeRate]);
+
+  const handelConfirmExchangeRateDelete = useCallback(() => {
+    requestDeleteExchangeRate(deleteExchangeRate.id).then(() => {
+      setDeleteExchangeRate(false);
+      AppToaster.show({
+        message: 'the_exchange_rate_has_been_delete',
+      });
+    });
+  }, [deleteExchangeRate, requestDeleteExchangeRate]);
+
+  // Handle fetch data of Exchange_rates datatable.
+  const handleFetchData = useCallback(
+    ({ pageIndex, pageSize, sortBy }) => {
+      addExchangeRatesTableQueries({
+        ...(sortBy.length > 0
+          ? {
+              column_sort_by: sortBy[0].id,
+              sort_order: sortBy[0].desc ? 'desc' : 'asc',
+            }
+          : {}),
+      });
+    },
+    [addExchangeRatesTableQueries]
+  );
+
+  const handleSelectedRowsChange = useCallback(
+    (exchange_rates) => {
+      setSelectedRows(exchange_rates);
+    },
+    [setSelectedRows]
+  );
+
+  return (
+    <DashboardInsider loading={fetchHook.pending}>
+      <ExchangeRateActionsBar
+        views={views}
+        onDeleteExchangeRate={handelDeleteExchangeRate}
+        selectedRows={selectedRows}
+      />
+      <DashboardPageContent>
+        <ExchangeRateTable
+          onDeleteExchangeRate={handelDeleteExchangeRate}
+          onEditExchangeRate={handelEditExchangeRate}
+          onFetchData={handleFetchData}
+          onSelectedRowsChange={handleSelectedRowsChange}
+        />
+        <Alert
+          cancelButtonText={<T id={'cancel'}/>}
+          confirmButtonText={<T id={'move_to_trash'}/>}
+          icon='trash'
+          intent={Intent.DANGER}
+          isOpen={deleteExchangeRate}
+          onCancel={handelCancelExchangeRateDelete}
+          onConfirm={handelConfirmExchangeRateDelete}
+        >
+          <p>
+            Are you sure you want to move <b>filename</b> to Trash? You will be
+            able to restore it later, but it will become private to you.
+          </p>
+        </Alert>
+      </DashboardPageContent>
+    </DashboardInsider>
+  );
+}
+
+export default compose(
+  withExchangeRatesActions,
+  withDashboardActions
+)(ExchangeRate);

client/src/containers/FinancialStatements/ExchangeRates/ExchangeRateActionsBar.js

@@ -0,0 +1,112 @@
+import React, { useCallback, useState, useMemo } from 'react';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import { compose } from 'utils';
+import {
+  NavbarGroup,
+  Button,
+  Classes,
+  Intent,
+  Popover,
+  Position,
+  PopoverInteractionKind,
+} from '@blueprintjs/core';
+import { connect } from 'react-redux';
+import classNames from 'classnames';
+import Icon from 'components/Icon';
+import DashboardConnect from 'connectors/Dashboard.connector';
+import FilterDropdown from 'components/FilterDropdown';
+import  ExchangeRatesDialogConnect from 'connectors/ExchangeRatesFromDialog.connect';
+import withResourceDetail from 'containers/Resources/withResourceDetails';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
+
+function ExchangeRateActionsBar({
+  openDialog,
+  onDeleteExchangeRate,
+  onFilterChanged,
+  resourceFields,
+  selectedRows = [],
+}) {
+  const onClickNewExchangeRate = useCallback(() => {
+    openDialog('exchangeRate-form', {});
+  }, [openDialog]);
+
+  const handelDeleteExchangeRate = useCallback(
+    (exchangeRate) => {
+      onDeleteExchangeRate(exchangeRate);
+    },
+    [selectedRows, onDeleteExchangeRate]
+  );
+  const [filterCount, setFilterCount] = useState(0);
+  const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
+    selectedRows,
+  ]);
+
+  const filterDropdown = FilterDropdown({
+    fields: resourceFields,
+    onFilterChange: (filterConditions) => {
+      setFilterCount(filterConditions.length || 0);
+
+      onFilterChanged && onFilterChanged(filterConditions);
+    },
+  });
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon='plus' />}
+          text={<T id={'new_exchange_rate'}/>}
+          onClick={onClickNewExchangeRate}
+        />
+        <Popover
+          minimal={true}
+          content={filterDropdown}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text={
+              filterCount <= 0 ? <T id={'filter'}/> : `${filterCount} filters applied`
+            }
+            icon={<Icon icon='filter' />}
+          />
+        </Popover>
+        {hasSelectedRows && (
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon='trash' iconSize={15} />}
+            text={<T id={'delete'}/>}
+            intent={Intent.DANGER}
+            onClick={handelDeleteExchangeRate}
+          />
+        )}
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon='file-import' />}
+          text={<T id={'import'}/>}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon='file-export' />}
+          text={<T id={'export'}/>}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+const mapStateToProps = (state, props) => ({
+  resourceName: 'exchange_rates',
+});
+
+const withExchangeRateActionBar = connect(mapStateToProps);
+
+export default compose(
+  withExchangeRateActionBar,
+  DashboardConnect,
+  ExchangeRatesDialogConnect,
+  withResourceDetail
+)(ExchangeRateActionsBar);

client/src/containers/FinancialStatements/ExchangeRates/ExchangeRateTable.js

@@ -0,0 +1,143 @@
+import React, { useCallback, useMemo } from 'react';
+import Icon from 'components/Icon';
+import DialogConnect from 'connectors/Dialog.connector';
+import LoadingIndicator from 'components/LoadingIndicator';
+import DataTable from 'components/DataTable';
+import { Button, Popover, Menu, MenuItem, Position } from '@blueprintjs/core';
+
+import withExchangeRates from 'containers/FinancialStatements/ExchangeRates/withExchangeRates';
+import withExchangeRatesActions from 'containers/FinancialStatements/ExchangeRates/withExchangeRatesActions';
+
+import { compose } from 'utils';
+
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
+function ExchangeRateTable({
+  exchangeRatesList,
+  onFetchData,
+  openDialog,
+  onDeleteExchangeRate,
+  onEditExchangeRate,
+  onSelectedRowsChange,
+}) {
+
+  const {formatMessage} = useIntl();
+
+
+  const handelEditExchangeRate = (exchange_rate) => () => {
+    openDialog('exchangeRate-form', { action: 'edit', id: exchange_rate.id });
+    onEditExchangeRate(exchange_rate.id);
+  };
+
+  // const handelEditExchangeRate = useCallback(
+  //   (exchange_rate) => () => {
+  //     openDialog('exchangeRate-form', { action: 'edit', id: exchange_rate.id });
+  //     onEditExchangeRate(exchange_rate.id);
+  //   },
+  //   [openDialog]
+  // );
+
+  const handleDeleteExchangeRate = (exchange_rate) => () => {
+    onDeleteExchangeRate(exchange_rate);
+  };
+
+  const actionMenuList = useCallback(
+    (ExchangeRate) => (
+      <Menu>
+        <MenuItem
+          text={<T id={'edit_exchange_rate'}/>}
+          onClick={handelEditExchangeRate(ExchangeRate)}
+        />
+        <MenuItem
+          text={<T id={'delete_exchange_rate'}/>}
+          onClick={handleDeleteExchangeRate(ExchangeRate)}
+        />
+      </Menu>
+    ),
+    []
+  );
+
+  const columns = useMemo(
+    () => [
+      {
+        id: 'date',
+        Header: formatMessage({id:'date'}),
+        // accessor: 'date',
+        width: 150,
+      },
+      {
+        id: 'currency_code',
+        Header: formatMessage({id:'currency_code'}),
+        accessor: 'currency_code',
+        className: 'currency_code',
+        width: 150,
+      },
+      {
+        id: 'exchange_rate',
+        Header: formatMessage({id:'exchange_rate'}),
+        accessor: 'exchange_rate',
+        className: 'exchange_rate',
+        width: 150,
+      },
+      {
+        id: 'actions',
+        Header: '',
+        Cell: ({ cell }) => (
+          <Popover
+            content={actionMenuList(cell.row.original)}
+            position={Position.RIGHT_BOTTOM}
+          >
+            <Button icon={<Icon icon='ellipsis-h' />} />
+          </Popover>
+        ),
+        className: 'actions',
+        width: 50,
+        disableResizing: false,
+      },
+    ],
+    [actionMenuList]
+  );
+  const selectionColumn = useMemo(
+    () => ({
+      minWidth: 42,
+      width: 42,
+      maxWidth: 42,
+    }),
+    []
+  );
+
+  const handelFetchData = useCallback(
+    (...params) => {
+      onFetchData && onFetchData(...params);
+    },
+    [onFetchData]
+  );
+
+  const handelSelectedRowsChange = useCallback(
+    (selectRows) => {
+      onSelectedRowsChange &&
+        onSelectedRowsChange(selectRows.map((c) => c.original));
+    },
+    [onSelectedRowsChange]
+  );
+
+  return (
+    <DataTable
+      columns={columns}
+      data={exchangeRatesList}
+      onFetchData={handelFetchData}
+      manualSortBy={true}
+      selectionColumn={selectionColumn}
+      expandable={true}
+      treeGraph={true}
+      onSelectedRowsChange={handelSelectedRowsChange}
+      spinnerProps={{ size: 30 }}
+    />
+  );
+}
+
+export default compose(
+  DialogConnect,
+  withExchangeRatesActions,
+  withExchangeRates
+)(ExchangeRateTable);

client/src/containers/FinancialStatements/ExchangeRates/withExchangeRates.js

@@ -0,0 +1,8 @@
+import { connect } from 'react-redux';
+import { getResourceViews } from 'store/customViews/customViews.selectors';
+
+const mapStateToProps = (state, props) => ({
+  exchangeRatesList: Object.values(state.exchangeRates.exchangeRates),
+});
+
+export default connect(mapStateToProps);

client/src/containers/FinancialStatements/ExchangeRates/withExchangeRatesActions.js

@@ -0,0 +1,21 @@
+import { connect } from 'react-redux';
+import {
+  submitExchangeRate,
+  fetchExchangeRates,
+  deleteExchangeRate,
+  editExchangeRate,
+} from 'store/ExchangeRate/exchange.actions';
+
+export const mapActionsToProps = (dispatch) => ({
+  requestSubmitExchangeRate: (form) => dispatch(submitExchangeRate({ form })),
+  requestFetchExchangeRates: () => dispatch(fetchExchangeRates()),
+  requestDeleteExchangeRate: (id) => dispatch(deleteExchangeRate(id)),
+  requestEditExchangeRate: (id, form) => dispatch(editExchangeRate(id, form)),
+  addExchangeRatesTableQueries: (queries) =>
+    dispatch({
+      type: 'ExchangeRates_TABLE_QUERIES_ADD',
+      queries,
+    }),
+});
+
+export default connect(null, mapActionsToProps);

client/src/containers/Items/ItemCategoriesTable.js

@@ -12,6 +12,7 @@ import {
   MenuItem,
   Position,
 } from '@blueprintjs/core';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 const ItemsCategoryList = ({
   categories,
@@ -22,6 +23,8 @@ const ItemsCategoryList = ({
   count,
   onSelectedRowsChange,
 }) => {
+
+  const {formatMessage} = useIntl();
   const handelEditCategory = (category) => () => {
     openDialog('item-form', { action: 'edit', id: category.id });
     onEditCategory(category.id);
@@ -33,9 +36,9 @@ const ItemsCategoryList = ({
 
   const actionMenuList = (category) => (
     <Menu>
-      <MenuItem text='Edit Category' onClick={handelEditCategory(category)} />
+      <MenuItem text={<T id={'edit_category'} />} onClick={handelEditCategory(category)} />
       <MenuItem
-        text='Delete Category'
+        text={<T id={'delete_category'}/>}
         onClick={handleDeleteCategory(category)}
       />
     </Menu>
@@ -44,20 +47,20 @@ const ItemsCategoryList = ({
   const columns = useMemo(() => [
     {
       id: 'name',
-      Header: 'Category Name',
+      Header: formatMessage({id:'category_name'}),
       accessor: 'name',
       width: 150,
     },
     {
       id: 'description',
-      Header: 'Description',
+      Header: formatMessage({id:'description'}),
       accessor: 'description',
       className: 'description',
       width: 150,
     },
     {
       id: 'count',
-      Header: 'Count',
+      Header: formatMessage({id:'count'}),
       accessor: (r) => r.count || '',
       className: 'count',
       width: 50,

client/src/containers/Items/ItemForm.js

@@ -26,6 +26,7 @@ import {useHistory} from 'react-router-dom';
 import Dragzone from 'components/Dragzone';
 import MediaConnect from 'connectors/Media.connect';
 import useMedia from 'hooks/useMedia';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 const ItemForm = ({
   requestSubmitItem,
@@ -49,14 +50,17 @@ const ItemForm = ({
   } = useMedia({
     saveCallback: requestSubmitMedia,
     deleteCallback: requestDeleteMedia,
-  })
+  });
 
-  const ItemTypeDisplay = useMemo(() => ([
+  const ItemTypeDisplay = useMemo(
+    () => [
       { value: null, label: 'Select Item Type' },
       { value: 'service', label: 'Service' },
       { value: 'inventory', label: 'Inventory' },
-    { value: 'non-inventory', label: 'Non-Inventory' }
+      { value: 'non-inventory', label: 'Non-Inventory' },
-  ]), []);
+    ],
+    []
+  );
 
   const validationSchema = Yup.object().shape({
     active: Yup.boolean(),
@@ -73,10 +77,11 @@ const ItemForm = ({
       otherwise: Yup.number().nullable(),
     }),
     category_id: Yup.number().nullable(),
-    stock: Yup.string() || Yup.boolean()
+    stock: Yup.string() || Yup.boolean(),
   });
 
-  const initialValues = useMemo(() => ({
+  const initialValues = useMemo(
+    () => ({
       active: true,
       name: '',
       type: '',
@@ -88,7 +93,9 @@ const ItemForm = ({
       inventory_account_id: null,
       category_id: null,
       note: '',
-  }), []);
+    }),
+    []
+  );
 
   const {
     getFieldProps,
@@ -107,9 +114,10 @@ const ItemForm = ({
       const saveItem = (mediaIds) => {
         const formValues = { ...values, media_ids: mediaIds };
 
-        return requestSubmitItem(formValues).then((response) => {
+        return requestSubmitItem(formValues)
+          .then((response) => {
             AppToaster.show({
-            message: 'The_Items_has_been_submit'
+              message: 'The_Items_has_been_submit',
             });
             setSubmitting(false);
             history.push('/dashboard/items');
@@ -119,19 +127,26 @@ const ItemForm = ({
           });
       };
 
-      Promise.all([
+      Promise.all([saveMedia(), deleteMedia()]).then(
-        saveMedia(),
+        ([savedMediaResponses]) => {
-        deleteMedia(),
+          const mediaIds = savedMediaResponses.map((res) => res.data.media.id);
-      ]).then(([savedMediaResponses]) => {
-        const mediaIds = savedMediaResponses.map(res => res.data.media.id);
           return saveItem(mediaIds);
-      });
         }
+      );
+    },
   });
 
-  const accountItem = useCallback((item, { handleClick }) => (
+  const accountItem = useCallback(
-    <MenuItem key={item.id} text={item.name} label={item.code} onClick={handleClick} />
+    (item, { handleClick }) => (
-  ), []);
+      <MenuItem
+        key={item.id}
+        text={item.name}
+        label={item.code}
+        onClick={handleClick}
+      />
+    ),
+    []
+  );
 
   // Filter Account Items
   const filterAccounts = (query, account, _index, exactMatch) => {
@@ -144,27 +159,37 @@ const ItemForm = ({
     }
   };
 
-  const onItemAccountSelect = useCallback((filedName) => {
+  const onItemAccountSelect = useCallback(
+    (filedName) => {
       return (account) => {
         setSelectedAccounts({
           ...selectedAccounts,
-        [filedName]: account
+          [filedName]: account,
         });
         setFieldValue(filedName, account.id);
       };
-  }, [setFieldValue, selectedAccounts]);
+    },
+    [setFieldValue, selectedAccounts]
+  );
 
-  const categoryItem = useCallback((item, { handleClick }) => (
+  const categoryItem = useCallback(
+    (item, { handleClick }) => (
       <MenuItem text={item.name} onClick={handleClick} />
-  ), []);
+    ),
+    []
+  );
 
-  const getSelectedAccountLabel = useCallback((fieldName, defaultLabel) => {
+  const getSelectedAccountLabel = useCallback(
+    (fieldName, defaultLabel) => {
       return typeof selectedAccounts[fieldName] !== 'undefined'
-      ? selectedAccounts[fieldName].name : defaultLabel;
+        ? selectedAccounts[fieldName].name
-  }, [selectedAccounts]);
+        : defaultLabel;
+    },
+    [selectedAccounts]
+  );
 
-  const requiredSpan = useMemo(() => (<span class="required">*</span>), []);
+  const requiredSpan = useMemo(() => <span class='required'>*</span>, []);
-  const infoIcon = useMemo(() => (<Icon icon="info-circle" iconSize={12} />), []);
+  const infoIcon = useMemo(() => <Icon icon='info-circle' iconSize={12} />, []);
 
   const handleMoneyInputChange = (fieldKey) => (e, value) => {
     setFieldValue(fieldKey, value);
@@ -178,31 +203,36 @@ const ItemForm = ({
     setFiles(_files.filter((file) => file.uploaded === false));
   }, []);
 
-  const handleDeleteFile = useCallback((_deletedFiles) => {
+  const handleDeleteFile = useCallback(
+    (_deletedFiles) => {
       _deletedFiles.forEach((deletedFile) => {
         if (deletedFile.uploaded && deletedFile.metadata.id) {
-        setDeletedFiles([
+          setDeletedFiles([...deletedFiles, deletedFile.metadata.id]);
-          ...deletedFiles, deletedFile.metadata.id,
-        ]);
         }
       });
-  }, [setDeletedFiles, deletedFiles]);  
+    },
+    [setDeletedFiles, deletedFiles]
+  );
 
-  const handleCancelClickBtn = () => { history.goBack(); };
+  const handleCancelClickBtn = () => {
+    history.goBack();
+  };
 
   return (
     <div class='item-form'>
       <form onSubmit={handleSubmit}>
-        <div class="item-form__primary-section">
+        <div class='item-form__primary-section'>
           <Row>
             <Col xs={7}>
               <FormGroup
                 medium={true}
-                label={'Item Type'}
+                label={<T id={'item_type'} />}
                 labelInfo={requiredSpan}
                 className={'form-group--item-type'}
-                intent={(errors.type && touched.type) && Intent.DANGER}
+                intent={errors.type && touched.type && Intent.DANGER}
-                helperText={<ErrorMessage {...{errors, touched}} name="type" />}
+                helperText={
+                  <ErrorMessage {...{ errors, touched }} name='type' />
+                }
                 inline={true}
               >
                 <HTMLSelect
@@ -213,45 +243,53 @@ const ItemForm = ({
               </FormGroup>
 
               <FormGroup
-                label={'Item Name'}
+                label={<T id={'item_name'} />}
                 labelInfo={requiredSpan}
                 className={'form-group--item-name'}
-                intent={(errors.name && touched.name) && Intent.DANGER}
+                intent={errors.name && touched.name && Intent.DANGER}
-                helperText={<ErrorMessage {...{errors, touched}} name="name" />}
+                helperText={
+                  <ErrorMessage {...{ errors, touched }} name='name' />
+                }
                 inline={true}
               >
                 <InputGroup
                   medium={true}
-                  intent={(errors.name && touched.name) && Intent.DANGER}
+                  intent={errors.name && touched.name && Intent.DANGER}
                   {...getFieldProps('name')}
                 />
               </FormGroup>
 
               <FormGroup
-                label={'SKU'}
+                label={<T id={'sku'} />}
                 labelInfo={infoIcon}
                 className={'form-group--item-sku'}
-                intent={(errors.sku && touched.sku) && Intent.DANGER}
+                intent={errors.sku && touched.sku && Intent.DANGER}
-                helperText={<ErrorMessage {...{errors, touched}} name="sku" />}
+                helperText={
+                  <ErrorMessage {...{ errors, touched }} name='sku' />
+                }
                 inline={true}
               >
                 <InputGroup
                   medium={true}
-                  intent={(errors.sku && touched.sku) && Intent.DANGER}
+                  intent={errors.sku && touched.sku && Intent.DANGER}
                   {...getFieldProps('sku')}
                 />
               </FormGroup>
 
               <FormGroup
-                label={'Category'}
+                label={<T id={'category'} />}
                 labelInfo={infoIcon}
                 inline={true}
-                intent={(errors.category_id && touched.category_id) && Intent.DANGER}
+                intent={
-                helperText={<ErrorMessage {...{errors, touched}} name="category" />}
+                  errors.category_id && touched.category_id && Intent.DANGER
+                }
+                helperText={
+                  <ErrorMessage {...{ errors, touched }} name='category' />
+                }
                 className={classNames(
                   'form-group--select-list',
                   'form-group--category',
-                  Classes.FILL,
+                  Classes.FILL
                 )}
               >
                 <Select
@@ -264,7 +302,10 @@ const ItemForm = ({
                   <Button
                     fill={true}
                     rightIcon='caret-down'
-                    text={getSelectedAccountLabel('category_id', 'Select category')}
+                    text={getSelectedAccountLabel(
+                      'category_id',
+                      'Select category'
+                    )}
                   />
                 </Select>
               </FormGroup>
@@ -276,7 +317,7 @@ const ItemForm = ({
               >
                 <Checkbox
                   inline={true}
-                  label={'Active'}
+                  label={<T id={'active'}/>}
                   defaultChecked={values.active}
                   {...getFieldProps('active')}
                 />
@@ -289,20 +330,25 @@ const ItemForm = ({
                 onDrop={handleDropFiles}
                 onDeleteFile={handleDeleteFile}
                 hint={'Attachments: Maxiumum size: 20MB'}
-                className={'mt2'} />
+                className={'mt2'}
+              />
             </Col>
           </Row>
         </div>
 
         <Row gutterWidth={16} className={'item-form__accounts-section'}>
           <Col width={404}>
-            <h4>Purchase Information</h4>
+            <h4><T id={'purchase_information'}/></h4>
 
             <FormGroup
-              label={'Selling Price'}
+              label={<T id={'selling_price'}/>}
               className={'form-group--item-selling-price'}
-              intent={(errors.selling_price && touched.selling_price) && Intent.DANGER}
+              intent={
-              helperText={<ErrorMessage {...{errors, touched}} name="selling_price" />}
+                errors.selling_price && touched.selling_price && Intent.DANGER
+              }
+              helperText={
+                <ErrorMessage {...{ errors, touched }} name='selling_price' />
+              }
               inline={true}
             >
               <MoneyInputGroup
@@ -311,19 +357,31 @@ const ItemForm = ({
                 onChange={handleMoneyInputChange('selling_price')}
                 inputGroupProps={{
                   medium: true,
-                  intent: (errors.selling_price && touched.selling_price) && Intent.DANGER,
+                  intent:
-                }} />
+                    errors.selling_price &&
+                    touched.selling_price &&
+                    Intent.DANGER,
+                }}
+              />
             </FormGroup>
 
             <FormGroup
-              label={'Account'}
+              label={<T id={'account'} />}
               labelInfo={infoIcon}
               inline={true}
-              intent={(errors.sell_account_id && touched.sell_account_id) && Intent.DANGER}
+              intent={
-              helperText={<ErrorMessage {...{errors, touched}} name="sell_account_id" />}
+                errors.sell_account_id &&
+                touched.sell_account_id &&
+                Intent.DANGER
+              }
+              helperText={
+                <ErrorMessage {...{ errors, touched }} name='sell_account_id' />
+              }
               className={classNames(
-                'form-group--sell-account', 'form-group--select-list',
+                'form-group--sell-account',
-                Classes.FILL)}
+                'form-group--select-list',
+                Classes.FILL
+              )}
             >
               <Select
                 items={accounts}
@@ -335,7 +393,10 @@ const ItemForm = ({
                 <Button
                   fill={true}
                   rightIcon='caret-down'
-                  text={getSelectedAccountLabel('sell_account_id', 'Select account')}
+                  text={getSelectedAccountLabel(
+                    'sell_account_id',
+                    'Select account'
+                  )}
                 />
               </Select>
             </FormGroup>
@@ -343,14 +404,16 @@ const ItemForm = ({
 
           <Col width={404}>
             <h4>
-              Sales Information
+              <T id={'sales_information'} />
             </h4>
 
             <FormGroup
-              label={'Cost Price'}
+              label={<T id={'cost_price'} />}
               className={'form-group--item-cost-price'}
-              intent={(errors.cost_price && touched.cost_price) && Intent.DANGER}
+              intent={errors.cost_price && touched.cost_price && Intent.DANGER}
-              helperText={<ErrorMessage {...{errors, touched}} name="cost_price" />}
+              helperText={
+                <ErrorMessage {...{ errors, touched }} name='cost_price' />
+              }
               inline={true}
             >
               <MoneyInputGroup
@@ -359,20 +422,29 @@ const ItemForm = ({
                 onChange={handleMoneyInputChange('cost_price')}
                 inputGroupProps={{
                   medium: true,
-                  intent: (errors.cost_price && touched.cost_price) && Intent.DANGER,
+                  intent:
-                }} />
+                    errors.cost_price && touched.cost_price && Intent.DANGER,
+                }}
+              />
             </FormGroup>
 
             <FormGroup
-              label={'Account'}
+              label={<T id={'account'} />}
               labelInfo={infoIcon}
               inline={true}
-              intent={(errors.cost_account_id && touched.cost_account_id) && Intent.DANGER}
+              intent={
-              helperText={<ErrorMessage {...{errors, touched}} name="cost_account_id" />}
+                errors.cost_account_id &&
+                touched.cost_account_id &&
+                Intent.DANGER
+              }
+              helperText={
+                <ErrorMessage {...{ errors, touched }} name='cost_account_id' />
+              }
               className={classNames(
                 'form-group--cost-account',
                 'form-group--select-list',
-                Classes.FILL)}
+                Classes.FILL
+              )}
             >
               <Select
                 items={accounts}
@@ -384,7 +456,10 @@ const ItemForm = ({
                 <Button
                   fill={true}
                   rightIcon='caret-down'
-                  text={getSelectedAccountLabel('cost_account_id', 'Select account')}
+                  text={getSelectedAccountLabel(
+                    'cost_account_id',
+                    'Select account'
+                  )}
                 />
               </Select>
             </FormGroup>
@@ -394,18 +469,28 @@ const ItemForm = ({
         <Row className={'item-form__accounts-section mt2'}>
           <Col width={404}>
             <h4>
-              Inventory Information
+              <T id={'inventory_information'} />
             </h4>
 
             <FormGroup
-              label={'Inventory Account'}
+              label={<T id={'inventory_account'}/>}
               inline={true}
-              intent={(errors.inventory_account_id && touched.inventory_account_id) && Intent.DANGER}
+              intent={
-              helperText={<ErrorMessage {...{errors, touched}} name="inventory_account_id" />}
+                errors.inventory_account_id &&
+                touched.inventory_account_id &&
+                Intent.DANGER
+              }
+              helperText={
+                <ErrorMessage
+                  {...{ errors, touched }}
+                  name='inventory_account_id'
+                />
+              }
               className={classNames(
                 'form-group--item-inventory_account',
                 'form-group--select-list',
-                Classes.FILL)}
+                Classes.FILL
+              )}
             >
               <Select
                 items={accounts}
@@ -417,13 +502,16 @@ const ItemForm = ({
                 <Button
                   fill={true}
                   rightIcon='caret-down'
-                  text={getSelectedAccountLabel('inventory_account_id','Select account')}
+                  text={getSelectedAccountLabel(
+                    'inventory_account_id',
+                    'Select account'
+                  )}
                 />
               </Select>
             </FormGroup>
 
             <FormGroup
-              label={'Opening Stock'}
+              label={<T id={'opening_stock'}/>}
               className={'form-group--item-stock'}
               // intent={errors.cost_price && Intent.DANGER}
               // helperText={formik.errors.stock && formik.errors.stock}
@@ -440,11 +528,13 @@ const ItemForm = ({
 
         <div class='form__floating-footer'>
           <Button intent={Intent.PRIMARY} type='submit'>
-            Save
+            <T id={'save'}/>
           </Button>
 
-          <Button className={'ml1'}>Save as Draft</Button>
+          <Button className={'ml1'}><T id={'save_as_draft'}/></Button>
-          <Button className={'ml1'} onClick={handleCancelClickBtn}>Close</Button>
+          <Button className={'ml1'} onClick={handleCancelClickBtn}>
+            <T id={'close'}/>
+          </Button>
         </div>
       </form>
     </div>
@@ -455,5 +545,5 @@ export default compose(
   AccountsConnect,
   ItemsConnect,
   ItemCategoryConnect,
-  MediaConnect,
+  MediaConnect
 )(ItemForm);

client/src/containers/Items/ItemsActionsBar.js

@@ -21,6 +21,7 @@ import DialogConnect from 'connectors/Dialog.connector';
 import withResourceDetail from 'containers/Resources/withResourceDetails';
 import withItems from 'containers/Items/withItems';
 import { If } from 'components';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 const ItemsActionsBar = ({
   openDialog,
@@ -69,7 +70,7 @@ const ItemsActionsBar = ({
           <Button
             className={classNames(Classes.MINIMAL, 'button--table-views')}
             icon={<Icon icon='table' />}
-            text='Table Views'
+            text={<T id={'table_views'}/>}
             rightIcon={'caret-down'}
           />
         </Popover>
@@ -79,14 +80,14 @@ const ItemsActionsBar = ({
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon='plus' />}
-          text='New Item'
+          text={<T id={'new_item'}/>}
           onClick={onClickNewItem}
         />
 
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon='plus' />}
-          text='New Category'
+          text={<T id={'new_category'}/>}
           onClick={onClickNewCategory}
         />
 
@@ -97,7 +98,7 @@ const ItemsActionsBar = ({
         >
           <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>
@@ -107,19 +108,19 @@ const ItemsActionsBar = ({
             className={Classes.MINIMAL}
             intent={Intent.DANGER}
             icon={<Icon icon='trash' />}
-            text='Delete'
+            text={<T id={'delete'}/>}
           />
         </If>
 
         <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/Items/ItemsCategoryActionsBar.js

@@ -21,6 +21,7 @@ import FilterDropdown from 'components/FilterDropdown';
 import withResourceDetail from 'containers/Resources/withResourceDetails';
 import withDashboard from 'containers/Dashboard/withDashboard';
 
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 const ItemsCategoryActionsBar = ({
   resourceName = 'item_category',
@@ -53,7 +54,7 @@ const ItemsCategoryActionsBar = ({
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon='plus' />}
-          text='New Category'
+          text={<T id={'new_category'}/>}
           onClick={onClickNewCategory}
         />
         <Popover
@@ -64,7 +65,7 @@ const ItemsCategoryActionsBar = ({
         >
           <Button
             className={classNames(Classes.MINIMAL, 'button--filter')}
-            text='Filter'
+            text={<T id={'filter'}/>}
             icon={<Icon icon='filter' />}
           />
         </Popover>
@@ -73,7 +74,7 @@ const ItemsCategoryActionsBar = ({
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon='trash' iconSize={15} />}
-            text='Delete'
+            text={<T id={'delete'}/>}
             intent={Intent.DANGER}
             onClick={handleDeleteCategory}
           />
@@ -82,12 +83,12 @@ const ItemsCategoryActionsBar = ({
         <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/Items/ItemsDataTable.js

@@ -15,6 +15,9 @@ import Money from 'components/Money';
 import withItems from 'containers/Items/withItems';
 import LoadingIndicator from 'components/LoadingIndicator';
 
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
+
 const ItemsDataTable = ({
   loading,
 
@@ -27,6 +30,8 @@ const ItemsDataTable = ({
   onFetchData,
   onSelectedRowsChange,
 }) => {
+  
+  const {formatMessage} = useIntl();
   const [initialMount, setInitialMount] = useState(false);
 
   useEffect(() => {
@@ -40,35 +45,35 @@ const ItemsDataTable = ({
   
   const actionMenuList = useCallback((item) =>
     (<Menu>
-      <MenuItem text="View Details" />
+      <MenuItem text={<T id={'view_details'}/>} />
       <MenuDivider />
-      <MenuItem text="Edit Item" onClick={handleEditItem(item)} />
+      <MenuItem text={<T id={'edit_item'}/>} onClick={handleEditItem(item)} />
-      <MenuItem text="Delete Item" onClick={handleDeleteItem(item)} />
+      <MenuItem text={<T id={'delete_item'}/>} onClick={handleDeleteItem(item)} />
     </Menu>), [handleEditItem, handleDeleteItem]);
 
   const columns = useMemo(() => [
     {
-      Header: 'Item Name',
+      Header: formatMessage({id:'item_name'}),
       accessor: 'name',
       className: "actions",
     },
     {
-      Header: 'SKU',
+      Header: formatMessage({id:'sku'}),
       accessor: 'sku',
       className: "sku",
     },
     {
-      Header: 'Category',
+      Header: formatMessage({id:'category'}),
       accessor: 'category.name',
       className: 'category',
     },
     {
-      Header: 'Sell Price',
+      Header: formatMessage({id:'sell_price'}),
       accessor: row => (<Money amount={row.sell_price} currency={'USD'} />),
       className: 'sell-price',
     },
     {
-      Header: 'Cost Price',
+      Header: formatMessage({id:'cost_price'}),
       accessor: row => (<Money amount={row.cost_price} currency={'USD'} />),
       className: 'cost-price',
     },

client/src/containers/Items/ItemsList.js

@@ -23,6 +23,7 @@ import withDashboardActions from 'containers/Dashboard/withDashboard';
 import withItemsActions from 'containers/Items/withItemsActions';
 import withViewsActions from 'containers/Views/withViewsActions';
 
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 function ItemsList({
   // #withDashboard
@@ -144,8 +145,8 @@ function ItemsList({
               onSelectedRowsChange={handleSelectedRowsChange} />
 
             <Alert
-              cancelButtonText="Cancel"
+              cancelButtonText={<T id={'cancel'}/>}
-              confirmButtonText="Move to Trash"
+              confirmButtonText={<T id={'move_to_trash'}/>}
               icon="trash"
               intent={Intent.DANGER}
               isOpen={deleteItem}

client/src/containers/Views/ViewFormPage.js

@@ -11,6 +11,7 @@ import withDashboard from 'containers/Dashboard/withDashboard';
 import AppToaster from 'components/AppToaster';
 import {compose} from 'utils';
 import { If } from 'components';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 // @flow
 function ViewFormPage({
@@ -83,8 +84,8 @@ function ViewFormPage({
             onDelete={handleDeleteView} />
 
           <Alert
-            cancelButtonText="Cancel"
+            cancelButtonText={<T id={'cancel'}/>}
-            confirmButtonText="Move to Trash"
+            confirmButtonText={<T id={'move_to_trash'}/>}
             icon="trash"
             intent={Intent.DANGER}
             isOpen={stateDeleteView}
@@ -98,7 +99,7 @@ function ViewFormPage({
         </If>
 
         <If condition={fetchHook.error}>
-          <h4>Something wrong</h4>
+          <h4><T id={'something_wrong'}/></h4>
         </If>
       </DashboardPageContent>
     </DashboardInsider>   

client/src/lang/en/index.js

@@ -1,30 +1,184 @@
-
-
 export default {
-  'hello_world': 'Hello World',
+  hello_world: 'Hello World',
-  'email_or_phone_number': 'Email or phone number',
+  email_or_phone_number: 'Email or phone number',
-  'password': 'Password',
+  password: 'Password',
-  'login': 'Login',
+  login: 'Login',
-  'invalid_email_or_phone_numner': 'Invalid email or phone number.',
+  invalid_email_or_phone_numner: 'Invalid email or phone number.',
-  'required': 'Required',
+  required: 'Required',
-  'reset_password': 'Reset Password',
+  reset_password: 'Reset Password',
-  'the_user_has_been_suspended_from_admin': 'The user has been suspended from the administrator.',
+  the_user_has_been_suspended_from_admin:
-  'email_and_password_entered_did_not_match': 'The email and password you entered did not match our records.',
+    'The user has been suspended from the administrator.',
-  'field_name_must_be_number': 'field_name_must_be_number',
+  email_and_password_entered_did_not_match:
-  'name': 'Name',
+    'The email and password you entered did not match our records.',
-  "search": "Search",
+  field_name_must_be_number: 'field_name_must_be_number',
-  'reference': 'Reference',
+  name: 'Name',
-  'date': 'Date',
+  search: 'Search',
-  'description': 'Description',
+  reference: 'Reference',
-  'from_date': 'From date',
+  date: 'Date',
-  'to_date': 'To date',
+  description: 'Description',
-  'accounting_basis': 'Accounting basis',
+  from_date: 'From date',
-  'report_date_range': 'Report date range',
+  to_date: 'To date',
-  'log_in': 'Log in',
+  accounting_basis: 'Accounting basis',
-  'forget_my_password': 'Forget my password',
+  report_date_range: 'Report date range',
-  'keep_me_logged_in': 'Keep me logged in',
+  log_in: 'Log in',
-  'create_an_account': 'Create an account',
+  forget_my_password: 'Forget my password',
-  'need_bigcapital_account?': 'Need a Bigcapital account ?',
+  keep_me_logged_in: 'Keep me logged in',
-  'show': 'Show',
+  create_an_account: 'Create an account',
-  'hide': 'Hide',
+  need_bigcapital_account: 'Need a Bigcapital account ?',
+  show: 'Show',
+  hide: 'Hide',
+  an_unexpected_error_occurred: 'An unexpected error occurred',
+  welcome_to_bigcapital: 'Welcome to Bigcapital',
+  enter_your_personal_information: ' Enter your personal information',
+  first_name: 'First Name',
+  last_name: 'Last Name',
+  phone_number: 'Phone Number',
+  you_email_address_is: 'You email address is',
+  you_will_use_this_address_to_sign_in_to_bigcapital:
+    'You will use this address to sign in to Bigcapital.',
+  signing_in_or_creating:
+    'By signing in or creating an account, you agree with our',
+  terms_conditions: 'Terms & Conditions',
+  and: 'and',
+  privacy_statement: 'Privacy Statement',
+  create_account: 'Create Account',
+  success: 'Success',
+  register_a_new_organization: 'Register a New Organization.',
+  you_have_a_bigcapital_account: 'You have a bigcapital account ?',
+ organization_name:'Organization Name',
+ email:'Email',
+ register:'Register',
+password_successfully_updated:'The Password for your account was successfully updated.',
+choose_a_new_password:'Choose a new password',
+you_remembered_your_password:'You remembered your password ?',
+new_password:'New Password',
+submit_new_password:'Submit new password',
+reset_your_password:'Reset Your Password',
+we_ll_send_you_a_link_to_reset_your_password:'Enter your email address and we’ll send you a link to reset your password.',
+send_password_reset_link:'Send password reset link',
+return_to_log_in:'Return to log in',
+sub_account:'Sub account?',
+account_type:'Account Type',
+account_name:'Account Name',
+account_code:'Account Code',
+parent_account:'Parent Account',
+edit:'Edit',
+submit:'Submit',
+close:'Close',
+edit_account:'Edit Account',
+new_account:'New Account',
+edit_currency:'Edit Currency',
+new_currency:'New Currency',
+currency_name:'Currency Name',
+currency_code:'Currency Code',
+edit_exchange_rate:'Edit Exchange Rate',
+new_exchange_rate:'New Exchange Rate',
+delete_exchange_rate:'Delete Exchange Rate',
+exchange_rate:'Exchange Rate',
+currency_code:'Currency Code',
+edit_invite:'Edit invite',
+edit_category:'Edit Category',
+delete_category:'Delete Category',
+new_category:'New Category',
+category_name:'Category Name',
+parent_category:'Parent Category',
+new:'New',
+new_category:'New Category',
+invite_user:'invite User',
+your_access_to_your_team:'Your teammate will get an email that gives them access to your team.',
+invite:'invite',
+count:'Count',
+item_type:'Item Type',
+item_name:'Item Name',
+sku:'SKU',
+category:'Category',
+account:'Account',
+sales_information:'Sales Information',
+purchase_information:'Purchase Information',
+selling_price:'Selling Price',
+cost_price:'Cost Price',
+inventory_information:'Inventory Information',
+inventory_account:'Inventory Account',
+opening_stock:'Opening Stock',
+save:'Save',
+save_as_draft:'Save as Draft',
+active:'Active',
+new_item:'New Item',
+table_views:'Table Views',
+delete:'Delete',
+import:'Import',
+export:'Export',
+filter:'Filter',
+view_details:'View Details',
+edit_item:'Edit Item',
+delete_item:'Delete Item',
+sell_price:'Sell Price',
+cancel:'Cancel',
+move_to_trash:'Move to Trash',
+save_new:'Save & New',
+journal_number:'Journal number',
+credit_usd:'Credit (USD)',
+debit_usd:'Debit (USD)',
+note:'Note',
+new_lines:'New lines',
+clear_all_lines:'Clear all lines',
+new_journal:'New Journal',
+publish_journal:'Publish Journal',
+edit_journal:'Edit Journal',
+delete_journal:'Delete Journal',
+amount:'Amount',
+journal_no:'Journal No.',
+status:'Status',
+transaction_type:'Transaction type',
+created_at:'Created At',
+archive:'Archive',
+inactivate:'Inactivate',
+inactivate_account:'Inactivate Account',
+delete_account:'Delete Account',
+code:'Code',
+type:'Type',
+normal:'Normal',
+balance:'Balance',
+something_wrong:'Something wrong',
+filters:'Filters',
+add_order:'Add order',
+expense_account:'Expense Account',
+payment_account:'Payment Account',
+new_expense:'New Expense',
+bulk_update:'Bulk Update',
+all_accounts:'All accounts',
+go_to_bigcapital_com:'← Go to bigcapital.com',
+currency:'Currency',
+new_conditional:'+ New Conditional'
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 };

client/src/routes/dashboard.js

@@ -7,7 +7,7 @@ export default [
   {
     path: `${BASE_URL}/homepage`,
     component: LazyLoader({
-      loader: () => import('containers/Homepage/Homepage')
+      loader: () => import('containers/Homepage/Homepage'),
     }),
   },
 
@@ -15,79 +15,76 @@ export default [
   {
     path: `${BASE_URL}/accounts`,
     component: LazyLoader({
-      loader: () => import('containers/Accounts/AccountsChart')
+      loader: () => import('containers/Accounts/AccountsChart'),
-    })
+    }),
   },
 
   // Custom views.
   {
     path: `${BASE_URL}/custom_views/:resource_slug/new`,
     component: LazyLoader({
-      loader: () => import('containers/Views/ViewFormPage')
+      loader: () => import('containers/Views/ViewFormPage'),
-    })
+    }),
   },
   {
     path: `${BASE_URL}/custom_views/:view_id/edit`,
     component: LazyLoader({
-      loader: () => import('containers/Views/ViewFormPage')
+      loader: () => import('containers/Views/ViewFormPage'),
-    })
+    }),
   },
 
   // Expenses.
   {
     path: `${BASE_URL}/expenses/new`,
     component: LazyLoader({
-      loader: () => import('containers/Expenses/ExpenseForm')
+      loader: () => import('containers/Expenses/ExpenseForm'),
     }),
   },
   {
     path: `${BASE_URL}/expenses`,
     component: LazyLoader({
-      loader: () => import('containers/Expenses/ExpensesList')
+      loader: () => import('containers/Expenses/ExpensesList'),
-    })
+    }),
   },
 
   // Accounting
   {
     path: `${BASE_URL}/accounting/make-journal-entry`,
     component: LazyLoader({
-      loader: () =>
+      loader: () => import('containers/Accounting/MakeJournalEntriesPage'),
-        import('containers/Accounting/MakeJournalEntriesPage')
     }),
   },
   {
     path: `${BASE_URL}/accounting/manual-journals/:id/edit`,
     component: LazyLoader({
-      loader: () =>
+      loader: () => import('containers/Accounting/MakeJournalEntriesPage'),
-        import('containers/Accounting/MakeJournalEntriesPage')
     }),
   },
   {
     path: `${BASE_URL}/accounting/manual-journals`,
     component: LazyLoader({
-      loader: () =>
+      loader: () => import('containers/Accounting/ManualJournalsList'),
-        import('containers/Accounting/ManualJournalsList')
     }),
   },
   {
     path: `${BASE_URL}/items/categories`,
     component: LazyLoader({
-      loader: () => import('containers/Items/ItemCategoriesList')
+      loader: () => import('containers/Items/ItemCategoriesList'),
-    })
+    }),
   },
   {
     path: `${BASE_URL}/items/new`,
     component: LazyLoader({
-      loader: () => import('containers/Items/ItemFormPage')
+      loader: () => import('containers/Items/ItemFormPage'),
-    })
+    }),
   },
 
   // Items
   {
     path: `${BASE_URL}/items`,
     component: LazyLoader({
-      loader: () => import('containers/Items/ItemsList')
+      loader: () => import('containers/Items/ItemsList'),
-    })
+    }),
   },
 
   // Financial Reports.
@@ -95,19 +92,15 @@ export default [
     path: `${BASE_URL}/accounting/general-ledger`,
     component: LazyLoader({
       loader: () =>
-        import(
+        import('containers/FinancialStatements/GeneralLedger/GeneralLedger'),
-          'containers/FinancialStatements/GeneralLedger/GeneralLedger'
+    }),
-        )
-    })
   },
   {
     path: `${BASE_URL}/accounting/balance-sheet`,
     component: LazyLoader({
       loader: () =>
-        import(
+        import('containers/FinancialStatements/BalanceSheet/BalanceSheet'),
-          'containers/FinancialStatements/BalanceSheet/BalanceSheet'
+    }),
-        )
-    })
   },
   {
     path: `${BASE_URL}/accounting/trial-balance-sheet`,
@@ -115,8 +108,8 @@ export default [
       loader: () =>
         import(
           'containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet'
-        )
+        ),
-    })
+    }),
   },
   {
     path: `${BASE_URL}/accounting/profit-loss-sheet`,
@@ -124,14 +117,20 @@ export default [
       loader: () =>
         import(
           'containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet'
-        )
+        ),
-    })
+    }),
   },
   {
     path: `${BASE_URL}/accounting/journal-sheet`,
+    component: LazyLoader({
+      loader: () => import('containers/FinancialStatements/Journal/Journal'),
+    }),
+  },
+  {
+    path: `${BASE_URL}/ExchangeRates`,
     component: LazyLoader({
       loader: () =>
-        import('containers/FinancialStatements/Journal/Journal')
+        import('containers/FinancialStatements/ExchangeRates/ExchangeRate'),
-    })
+    }),
   },
 ];

client/src/store/ExchangeRate/exchange.actions.js

@@ -0,0 +1,57 @@
+import ApiService from 'services/ApiService';
+import t from 'store/types';
+
+export const fetchExchangeRates = () => {
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      dispatch({
+        type: t.SET_DASHBOARD_REQUEST_LOADING,
+      });
+      ApiService.get('exchange_rates')
+        .then((response) => {
+          dispatch({
+            type: t.EXCHANGE_RATE_LIST_SET,
+            exchange_rates: response.data.exchange_rates.results,
+          });
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
+};
+
+export const submitExchangeRate = ({ form }) => {
+  return (dispatch) => {
+    return ApiService.post('exchange_rates', form);
+  };
+};
+
+export const deleteExchangeRate = (id) => {
+  return (dispatch) => ApiService.delete(`exchange_rates/${id}`);
+};
+
+export const editExchangeRate = (id, form) => {
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      ApiService.post(`exchange_rates/${id}`, form)
+        .then((response) => {
+          dispatch({ type: t.CLEAR_EXCHANGE_RATE_FORM_ERRORS });
+          resolve(response);
+        })
+        .catch((error) => {
+          const { response } = error;
+          const { data } = response;
+          const { errors } = data;
+
+          dispatch({ type: t.CLEAR_EXCHANGE_RATE_FORM_ERRORS });
+          if (errors) {
+            dispatch({ type: t.CLEAR_EXCHANGE_RATE_FORM_ERRORS, errors });
+          }
+          reject(error);
+        });
+    });
+};

client/src/store/ExchangeRate/exchange.reducer.js

@@ -0,0 +1,20 @@
+import { createReducer } from '@reduxjs/toolkit';
+import t from 'store/types';
+
+const initialState = {
+  exchangeRates: {},
+};
+
+export default createReducer(initialState, {
+  [t.EXCHANGE_RATE_LIST_SET]: (state, action) => {
+    const _exchangeRates = {};
+    action.exchange_rates.forEach((exchange_rate) => {
+      _exchangeRates[exchange_rate.id] = exchange_rate;
+    });
+
+    state.exchangeRates = {
+      ...state.exchangeRates,
+      ..._exchangeRates,
+    };
+  },
+});

client/src/store/ExchangeRate/exchange.type.js

@@ -0,0 +1,7 @@
+export default {
+  EXCHANGE_RATE_DATA_TABLE: 'EXCHANGE_RATE_DATA_TABLE',
+  EXCHANGE_RATE_DELETE: 'EXCHANGE_RATE_DELETE',
+  EXCHANGE_RATE_LIST_SET: 'EXCHANGE_RATE_LIST_SET',
+  CLEAR_EXCHANGE_RATE_FORM_ERRORS: 'CLEAR_EXCHANGE_RATE_FORM_ERRORS',
+  ExchangeRates_TABLE_QUERIES_ADD: 'ExchangeRates_TABLE_QUERIES_ADD',
+};

client/src/store/reducers.js

@@ -15,6 +15,7 @@ import itemCategories from './itemCategories/itemsCategory.reducer';
 import settings from './settings/settings.reducer';
 import manualJournals from './manualJournals/manualJournals.reducers';
 import globalSearch from './search/search.reducer';
+import exchangeRates from './ExchangeRate/exchange.reducer'
 
 export default combineReducers({
   authentication,
@@ -32,4 +33,6 @@ export default combineReducers({
   itemCategories,
   settings,
   globalSearch,
+  exchangeRates
+
 });

client/src/store/types.js

@@ -15,6 +15,7 @@ import itemCategories from './itemCategories/itemsCategory.type';
 import settings from './settings/settings.type';
 import search from './search/search.type';
 import register from './registers/register.type';
+import exchangeRate from './ExchangeRate/exchange.type';
 
 export default {
   ...authentication,
@@ -34,4 +35,6 @@ export default {
   ...accounting,
   ...search,
   ...register,
+  ...exchangeRate,
+
 };

client/src/style/App.scss

@@ -49,6 +49,7 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
 @import 'pages/invite-form.scss';
 @import "pages/currency";
 @import "pages/invite-user.scss";
+@import 'pages/exchange-rate.scss';
  
 // Views
 @import 'views/filter-dropdown';

client/src/style/pages/exchange-rate.scss

@@ -0,0 +1,23 @@
+.exchangeRate{
+
+
+  &-menu {
+    width: 240px;
+  }
+}
+
+.dialog--exchangeRate-form {
+
+ 
+
+  .bp3-dialog-body {
+    .bp3-form-group.bp3-inline {
+      .bp3-label {
+        min-width: 140px;
+      }
+      .bp3-form-content {
+        width: 250px;
+      }
+    }
+  }
+}

server/src/models/ExchangeRate.js

@@ -2,7 +2,6 @@ import bcrypt from 'bcryptjs';
 import { Model } from 'objection';
 import TenantModel from '@/models/TenantModel';
 
-
 export default class ExchangeRate extends TenantModel {
   /**
    * Table name.