WIP / exchangeRate / localize

client/src/containers/Accounting/MakeJournalEntriesFooter.js

@@ -1,9 +1,6 @@
-import React, {useMemo} from 'react';
-import {
-  Intent,
-  Button,
-} from '@blueprintjs/core';
-import { FormattedList } from 'react-intl';
+import React, { useMemo } from 'react';
+import { Intent, Button } from '@blueprintjs/core';
+import { FormattedMessage as T, useIntl } 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
@@ -29,28 +27,31 @@ export default function MakeJournalEntriesFooter({
           className={'ml1'}
           name={'save_and_new'}
           onClick={() => {
-            onSubmitClick({ publish: true, redirect: false }); 
-          }}>
-          Save & New
+            onSubmitClick({ publish: true, redirect: false });
+          }}
+        >
+          <T id={'save_new'} />
         </Button>
 
         <Button
           disabled={isSubmitting}
           className={'button-secondary ml1'}
           onClick={() => {
-            onSubmitClick({ publish: false, redirect: false }); 
-          }}>
-          Save as Draft
+            onSubmitClick({ publish: false, redirect: false });
+          }}
+        >
+          <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,11 +1,8 @@
-import React, {useState, useMemo, useEffect, useCallback} from 'react';
-import {
-  Button,
-  Intent,
-} from '@blueprintjs/core';
+import React, { useState, useMemo, useEffect, useCallback } from 'react';
+import { Button, Intent } from '@blueprintjs/core';
 import DataTable from 'components/DataTable';
 import Icon from 'components/Icon';
