feat(lang): drawer lang.

client/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js

@@ -42,9 +42,7 @@ function ManualJournalActionsBar({
   };
 
   // Handle delete button click.
-  const handleBulkDelete = () => {
-
-  };
+  const handleBulkDelete = () => {};
 
   // Handle tab change.
   const handleTabChange = (customView) => {
@@ -77,7 +75,7 @@ function ManualJournalActionsBar({
             className={classNames(Classes.MINIMAL, 'button--filter', {
               'has-active-filters': false,
             })}
-            text="Filter"
+            text={<T id={'filter'} />}
             icon={<Icon icon="filter-16" iconSize={16} />}
           />
         </Popover>

client/src/containers/Accounting/JournalsLanding/ManualJournalsEmptyStatus.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 ManualJournalsEmptyStatus() {
   const history = useHistory();
 
   return (
     <EmptyStatus
-      title={'Create your first journal entries on accounts chart.'}
+      title={<T id={'create_your_first_journal_entries_on_accounts_chart'} />}
       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 ManualJournalsEmptyStatus() {
               history.push('/make-journal-entry');
             }}
           >
-            Make journal
+            <T id={'make_journal'} />
           </Button>
 
           <Button intent={Intent.NONE} large={true}>
-            Learn more
+            <T id={'learn_more'} />
           </Button>
         </>
       }

client/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.js

@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { useFormikContext } from 'formik';
 import { CLASSES } from 'common/classes';
+import { FormattedMessage as T } from 'react-intl';
 import MakeJournalEntriesHeaderFields from './MakeJournalEntriesHeaderFields';
 import { PageFormBigNumber } from 'components';
 import { safeSumBy } from 'utils';
@@ -20,7 +21,7 @@ export default function MakeJournalEntriesHeader() {
       <MakeJournalEntriesHeaderFields />
 
       <PageFormBigNumber
-        label={'Due Amount'}
+        label={<T id={'due_amount'} />}
         amount={total}
         currencyCode={currency_code}
       />

client/src/containers/Accounting/MakeJournal/MakeJournalFormFooter.js

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

client/src/containers/Accounting/MakeJournal/components.js

@@ -44,7 +44,11 @@ export function DebitHeaderCell({ payload: { currencyCode } }) {
  * Account footer cell.
  */
 function AccountFooterCell({ payload: { currencyCode } }) {
-  return <span>{`Total ${currencyCode} `}</span>;
+  return (
+    <span>
+      {formatMessage({ id: 'total_currency' }, { currency: currencyCode })}
+    </span>
+  );
 }
 
 /**

client/src/containers/Drawers/AccountDrawer/AccountDrawerHeader.js

@@ -18,7 +18,9 @@ export default function AccountDrawerHeader({
   return (
     <div className={'account-drawer__content'}>
       <div>
-        <span>Closing Balance</span>
+        <span>
+          <T id={'closing_balance'} />
+        </span>
         <p className={'balance'}>
           {<Money amount={amount} currency={currency_code} />}
         </p>

client/src/containers/Drawers/AccountDrawer/AccountDrawerTable.js

@@ -11,13 +11,11 @@ import withDrawerActions from 'containers/Drawer/withDrawerActions';
 /**
  * account drawer table.
  */
-function AccountDrawerTable({
-  closeDrawer
-}) {
+function AccountDrawerTable({ closeDrawer }) {
   const {
     account: { currency_code },
     accounts,
-    drawerName
+    drawerName,
   } = useAccountDrawerContext();
 
   const columns = React.useMemo(
@@ -69,14 +67,15 @@ function AccountDrawerTable({
       <DataTable columns={columns} data={accounts} />
 
       <div class="account-drawer__table-footer">
-        <Link to={`/financial-reports/general-ledger`} onClick={handleLinkClick}>
-          ← View more transactions.
+        <Link
+          to={`/financial-reports/general-ledger`}
+          onClick={handleLinkClick}
+        >
+          ←{formatMessage({ id: 'view_more_transactions' })}
         </Link>
       </div>
     </div>
   );
 }
 
-export default compose(
-  withDrawerActions
-)(AccountDrawerTable);
+export default compose(withDrawerActions)(AccountDrawerTable);

client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { If, Money } from 'components';
+import { FormattedMessage as T } from 'react-intl';
 
 export default function ExpenseDrawerFooter({
   expense: { total_amount, currency_code },
@@ -8,11 +9,11 @@ export default function ExpenseDrawerFooter({
     <div className="expense-drawer__content--footer">
       <div className="wrapper">
         <div>
-          <span>Sub Total</span>
+          <span><T id={'sub_total'}/></span>
           <p>{<Money amount={total_amount} currency={currency_code} />}</p>
         </div>
         <div>
-          <span>Total</span>
+          <span><T id={'total'}/></span>
           <p>{<Money amount={total_amount} currency={currency_code} />}</p>
         </div>
       </div>

client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.js

@@ -12,12 +12,12 @@ export default function ExpenseDrawerTable({
   const columns = React.useMemo(
     () => [
       {
-        Header: formatMessage({ id: 'Expense account' }),
+        Header: formatMessage({ id: 'expense_account' }),
         accessor: 'expense_account.name',
         width: 110,
       },
       {
-        Header: formatMessage({ id: 'Amount' }),
+        Header: formatMessage({ id: 'amount' }),
         accessor: ({ amount }) => (
           <Money amount={amount} currency={currency_code} />
         ),

client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerFooter.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { FormattedMessage as T } from 'react-intl';
 
 export default function ManualJournalDrawerFooter({
   manualJournal: { amount_formatted },
@@ -7,11 +8,15 @@ export default function ManualJournalDrawerFooter({
     <div className="journal-drawer__content--footer">
       <div className="wrapper">
         <div>
-          <span>Sub Total</span>
+          <span>
+            <T id={'sub_total'} />
+          </span>
           <p>{amount_formatted}</p>
         </div>
         <div>
-          <span>Total</span>
+          <span>
+            <T id={'total'} />
+          </span>
           <p>{amount_formatted}</p>
         </div>
       </div>

client/src/containers/Drawers/PaperTemplate/PaperTemplate.js

@@ -3,18 +3,19 @@ import PaperTemplateHeader from './PaperTemplateHeader';
 import PaperTemplateTable from './PaperTemplateTable';
 import PaperTemplateFooter from './PaperTemplateFooter';
 import { updateItemsEntriesTotal } from 'containers/Entries/utils';
+import { formatMessage } from 'services/intl';
 
 import 'style/components/Drawer/DrawerTemplate.scss';
 
 function PaperTemplate({ labels: propLabels, paperData, entries }) {
   const labels = {
-    name: 'Estimate',
-    billedTo: 'Billed to',
-    date: 'Estimate date',
-    refNo: 'Estimate No.',
-    billedFrom: 'Billed from',
-    amount: 'Estimate amount',
-    dueDate: 'Due date',
+    name: formatMessage({ id: 'estimate_' }),
+    billedTo: formatMessage({ id: 'billed_to' }),
+    date: formatMessage({ id: 'estimate_date' }),
+    refNo: formatMessage({ id: 'estimate_no' }),
+    billedFrom: formatMessage({ id: 'billed_from' }),
+    amount: formatMessage({ id: 'estimate_amount' }),
+    dueDate: formatMessage({ id: 'due_date_' }),
     ...propLabels,
   };
 

client/src/containers/Drawers/PaperTemplate/PaperTemplateTable.js

@@ -19,7 +19,7 @@ export default function DrawerTemplateTable({ tableData, currencyCode }) {
         width: 80,
       },
       {
-        Header: formatMessage({ id: 'Qty' }),
+        Header: formatMessage({ id: 'qty' }),
         accessor: 'quantity',
         disableSortBy: true,
         width: 50,

client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PaymentPaperTemplateHeader from './PaymentPaperTemplateHeader';
 import PaymentPaperTemplateTable from './PaymentPaperTemplateTable';
+import { formatMessage } from 'services/intl';
 
 import 'style/components/Drawer/DrawerTemplate.scss';
 
@@ -9,14 +10,14 @@ export default function PaymentPaperTemplate({
   paperData,
 }) {
   const labels = {
-    name: 'Payment receive',
-    billedTo: 'Billed to',
-    date: 'Payment date',
-    refNo: 'Payment No.',
-    billedFrom: 'Billed from',
-    referenceNo: 'Reference No',
-    amount: 'Amount received',
-    dueDate: 'Due date',
+    name: formatMessage({ id: 'payment_receive' }),
+    billedTo: formatMessage({ id: 'billed_to' }),
+    date: formatMessage({ id: 'payment_date_' }),
+    refNo: formatMessage({ id: 'payment_no' }),
+    billedFrom: formatMessage({ id: 'billed_from' }),
+    referenceNo: formatMessage({ id: 'reference_no' }),
+    amount: formatMessage({ id: 'amount_received' }),
+    dueDate: formatMessage({ id: 'due_date_' }),
     ...propLabels,
   };
   const defaultValues = {

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>
         </>
       }

client/src/containers/Sales/Invoices/InvoiceDetails/InvoicePaper.js

@@ -1,19 +1,20 @@
 import React from 'react';
 import { useInvoiceDrawerContext } from './InvoiceDrawerProvider';
 import PaperTemplate from 'containers/Drawers/PaperTemplate/PaperTemplate';
+import { formatMessage } from 'services/intl';
 
 export default function InvoicePaper() {
   const { invoice, entries } = useInvoiceDrawerContext();
 
   const propLabels = {
     labels: {
-      name: 'Invoice',
-      billedTo: 'Billed to',
-      date: 'Invoice date',
-      refNo: 'Invoice No.',
-      billedFrom: 'Billed from',
-      amount: 'Invoice amount',
-      dueDate: 'Due date',
+      name: formatMessage({ id: 'invoice' }),
+      billedTo: formatMessage({ id: 'billed_to' }),
+      date: formatMessage({ id: 'invoice_date_' }),
+      refNo: formatMessage({ id: 'invoice_no__' }),
+      billedFrom: formatMessage({ id: 'billed_from' }),
+      amount: formatMessage({ id: 'invoice_amount' }),
+      dueDate: formatMessage({ id: 'due_date_' }),
     },
   };
 

client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptPaper.js

@@ -1,19 +1,20 @@
 import React from 'react';
 import { useReceiptDrawerContext } from './ReceiptDrawerProvider';
 import PaperTemplate from 'containers/Drawers/PaperTemplate/PaperTemplate';
+import { formatMessage } from 'services/intl';
 
 export default function ReceiptPaper() {
   const { receipt, entries } = useReceiptDrawerContext();
 
   const propLabels = {
     labels: {
-      name: 'Receipt',
-      billedTo: 'Billed to',
-      date: 'Receipt date',
-      refNo: 'Receipt No.',
-      billedFrom: 'Billed from',
-      amount: 'Receipt amount',
-      dueDate: 'Due date',
+      name: formatMessage({ id: 'receipt_' }),
+      billedTo: formatMessage({ id: 'billed_to' }),
+      date: formatMessage({ id: 'receipt_date_' }),
+      refNo: formatMessage({ id: 'receipt_no' }),
+      billedFrom: formatMessage({ id: 'billed_from' }),
+      amount: formatMessage({ id: 'receipt_amount' }),
+      dueDate: formatMessage({ id: 'due_date_' }),
     },
   };