feat(lang): drawer lang.

client/src/containers/Expenses/ExpenseForm/ExpenseFormFooter.js

@@ -10,7 +10,7 @@ import { CLASSES } from 'common/classes';
 export default function ExpenseFormFooter() {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <Postbox title={'Expense details'} defaultOpen={false}>
+      <Postbox title={<T id={'expense_details'} />} defaultOpen={false}>
         <Row>
           <Col md={8}>
             <FastField name={'description'}>
@@ -31,7 +31,7 @@ export default function ExpenseFormFooter() {
               initialFiles={[]}
               // onDrop={handleDropFiles}
               // onDeleteFile={handleDeleteFile}
-              hint={'Attachments: Maxiumum size: 20MB'}
+              hint={<T id={'attachments_maximum'} />}
             />
           </Col>
         </Row>

client/src/containers/Expenses/ExpenseForm/ExpenseFormHeader.js

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { sumBy } from 'lodash';
 import { useFormikContext } from 'formik';
+import { FormattedMessage as T } from 'react-intl';
 
 import { CLASSES } from 'common/classes';
 
@@ -21,7 +22,7 @@ export default function ExpenseFormHeader() {
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <ExpenseFormHeaderFields />
       <PageFormBigNumber
-        label={'Expense Amount'}
+        label={<T id={'expense_amount'}/>}
         amount={totalExpenseAmount}
         currencyCode={values?.currency_code}
       />

client/src/containers/Expenses/ExpenseForm/components.js

@@ -60,7 +60,7 @@ function AmountFooterCell({ payload: { currencyCode }, rows }) {
 /**
  * Expense amount header cell.
  */
- export function ExpenseAmountHeaderCell({ payload: { currencyCode } }) {
+export function ExpenseAmountHeaderCell({ payload: { currencyCode } }) {
   return formatMessage({ id: 'amount_currency' }, { currency: currencyCode });
 }
 
@@ -68,14 +68,13 @@ function AmountFooterCell({ payload: { currencyCode }, rows }) {
  * Expense account footer cell.
  */
 function ExpenseAccountFooterCell() {
-  return 'Total';
+  return <T id={'total'} />;
 }
 
 /**
  * Retrieve expense form table entries columns.
  */
 export function useExpenseFormTableColumns() {
-
   return React.useMemo(
     () => [
       {

client/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js

@@ -81,7 +81,7 @@ function ExpensesActionsBar({
             className={classNames(Classes.MINIMAL, 'button--filter', {
               'has-active-filters': filterCount > 0,
             })}
-            text="Filter"
+            text={<T id={'filter'}/>}
             icon={<Icon icon="filter-16" iconSize={16} />}
           />
         </Popover>

client/src/containers/Expenses/ExpensesLanding/ExpensesEmptyStatus.js

@@ -2,17 +2,17 @@ import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import { EmptyStatus } from 'components';
+import { FormattedMessage as T } from 'react-intl';
 
 export default function InvoicesEmptyStatus() {
   const history = useHistory();
 
   return (
     <EmptyStatus
-      title={"Create and manage your organization's expenses"}
+      title={<T id={'create_and_manage_your_organization_s_expenses'} />}
       description={
         <p>
-          It is a long established fact that a reader will be distracted by the
-          readable content of a page when looking at its layout.
+          <T id={'it_is_a_long_established_fact_that_a_reader'} />
         </p>
       }
       action={
@@ -24,11 +24,11 @@ export default function InvoicesEmptyStatus() {
               history.push('/expenses/new');
             }}
           >
-            New expense
+            <T id={'new_expense'} />
           </Button>
 
           <Button intent={Intent.NONE} large={true}>
-            Learn more
+            <T id={'learn_more'} />
           </Button>
         </>
       }