-import { compose, formattedAmount} from 'utils';
+import { compose, formattedAmount } from 'utils';
 import {
   AccountsListFieldCell,
   MoneyFieldCell,
@@ -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 = () => {
@@ -32,47 +29,47 @@ const ActionsCellRenderer = ({
   };
 
   return (
-    <Button 
-      icon={<Icon icon="times-circle" iconSize={14} />}
+    <Button
+      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)) {
-    return (<span>{ 'Total USD' }</span>);
+  if (props.data.length === props.row.index + 2) {
+    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)) {
-      const total = props.data.reduce((total, entry) => {
+  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;
 
       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,116 +82,128 @@ function MakeJournalEntriesTable({
   initialValues,
 }) {
   const [rows, setRow] = useState([]);
-
-  useEffect(() => { 
+  const { formatMessage } = useIntl();
+  useEffect(() => {
     setRow([
-      ...initialValues.entries.map((e) => ({ ...e, rowType: 'editor'})),
+      ...initialValues.entries.map((e) => ({ ...e, rowType: 'editor' })),
       defaultRow,
       defaultRow,
-    ])
-  }, [initialValues, defaultRow])
+    ]);
+  }, [initialValues, defaultRow]);
 
   // Handles update datatable data.
-  const handleUpdateData = useCallback((rowIndex, columnId, value) => {
-    const newRows = rows.map((row, index) => {
-      if (index === rowIndex) {
-        return { ...rows[rowIndex], [columnId]: value };
-      }
-      return { ...row };
-    });
-    setRow(newRows);
-    setFieldValue('entries', newRows.map(row => ({
-      ...omit(row, ['rowType']),
-    })));
-  }, [rows, setFieldValue]);
+  const handleUpdateData = useCallback(
+    (rowIndex, columnId, value) => {
+      const newRows = rows.map((row, index) => {
+        if (index === rowIndex) {
+          return { ...rows[rowIndex], [columnId]: value };
+        }
+        return { ...row };
+      });
+      setRow(newRows);
+      setFieldValue(
+        'entries',
+        newRows.map((row) => ({
+          ...omit(row, ['rowType']),
+        }))
+      );
+    },
+    [rows, setFieldValue]
+  );
 
   // Handles click remove datatable row.
-  const handleRemoveRow = useCallback((rowIndex) => {
-    const removeIndex = parseInt(rowIndex, 10);
-    const newRows = rows.filter((row, index) => index !== removeIndex);
-    
-    setRow([ ...newRows ]);
-    setFieldValue('entries', newRows
-      .filter(row => row.rowType === 'editor')
-      .map(row => ({ ...omit(row, ['rowType']) })
-    ));
-    onClickRemoveRow && onClickRemoveRow(removeIndex);
-  }, [rows, setFieldValue, onClickRemoveRow]);
+  const handleRemoveRow = useCallback(
+    (rowIndex) => {
+      const removeIndex = parseInt(rowIndex, 10);
+      const newRows = rows.filter((row, index) => index !== removeIndex);
+
+      setRow([...newRows]);
+      setFieldValue(
+        'entries',
+        newRows
+          .filter((row) => row.rowType === 'editor')
+          .map((row) => ({ ...omit(row, ['rowType']) }))
+      );
+      onClickRemoveRow && onClickRemoveRow(removeIndex);
+    },
+    [rows, setFieldValue, onClickRemoveRow]
+  );
 
   // Memorized data table columns.
-  const columns = useMemo(() => [
-    {
-      Header: '#',
-      accessor: 'index',
-      Cell: ({ row: {index} }) => (
-        <span>{ index + 1 }</span>
-      ),
-      className: "index",
-      width: 40,
-      disableResizing: true,
-      disableSortBy: true,
-    },
-    {
-      Header: 'Account',
-      id: 'account_id',
-      accessor: 'account_id',
-      Cell: TotalAccountCellRenderer(AccountsListFieldCell),
-      className: "account",
-      disableSortBy: true,
-      disableResizing: true,
-      width: 250,
-    },
-    {
-      Header: 'Credit (USD)',
-      accessor: 'credit',
-      Cell: TotalCreditDebitCellRenderer(MoneyFieldCell, 'credit'),
-      className: "credit",
-      disableSortBy: true,
-      disableResizing: true,
-      width: 150,
-    },
-    {
-      Header: 'Debit (USD)',
-      accessor: 'debit',
-      Cell: TotalCreditDebitCellRenderer(MoneyFieldCell, 'debit'),
-      className: "debit",
-      disableSortBy: true,
-      disableResizing: true,
-      width: 150,
-    },
-    {
-      Header: 'Note', 
-      accessor: 'note',
-      Cell: NoteCellRenderer(InputGroupCell),
-      disableSortBy: true,
-      className: "note",
-    },
-    {
-      Header: '',
-      accessor: 'action',
-      Cell: ActionsCellRenderer,
-      className: "actions",
-      disableSortBy: true,
-      disableResizing: true,
-      width: 45,
-    }
-  ], []);
+  const columns = useMemo(
+    () => [
+      {
+        Header: '#',
+        accessor: 'index',
+        Cell: ({ row: { index } }) => <span>{index + 1}</span>,
+        className: 'index',
+        width: 40,
+        disableResizing: true,
+        disableSortBy: true,
+      },
+      {
+        Header: formatMessage({ id: 'account' }),
+        id: 'account_id',
+        accessor: 'account_id',
+        Cell: TotalAccountCellRenderer(AccountsListFieldCell),
+        className: 'account',
+        disableSortBy: true,
+        disableResizing: true,
+        width: 250,
+      },
+      {
+        Header: formatMessage({ id: 'credit_usd' }),
+        accessor: 'credit',
+        Cell: TotalCreditDebitCellRenderer(MoneyFieldCell, 'credit'),
+        className: 'credit',
+        disableSortBy: true,
+        disableResizing: true,
+        width: 150,
+      },
+      {
+        Header: formatMessage({ id: 'debit_usd' }),
+        accessor: 'debit',
+        Cell: TotalCreditDebitCellRenderer(MoneyFieldCell, 'debit'),
+        className: 'debit',
+        disableSortBy: true,
+        disableResizing: true,
+        width: 150,
+      },
+      {
+        Header: formatMessage({ id: 'note' }),
+        accessor: 'note',
+        Cell: NoteCellRenderer(InputGroupCell),
+        disableSortBy: true,
+        className: 'note',
+      },
+      {
+        Header: '',
+        accessor: 'action',
+        Cell: ActionsCellRenderer,
+        className: 'actions',
+        disableSortBy: true,
+        disableResizing: true,
+        width: 45,
+      },
+    ],
+    []
+  );
 
   // Handles click new line.
   const onClickNewRow = useCallback(() => {
-    setRow([
-      ...rows,
-      { ...defaultRow, rowType: 'editor' },
-    ]);
+    setRow([...rows, { ...defaultRow, rowType: 'editor' }]);
     onClickAddNewRow && onClickAddNewRow();
   }, [defaultRow, rows, onClickAddNewRow]);
 
-  const rowClassNames = useCallback((row) => ({
-    'row--total': rows.length === (row.index + 2),
-  }), [rows]);
+  const rowClassNames = useCallback(
+    (row) => ({
+      '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}>
-          New lines
+          onClick={onClickNewRow}
+        >
+          <T id={'new_lines'} />
         </Button>
 
         <Button
           small={true}
           className={'button--secondary button--clear-lines ml1'}
-          onClick={onClickNewRow}>
-          Clear all lines
+          onClick={onClickNewRow}
+        >
+          <T id={'clear_all_lines'} />
         </Button>
       </div>
     </div>
   );
 }
 
-export default compose(
-  withAccounts,
-)(MakeJournalEntriesTable);
+export default compose(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,118 +68,140 @@ function ManualJournalsDataTable({
     viewMeta,
   ]);
 
-  const handlePublishJournal = useCallback((journal) => () => {
-    onPublishJournal && onPublishJournal(journal);
-  }, [onPublishJournal]);
+  const handlePublishJournal = useCallback(
+    (journal) => () => {
+      onPublishJournal && onPublishJournal(journal);
+    },
+    [onPublishJournal]
+  );
 
-  const handleEditJournal = useCallback((journal) => () => {
-    onEditJournal && onEditJournal(journal);
-  }, [onEditJournal]);
+  const handleEditJournal = useCallback(
+    (journal) => () => {
+      onEditJournal && onEditJournal(journal);
+    },
+    [onEditJournal]
+  );
 
-  const handleDeleteJournal = useCallback((journal) => () => {
-    onDeleteJournal && onDeleteJournal(journal);
-  }, [onDeleteJournal]);
+  const handleDeleteJournal = useCallback(
+    (journal) => () => {
+      onDeleteJournal && onDeleteJournal(journal);
+    },
+    [onDeleteJournal]
+  );
 
   const actionMenuList = (journal) => (
     <Menu>
-      <MenuItem text='View Details' />
+      <MenuItem text={<T id={'view_details'} />} />
       <MenuDivider />
       {!journal.status && (
         <MenuItem
-          text="Publish Journal"
-          onClick={handlePublishJournal(journal)} />
-      )}      
+          text={<T id={'publish_journal'} />}
+          onClick={handlePublishJournal(journal)}
+        />
+      )}
       <MenuItem
-        text='Edit Journal'
-        onClick={handleEditJournal(journal)} />
+        text={<T id={'edit_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(() => [
-    {
-      id: 'date',
-      Header: 'Date',
-      accessor: r => moment().format('YYYY-MM-DD'),
-      disableResizing: true,
-      width: 150,
-      className: 'date',
-    },
-    {
-      id: 'amount',
-      Header: 'Amount',
-      accessor: r => (<Money amount={r.amount} currency={'USD'} />),
-      disableResizing: true,
-      className: 'amount',
-    },
-    {
-      id: 'journal_number',
-      Header: 'Journal No.',
-      accessor: 'journal_number',
-      disableResizing: true,
-      className: 'journal_number',
-    },
-    {
-      id: 'status',
-      Header: 'Status',
-      accessor: (r) => {
-        return r.status ? 'Published' : 'Draft';
+  const columns = useMemo(
+    () => [
+      {
+        id: 'date',
+        Header: formatMessage({ id: 'date' }),
+        accessor: (r) => moment().format('YYYY-MM-DD'),
+        disableResizing: true,
+        width: 150,
+        className: 'date',
       },
-      disableResizing: true,
-      width: 100,
-      className: 'status',
-    },
-    {
-      id: 'note',
-      Header: 'Note',
-      accessor: r => (<Icon icon={'file-alt'} iconSize={16} />),
-      disableResizing: true,
-      disableSorting: true,
-      width: 100,
-      className: 'note',
-    },
-    {
-      id: 'transaction_type',
-      Header: 'Transaction type ',
-      accessor: 'transaction_type',
-      width: 100,
-      className: 'transaction_type',
-    },
-    {
-      id: 'created_at',
-      Header: 'Created At',
-      accessor: r => moment().format('YYYY-MM-DD'),
-      disableResizing: true,
-      width: 150,
-      className: 'created_at',
-    },
-    {
-      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: true,
-    },
-  ], []);
+      {
+        id: 'amount',
+        Header: formatMessage({ id: 'amount' }),
+        accessor: (r) => <Money amount={r.amount} currency={'USD'} />,
+        disableResizing: true,
+        className: 'amount',
+      },
+      {
+        id: 'journal_number',
+        Header: formatMessage({id:'journal_no'}),
+        accessor: 'journal_number',
+        disableResizing: true,
+        className: 'journal_number',
+      },
+      {
+        id: 'status',
+        Header: formatMessage({id:'status'}),
+        accessor: (r) => {
+          return r.status ? 'Published' : 'Draft';
+        },
+        disableResizing: true,
+        width: 100,
+        className: 'status',
+      },
+      {
+        id: 'note',
+        Header: formatMessage({id:'note'}),
+        accessor: (r) => <Icon icon={'file-alt'} iconSize={16} />,
+        disableResizing: true,
+        disableSorting: true,
+        width: 100,
+        className: 'note',
+      },
+      {
+        id: 'transaction_type',
+        Header: formatMessage({id:'transaction_type'}),
+        accessor: 'transaction_type',
+        width: 100,
+        className: 'transaction_type',
+      },
+      {
+        id: 'created_at',
+        Header: formatMessage({id:'created_at'}),
+        accessor: (r) => moment().format('YYYY-MM-DD'),
+        disableResizing: true,
+        width: 150,
+        className: 'created_at',
+      },
+      {
+        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: true,
+      },
+    ],
+    []
+  );
 
-  const handleDataTableFetchData = useCallback((...args) => {
-    onFetchData && onFetchData(...args);
-  }, [onFetchData]);
+  const handleDataTableFetchData = useCallback(
+    (...args) => {
+      onFetchData && onFetchData(...args);
+    },
+    [onFetchData]
+  );
 
-  const handleSelectedRowsChange = useCallback((selectedRows) => {
-    onSelectedRowsChange && onSelectedRowsChange(selectedRows.map(s => s.original));
-  }, [onSelectedRowsChange]);
+  const handleSelectedRowsChange = useCallback(
+    (selectedRows) => {
+      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.
  */
@@ -42,17 +42,21 @@ function ManualJournalsTable({
     return requestFetchResourceViews('manual_journals');
   });
 
-  const fetchManualJournals = useQuery('manual-journals-table', () => 
-    requestFetchManualJournalsTable());
+  const fetchManualJournals = useQuery('manual-journals-table', () =>
+    requestFetchManualJournalsTable()
+  );
 
   useEffect(() => {
     changePageTitle('Manual Journals');
   }, [changePageTitle]);
 
   // Handle delete manual journal click.
-  const handleDeleteJournal = useCallback((journal) => {
-    setDeleteManualJournal(journal);
-  }, [setDeleteManualJournal]);
+  const handleDeleteJournal = useCallback(
+    (journal) => {
+      setDeleteManualJournal(journal);
+    },
+    [setDeleteManualJournal]
+  );
 
   // Handle cancel delete manual journal.
   const handleCancelManualJournalDelete = useCallback(() => {
@@ -67,30 +71,35 @@ function ManualJournalsTable({
     });
   }, [deleteManualJournal, requestDeleteManualJournal]);
 
-  const handleBulkDelete = useCallback((accountsIds) => {
-    setBulkDelete(accountsIds);
-  }, [setBulkDelete]);
+  const handleBulkDelete = useCallback(
+    (accountsIds) => {
+      setBulkDelete(accountsIds);
+    },
+    [setBulkDelete]
+  );
 
   const handleConfirmBulkDelete = useCallback(() => {
-    requestDeleteBulkManualJournals(bulkDelete).then(() => {
-      setBulkDelete(false);
-      AppToaster.show({ message: 'the_accounts_have_been_deleted' });
-    }).catch((error) => {
-      setBulkDelete(false);
-    });
-  }, [
-    requestDeleteBulkManualJournals,
-    bulkDelete,
-  ]);
+    requestDeleteBulkManualJournals(bulkDelete)
+      .then(() => {
+        setBulkDelete(false);
+        AppToaster.show({ message: 'the_accounts_have_been_deleted' });
+      })
+      .catch((error) => {
+        setBulkDelete(false);
+      });
+  }, [requestDeleteBulkManualJournals, bulkDelete]);
 
   const handleCancelBulkDelete = useCallback(() => {
     setBulkDelete(false);
   }, []);
 
-  const handleEditJournal = useCallback((journal) => {
-    history.push(`/dashboard/accounting/manual-journals/${journal.id}/edit`);
-  }, [history]);
-  
+  const handleEditJournal = useCallback(
+    (journal) => {
+      history.push(`/dashboard/accounting/manual-journals/${journal.id}/edit`);
+    },
+    [history]
+  );
+
   // Handle filter change to re-fetch data-table.
   const handleFilterChanged = useCallback(() => {
     fetchManualJournals.refetch();
@@ -102,36 +111,49 @@ function ManualJournalsTable({
   }, [fetchManualJournals]);
 
   // Handle fetch data of manual jouranls datatable.
-  const handleFetchData = useCallback(({ pageIndex, pageSize, sortBy }) => {
-    addManualJournalsTableQueries({
-      ...(sortBy.length > 0) ? {
-        column_sort_by: sortBy[0].id,
-        sort_order: sortBy[0].desc ? 'desc' : 'asc',
-      } : {},
-    });
-  }, [
-    addManualJournalsTableQueries,
-  ]);
+  const handleFetchData = useCallback(
+    ({ pageIndex, pageSize, sortBy }) => {
+      addManualJournalsTableQueries({
+        ...(sortBy.length > 0
+          ? {
+              column_sort_by: sortBy[0].id,
+              sort_order: sortBy[0].desc ? 'desc' : 'asc',
+            }
+          : {}),
+      });
+    },
+    [addManualJournalsTableQueries]
+  );
 
-  const handlePublishJournal = useCallback((journal) => {
-    requestPublishManualJournal(journal.id).then(() => {
-      AppToaster.show({ message: 'the_manual_journal_id_has_been_published' });
-    })
-  }, [requestPublishManualJournal]);
+  const handlePublishJournal = useCallback(
+    (journal) => {
+      requestPublishManualJournal(journal.id).then(() => {
+        AppToaster.show({
+          message: 'the_manual_journal_id_has_been_published',
+        });
+      });
+    },
+    [requestPublishManualJournal]
+  );
 
   // Handle selected rows change.
-  const handleSelectedRowsChange = useCallback((accounts) => {
-    setSelectedRows(accounts);
-  }, [setSelectedRows]);
+  const handleSelectedRowsChange = useCallback(
+    (accounts) => {
+      setSelectedRows(accounts);
+    },
+    [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'
-          confirmButtonText='Move to Trash'
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={<T id={'move_to_trash'} />}
           icon='trash'
           intent={Intent.DANGER}
           isOpen={deleteManualJournal}
@@ -169,8 +192,8 @@ function ManualJournalsTable({
         </Alert>
 
         <Alert
-          cancelButtonText='Cancel'
-          confirmButtonText='Move to Trash'
+          cancelButtonText={<T id={'cancel'} />}
+          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);