WIP: Arabic localization.

2026-02-17 21:30:31 +00:00 · 2021-06-10 13:05:44 +02:00
parent 1ea32884c2 709ffb50f1
commit 40c6a1ccbc
50 changed files with 302 additions and 262 deletions
--- a/client/src/containers/Accounts/AccountsViewsTabs.js
+++ b/client/src/containers/Accounts/AccountsViewsTabs.js
@@ -1,6 +1,8 @@
 import React, { useMemo, useCallback } from 'react';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
 import { pick } from 'lodash';
+import intl from 'react-intl-universal';
+

 import { DashboardViewsTabs } from 'components';
 import { useAccountsChartContext } from 'containers/Accounts/AccountsChartProvider';
@@ -45,7 +47,7 @@ function AccountsViewsTabs({
    <Navbar className="navbar--dashboard-views">
      <NavbarGroup align={Alignment.LEFT}>
        <DashboardViewsTabs
-          defaultTabText={'All Accounts'}
+          defaultTabText={intl.get('all_accounts_')}
          currentViewId={accountsCustomViewId}
          resourceName={'accounts'}
          onChange={handleTabChange}
--- a/client/src/containers/Dialogs/CurrencyFormDialog/CurrencyFormFields.js
+++ b/client/src/containers/Dialogs/CurrencyFormDialog/CurrencyFormFields.js
@@ -39,7 +39,7 @@ export default function CurrencyFormFields() {
          meta: { error, touched },
        }) => (
          <FormGroup
-            label={'Currency code'}
+            label={<T id={'currency_code'} />}
            className={classNames(CLASSES.FILL, 'form-group--type')}
          >
            <ListSelect
@@ -47,7 +47,7 @@ export default function CurrencyFormFields() {
              selectedItemProp={'currency_code'}
              selectedItem={value}
              textProp={'formatted_name'}
-              defaultText={'Select currency code'}
+              defaultText={<T id={'select_currency_code'} />}
              onItemSelect={(currency) => {
                setFieldValue('currency_code', currency.currency_code);
                setFieldValue('currency_name', currency.name);
--- a/client/src/containers/Drawers/PaperTemplate/PaperTemplateTable.js
+++ b/client/src/containers/Drawers/PaperTemplate/PaperTemplateTable.js
@@ -22,10 +22,10 @@ export default function DrawerTemplateTable({ tableData, currencyCode }) {
        Header: intl.get('qty'),
        accessor: 'quantity',
        disableSortBy: true,
-        width: 50,
+        width: 80,
      },
      {
-        Header: intl.get('Total'),
+        Header: intl.get('total'),
        accessor: ({ total }) => (
          <Money amount={total} currency={currencyCode} />
        ),
--- a/client/src/containers/FinancialStatements/APAgingSummary/components.js
+++ b/client/src/containers/FinancialStatements/APAgingSummary/components.js
@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import intl from 'react-intl-universal';
 import { useAPAgingSummaryContext } from './APAgingSummaryProvider';
 import { getColumnWidth } from 'utils';
 import { FormattedMessage as T } from 'components';
@@ -16,7 +17,9 @@ export const useAPAgingSummaryColumns = () => {
  const agingColumns = React.useMemo(() => {
    return columns.map(
      (agingColumn) =>
-        `${agingColumn.before_days} - ${agingColumn.to_days || 'And Over'}`,
+        `${agingColumn.before_days} - ${
+          agingColumn.to_days || intl.get('and_over')
+        }`,
    );
  }, [columns]);

@@ -60,14 +63,12 @@ export const useAPAgingSummaryColumns = () => {
 /**
 * A/P aging summary sheet loading bar.
 */
- export function APAgingSummarySheetLoadingBar() {
-  const {
-    isAPAgingFetching
-  } = useAPAgingSummaryContext();
+export function APAgingSummarySheetLoadingBar() {
+  const { isAPAgingFetching } = useAPAgingSummaryContext();

  return (
    <If condition={isAPAgingFetching}>
      <FinancialLoadingBar />
    </If>
-  )
-}
+  );
+}
--- a/client/src/containers/FinancialStatements/ARAgingSummary/components.js
+++ b/client/src/containers/FinancialStatements/ARAgingSummary/components.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import intl from 'react-intl-universal';
 import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
 import { getColumnWidth } from 'utils';
 import { FormattedMessage as T } from 'components';
@@ -16,7 +17,9 @@ export const useARAgingSummaryColumns = () => {
  const agingColumns = React.useMemo(() => {
    return columns.map(
      (agingColumn) =>
-        `${agingColumn.before_days} - ${agingColumn.to_days || 'And Over'}`,
+        `${agingColumn.before_days} - ${
+          agingColumn.to_days || intl.get('and_over')
+        }`,
    );
  }, [columns]);

@@ -62,14 +65,12 @@ export const useARAgingSummaryColumns = () => {
 /**
 * A/R aging summary sheet loading bar.
 */
- export function ARAgingSummarySheetLoadingBar() {
-  const {
-    isARAgingFetching,
-  } = useARAgingSummaryContext();
+export function ARAgingSummarySheetLoadingBar() {
+  const { isARAgingFetching } = useARAgingSummaryContext();

  return (
    <If condition={isARAgingFetching}>
      <FinancialLoadingBar />
    </If>
-  )
-}
+  );
+}
--- a/client/src/containers/FinancialStatements/BalanceSheet/components.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/components.js
@@ -2,34 +2,32 @@ import React from 'react';
 import { Button } from '@blueprintjs/core';
 import { Icon, If } from 'components';
 import { useBalanceSheetContext } from './BalanceSheetProvider';
+import { FormattedMessage as T } from 'react-intl';
 import FinancialLoadingBar from '../FinancialLoadingBar';

 /**
 * Balance sheet alerts.
 */
 export function BalanceSheetAlerts() {
-  const {
-    isLoading,
-    refetchBalanceSheet,
-    balanceSheet,
-  } = useBalanceSheetContext();
+  const { isLoading, refetchBalanceSheet, balanceSheet } =
+    useBalanceSheetContext();

  // Handle refetch the report sheet.
  const handleRecalcReport = () => {
    refetchBalanceSheet();
  };
  // Can't display any error if the report is loading.
-  if (isLoading) { return null; }
+  if (isLoading) {
+    return null;
+  }

  return (
    <If condition={balanceSheet.meta.is_cost_compute_running}>
      <div class="alert-compute-running">
-        <Icon icon="info-block" iconSize={12} /> Just a moment! We're
-        calculating your cost transactions and this doesn't take much time.
-        Please check after sometime.{' '}
-
+        <Icon icon="info-block" iconSize={12} />{' '}
+        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
        <Button onClick={handleRecalcReport} minimal={true} small={true}>
-          Refresh
+          <T id={'refresh'} />
        </Button>
      </div>
    </If>
@@ -40,13 +38,11 @@ export function BalanceSheetAlerts() {
 * Balance sheet loading bar.
 */
 export function BalanceSheetLoadingBar() {
-  const {
-    isFetching
-  } = useBalanceSheetContext();
+  const { isFetching } = useBalanceSheetContext();

  return (
    <If condition={isFetching}>
      <FinancialLoadingBar />
    </If>
-  )
-}
+  );
+}
--- a/client/src/containers/FinancialStatements/CashFlowStatement/components.js
+++ b/client/src/containers/FinancialStatements/CashFlowStatement/components.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Button } from '@blueprintjs/core';
 import { Icon, If } from 'components';
+import { FormattedMessage as T } from 'react-intl';

 import { dynamicColumns } from './utils';
 import { useCashFlowStatementContext } from './CashFlowStatementProvider';
@@ -52,11 +53,10 @@ export function CashFlowStatementAlerts() {
  return (
    <If condition={cashFlowStatement.meta.is_cost_compute_running}>
      <div className="alert-compute-running">
-        <Icon icon="info-block" iconSize={12} /> Just a moment! We're
-        calculating your cost transactions and this doesn't take much time.
-        Please check after sometime.
+        <Icon icon="info-block" iconSize={12} />
+        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
        <Button onClick={handleRecalcReport} minimal={true} small={true}>
-          Refresh
+          <T id={'refresh'} />
        </Button>
      </div>
    </If>
--- a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanel.js
+++ b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanel.js
@@ -57,7 +57,7 @@ export default function CustomersBalanceSummaryGeneralPanel() {
                  inline={true}
                  name={'percentage'}
                  small={true}
-                  label={'Percentage Of Column'}
+                  label={<T id={'percentage_of_column'}/>}
                  {...field}
                />
              </FormGroup>
--- a/client/src/containers/FinancialStatements/GeneralLedger/components.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/components.js
@@ -2,6 +2,8 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { Button } from '@blueprintjs/core';
 import { Icon, If } from 'components';
+import { FormattedMessage as T } from 'react-intl';
+
 import { getForceWidth, getColumnWidth } from 'utils';
 import { useGeneralLedgerContext } from './GeneralLedgerProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
@@ -68,7 +70,6 @@ export function useGeneralLedgerTableColumns() {
        accessor: 'formatted_credit',
        className: 'credit',
        width: getColumnWidth(tableRows, 'formatted_credit', {
-        
          minWidth: 100,
          magicSpacing: 10,
        }),
@@ -105,33 +106,28 @@ export function useGeneralLedgerTableColumns() {
  );
 }

-
 /**
 * General ledger sheet alerts.
 */
- export function GeneralLedgerSheetAlerts() {
-  const {
-    generalLedger,
-    isLoading,
-    sheetRefresh
-  } = useGeneralLedgerContext();
+export function GeneralLedgerSheetAlerts() {
+  const { generalLedger, isLoading, sheetRefresh } = useGeneralLedgerContext();

  // Handle refetch the report sheet.
  const handleRecalcReport = () => {
    sheetRefresh();
  };
  // Can't display any error if the report is loading.
-  if (isLoading) { return null; }
+  if (isLoading) {
+    return null;
+  }

  return (
    <If condition={generalLedger.meta.is_cost_compute_running}>
      <div class="alert-compute-running">
-        <Icon icon="info-block" iconSize={12} /> Just a moment! We're
-        calculating your cost transactions and this doesn't take much time.
-        Please check after sometime.{' '}
-
+        <Icon icon="info-block" iconSize={12} />
+        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
        <Button onClick={handleRecalcReport} minimal={true} small={true}>
-          Refresh
+          <T id={'refresh'} />
        </Button>
      </div>
    </If>
@@ -142,13 +138,11 @@ export function useGeneralLedgerTableColumns() {
 * General ledger sheet loading bar.
 */
 export function GeneralLedgerSheetLoadingBar() {
-  const {
-    isFetching,
-  } = useGeneralLedgerContext();
+  const { isFetching } = useGeneralLedgerContext();

  return (
    <If condition={isFetching}>
      <FinancialLoadingBar />
    </If>
-  )
+  );
 }
--- a/client/src/containers/FinancialStatements/InventoryItemDetails/components.js
+++ b/client/src/containers/FinancialStatements/InventoryItemDetails/components.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Button } from '@blueprintjs/core';
 import { Icon, If } from 'components';
+import { FormattedMessage as T } from 'react-intl';

 import { dynamicColumns } from './utils';
 import FinancialLoadingBar from '../FinancialLoadingBar';
@@ -51,15 +52,15 @@ export function InventoryItemDetailsAlerts() {
  if (isInventoryItemDetailsLoading) {
    return null;
  }
- 
+
  return (
    <If condition={inventoryItemDetails.meta.is_cost_compute_running}>
      <div className="alert-compute-running">
-        <Icon icon="info-block" iconSize={12} /> Just a moment! We're
-        calculating your cost transactions and this doesn't take much time.
-        Please check after sometime.
+        <Icon icon="info-block" iconSize={12} />
+        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
+
        <Button onClick={handleRecalcReport} minimal={true} small={true}>
-          Refresh
+          <T id={'refresh'} />
        </Button>
      </div>
    </If>
--- a/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationActionsBar.js
+++ b/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationActionsBar.js
@@ -54,7 +54,7 @@ function InventoryValuationActionsBar({
      <NavbarGroup>
        <Button
          className={classNames(Classes.MINIMAL, 'button--gray-highlight')}
-          text={'Re-calc Report'}
+          text={<T id={'recalc_report'} />}
          onClick={handleRecalculateReport}
          icon={<Icon icon="refresh-16" iconSize={16} />}
        />
--- a/client/src/containers/FinancialStatements/Journal/JournalHeader.js
+++ b/client/src/containers/FinancialStatements/Journal/JournalHeader.js
@@ -68,7 +68,7 @@ function JournalHeader({
          <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
            <Tab
              id="general"
-              title={'General'}
+              title={<T id={'general'} />}
              panel={<JournalSheetHeaderGeneral />}
            />
          </Tabs>
--- a/client/src/containers/FinancialStatements/Journal/components.js
+++ b/client/src/containers/FinancialStatements/Journal/components.js
@@ -2,7 +2,7 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import moment from 'moment';
 import { Button } from '@blueprintjs/core';
-import { Icon, If } from 'components';
+import { Icon, If, FormattedMessage as T } from 'components';
 import { useJournalSheetContext } from './JournalProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';

@@ -10,7 +10,6 @@ import FinancialLoadingBar from '../FinancialLoadingBar';
 * Retrieve the journal table columns.
 */
 export const useJournalTableColumns = () => {
-  

  return React.useMemo(
    () => [
@@ -69,45 +68,40 @@ export const useJournalTableColumns = () => {
 * Journal sheet loading bar.
 */
 export function JournalSheetLoadingBar() {
-  const {
-    isFetching
-  } = useJournalSheetContext();
+  const { isFetching } = useJournalSheetContext();

  return (
    <If condition={isFetching}>
      <FinancialLoadingBar />
    </If>
-  )
+  );
 }

 /**
 * Journal sheet alerts.
 */
- export function JournalSheetAlerts() {
-  const {
-    isLoading,
-    refetchSheet,
-    journalSheet,
-  } = useJournalSheetContext();
+export function JournalSheetAlerts() {
+  const { isLoading, refetchSheet, journalSheet } = useJournalSheetContext();

  // Handle refetch the report sheet.
  const handleRecalcReport = () => {
    refetchSheet();
  };
  // Can't display any error if the report is loading.
-  if (isLoading) { return null; }
+  if (isLoading) {
+    return null;
+  }

  return (
    <If condition={journalSheet.meta.is_cost_compute_running}>
      <div class="alert-compute-running">
-        <Icon icon="info-block" iconSize={12} /> Just a moment! We're
-        calculating your cost transactions and this doesn't take much time.
-        Please check after sometime.{' '}
+        <Icon icon="info-block" iconSize={12} />
+        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />

        <Button onClick={handleRecalcReport} minimal={true} small={true}>
-          Refresh
+          <T id={'refresh'} />
        </Button>
      </div>
    </If>
  );
-}
+}
--- a/client/src/containers/FinancialStatements/ProfitLossSheet/components.js
+++ b/client/src/containers/FinancialStatements/ProfitLossSheet/components.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import { Button } from '@blueprintjs/core';
 import { Icon, If } from 'components';
+import { FormattedMessage as T } from 'react-intl';
+
 import { useProfitLossSheetContext } from './ProfitLossProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';

@@ -21,11 +23,8 @@ export function ProfitLossSheetLoadingBar() {
 * Balance sheet alerts.
 */
 export function ProfitLossSheetAlerts() {
-  const {
-    isLoading,
-    sheetRefetch,
-    profitLossSheet,
-  } = useProfitLossSheetContext();
+  const { isLoading, sheetRefetch, profitLossSheet } =
+    useProfitLossSheetContext();

  // Handle refetch the report sheet.
  const handleRecalcReport = () => {
@@ -39,11 +38,11 @@ export function ProfitLossSheetAlerts() {
  return (
    <If condition={profitLossSheet.meta.is_cost_compute_running}>
      <div class="alert-compute-running">
-        <Icon icon="info-block" iconSize={12} /> Just a moment! We're
-        calculating your cost transactions and this doesn't take much time.
-        Please check after sometime.{' '}
+        <Icon icon="info-block" iconSize={12} />
+        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
+
        <Button onClick={handleRecalcReport} minimal={true} small={true}>
-          Refresh
+          <T id={'refresh'} />
        </Button>
      </div>
    </If>
--- a/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsActionsBar.js
+++ b/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsActionsBar.js
@@ -53,7 +53,7 @@ function PurchasesByItemsActionsBar({
      <NavbarGroup>
        <Button
          className={classNames(Classes.MINIMAL, 'button--gray-highlight')}
-          text={'Re-calc Report'}
+          text={<T id={'recalc_report'} />}
          onClick={handleRecalculateReport}
          icon={<Icon icon="refresh-16" iconSize={16} />}
        />
--- a/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsActionsBar.js
+++ b/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsActionsBar.js
@@ -53,7 +53,7 @@ function SalesByItemsActionsBar({
      <NavbarGroup>
        <Button
          className={classNames(Classes.MINIMAL, 'button--gray-highlight')}
-          text={'Re-calc Report'}
+          text={<T id={'recalc_report'} />}
          onClick={handleRecalculateReport}
          icon={<Icon icon="refresh-16" iconSize={16} />}
        />
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js
@@ -53,7 +53,7 @@ function TrialBalanceActionsBar({
      <NavbarGroup>
        <Button
          className={classNames(Classes.MINIMAL, 'button--gray-highlight')}
-          text={'Re-calc Report'}
+          text={<T id={'recalc_report'} />}
          onClick={handleRecalcReport}
          icon={<Icon icon="refresh-16" iconSize={16} />}
        />
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/components.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/components.js
@@ -2,7 +2,7 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { Button } from '@blueprintjs/core';
 import { getColumnWidth } from 'utils';
-import { If, Icon } from 'components';
+import { If, Icon, FormattedMessage as T } from 'components';
 import { CellTextSpan } from 'components/Datatable/Cells';
 import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
@@ -60,15 +60,13 @@ export const useTrialBalanceTableColumns = () => {
 * Trial balance sheet progress loading bar.
 */
 export function TrialBalanceSheetLoadingBar() {
-  const {
-    isFetching
-  } = useTrialBalanceSheetContext();
+  const { isFetching } = useTrialBalanceSheetContext();

  return (
    <If condition={isFetching}>
      <FinancialLoadingBar />
    </If>
-  )
+  );
 }

 /**
@@ -78,7 +76,7 @@ export function TrialBalanceSheetAlerts() {
  const {
    trialBalanceSheet: { meta },
    isLoading,
-    refetchSheet
+    refetchSheet,
  } = useTrialBalanceSheetContext();

  // Handle refetch the sheet.
@@ -86,19 +84,20 @@ export function TrialBalanceSheetAlerts() {
    refetchSheet();
  };
  // Can't display any error if the report is loading.
-  if (isLoading) { return null; }
+  if (isLoading) {
+    return null;
+  }

  return (
    <If condition={meta.is_cost_compute_running}>
      <div class="alert-compute-running">
-        <Icon icon="info-block" iconSize={12} /> Just a moment! We're
-        calculating your cost transactions and this doesn't take much time.
-        Please check after sometime.{' '}
+        <Icon icon="info-block" iconSize={12} />
+        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />

        <Button onClick={handleRecalcReport} minimal={true} small={true}>
-          Refresh
+          <T id={'refresh'} />
        </Button>
      </div>
    </If>
-  )
-}
+  );
+}
--- a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneral.js
+++ b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneral.js
@@ -50,7 +50,7 @@ export default function VendorsBalanceSummaryHeaderGeneral() {
                <Checkbox
                  inline={true}
                  small={true}
-                  label={'Percentage Of Column'}
+                  label={<T id={'percentage_of_column'} />}
                  name={'percentage'}
                  {...field}
                />
--- a/client/src/containers/FinancialStatements/common.js
+++ b/client/src/containers/FinancialStatements/common.js
@@ -3,21 +3,46 @@ import { transfromToSnakeCase, flatObject } from 'utils';
 import intl from 'react-intl-universal';

 export const displayColumnsByOptions = [
-  { key: 'total', name: 'Total', type: 'total', by: '' },
-  { key: 'year', name: 'Date/Year', type: 'date_periods', by: 'year' },
-  { key: 'month', name: 'Date/Month', type: 'date_periods', by: 'month' },
-  { key: 'week', name: 'Date/Week', type: 'date_periods', by: 'month' },
-  { key: 'day', name: 'Date/Day', type: 'date_periods', by: 'day' },
-  { key: 'quarter', name: 'Date/Quarter', type: 'date_periods', by: 'quarter' },
+  { key: 'total', name: intl.get('total'), type: 'total', by: '' },
+  {
+    key: 'year',
+    name: intl.get('date_year'),
+    type: 'date_periods',
+    by: 'year',
+  },
+  {
+    key: 'month',
+    name: intl.get('date_month'),
+    type: 'date_periods',
+    by: 'month',
+  },
+  {
+    key: 'week',
+    name: intl.get('date_week'),
+    type: 'date_periods',
+    by: 'month',
+  },
+  {
+    key: 'day',
+    name: intl.get('date_day'),
+    type: 'date_periods',
+    by: 'day',
+  },
+  {
+    key: 'quarter',
+    name: intl.get('date_quarter'),
+    type: 'date_periods',
+    by: 'quarter',
+  },
 ];

 export const dateRangeOptions = [
-  { value: 'today', label: 'Today' },
-  { value: 'this_week', label: 'This Week' },
-  { value: 'this_month', label: 'This Month' },
-  { value: 'this_quarter', label: 'This Quarter' },
-  { value: 'this_year', label: 'This Year' },
-  { value: 'custom', label: 'Custom Range' },
+  { value: 'today', label: intl.get('today') },
+  { value: 'this_week', label: intl.get('this_week') },
+  { value: 'this_month', label: intl.get('this_month') },
+  { value: 'this_quarter', label: intl.get('this_quarter') },
+  { value: 'this_year', label: intl.get('this_year') },
+  { value: 'custom', label: intl.get('custom_range') },
 ];

 export const filterAccountsOptions = [
@@ -34,7 +59,9 @@ export const filterAccountsOptions = [
  {
    key: 'with-transactions',
    name: intl.get('accounts_with_transactions'),
-    hint: intl.get('include_accounts_once_has_transactions_on_given_date_period'),
+    hint: intl.get(
+      'include_accounts_once_has_transactions_on_given_date_period',
+    ),
  },
 ];

--- a/client/src/containers/FinancialStatements/reducers.js
+++ b/client/src/containers/FinancialStatements/reducers.js
@@ -1,5 +1,7 @@
+import React from 'react';
 import { chain } from 'lodash';
 import moment from 'moment';
+import { FormattedMessage as T } from 'react-intl';

 export const balanceSheetRowsReducer = (accounts) => {
  return accounts.map((account) => {
@@ -10,7 +12,7 @@ export const balanceSheetRowsReducer = (accounts) => {
        ...(account.total && account.children && account.children.length > 0
          ? [
              {
-                name: `Total ${account.name}`,
+                name: <T id={'total_name'} values={{ name: account.name }} />,
                row_types: ['total-row', account.section_type],
                total: { ...account.total },
                ...(account.total_periods && {
@@ -46,12 +48,12 @@ export const profitLossSheetReducer = (profitLoss) => {

  if (profitLoss.income) {
    results.push({
-      name: 'Income',
+      name: <T id={'income'} />,
      total: profitLoss.income.total,
      children: [
        ...profitLoss.income.accounts,
        {
-          name: 'Total Income',
+          name: <T id={'total_income'} />,
          total: profitLoss.income.total,
          total_periods: profitLoss.income.total_periods,
          rowTypes: ['income_total', 'section_total', 'total'],
@@ -62,12 +64,12 @@ export const profitLossSheetReducer = (profitLoss) => {
  }
  if (profitLoss.cost_of_sales) {
    results.push({
-      name: 'Cost of sales',
+      name: <T id={'cost_of_sales'} />,
      total: profitLoss.cost_of_sales.total,
      children: [
        ...profitLoss.cost_of_sales.accounts,
        {
-          name: 'Total cost of sales',
+          name: <T id={'total_cost_of_sales'} />,
          total: profitLoss.cost_of_sales.total,
          total_periods: profitLoss.cost_of_sales.total_periods,
          rowTypes: ['cogs_total', 'section_total', 'total'],
@@ -78,7 +80,7 @@ export const profitLossSheetReducer = (profitLoss) => {
  }
  if (profitLoss.gross_profit) {
    results.push({
-      name: 'Gross profit',
+      name: <T id={'gross_profit'} />,
      total: profitLoss.gross_profit.total,
      total_periods: profitLoss.gross_profit.total_periods,
      rowTypes: ['gross_total', 'section_total', 'total'],
@@ -86,12 +88,12 @@ export const profitLossSheetReducer = (profitLoss) => {
  }
  if (profitLoss.expenses) {
    results.push({
-      name: 'Expenses',
+      name: <T id={'expenses'} />,
      total: profitLoss.expenses.total,
      children: [
        ...profitLoss.expenses.accounts,
        {
-          name: 'Total Expenses',
+          name: <T id={'total_expenses'} />,
          total: profitLoss.expenses.total,
          total_periods: profitLoss.expenses.total_periods,
          rowTypes: ['expenses_total', 'section_total', 'total'],
@@ -102,7 +104,7 @@ export const profitLossSheetReducer = (profitLoss) => {
  }
  if (profitLoss.operating_profit) {
    results.push({
-      name: 'Net Operating income',
+      name: <T id={'net_operating_income'} />,
      total: profitLoss.operating_profit.total,
      total_periods: profitLoss.income.total_periods,
      rowTypes: ['net_operating_total', 'section_total', 'total'],
@@ -110,13 +112,13 @@ export const profitLossSheetReducer = (profitLoss) => {
  }
  if (profitLoss.other_income) {
    results.push({
-      name: 'Other Income',
+      name: 'other_income',
      total: profitLoss.other_income.total,
      total_periods: profitLoss.other_income.total_periods,
      children: [
        ...profitLoss.other_income.accounts,
        {
-          name: 'Total other income',
+          name: <T id={'total_other_income'} />,
          total: profitLoss.other_income.total,
          total_periods: profitLoss.other_income.total_periods,
          rowTypes: ['expenses_total', 'section_total', 'total'],
@@ -126,13 +128,13 @@ export const profitLossSheetReducer = (profitLoss) => {
  }
  if (profitLoss.other_expenses) {
    results.push({
-      name: 'Other expenses',
+      name: <T id={'other_expenses'} />,
      total: profitLoss.other_expenses.total,
      total_periods: profitLoss.other_expenses.total_periods,
      children: [
        ...profitLoss.other_expenses.accounts,
        {
-          name: 'Total other expenses',
+          name: <T id={'total_other_expenses'} />,
          total: profitLoss.other_expenses.total,
          total_periods: profitLoss.other_expenses.total_periods,
          rowTypes: ['expenses_total', 'section_total', 'total'],
@@ -142,7 +144,7 @@ export const profitLossSheetReducer = (profitLoss) => {
  }
  if (profitLoss.net_other_income) {
    results.push({
-      name: 'Net other income',
+      name: <T id={'net_other_income'} />,
      total: profitLoss.net_other_income.total,
      total_periods: profitLoss.net_other_income.total_periods,
      rowTypes: ['net_other_income', 'section_total', 'total'],
@@ -150,7 +152,7 @@ export const profitLossSheetReducer = (profitLoss) => {
  }
  if (profitLoss.net_income) {
    results.push({
-      name: 'Net Income',
+      name: <T id={'net_income'} />,
      total: profitLoss.net_income.total,
      total_periods: profitLoss.net_income.total_periods,
      rowTypes: ['net_income_total', 'section_total', 'total'],
@@ -215,7 +217,7 @@ export const generalLedgerTableRowsReducer = (accounts) => {
        children: [
          {
            ...account.opening_balance,
-            name: 'Opening balance',
+            name: <T id={'opening_balance'} />,
            rowType: 'OPENING_BALANCE',
            date: moment(account.opening_balance.date).format('DD MMM YYYY'),
          },
@@ -227,7 +229,7 @@ export const generalLedgerTableRowsReducer = (accounts) => {
          })),
          {
            ...account.closing_balance,
-            name: 'Closing balance',
+            name: <T id={'closing_balance'} />,
            rowType: 'CLOSING_BALANCE',
            date: moment(account.closing_balance.date).format('DD MMM YYYY'),
          },
@@ -357,4 +359,4 @@ export const salesByItemsReducer = (sheet) => {
    });
  }
  return results;
-};
+};
--- a/client/src/containers/Items/ItemFormPrimarySection.js
+++ b/client/src/containers/Items/ItemFormPrimarySection.js
@@ -7,7 +7,7 @@ import {
  Radio,
  Position,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
+import { FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { ErrorMessage, FastField } from 'formik';
 import {
  CategoriesSelectList,
@@ -41,18 +41,15 @@ export default function ItemFormPrimarySection() {
  const itemTypeHintContent = (
    <>
      <div class="mb1">
-        <strong>{'Service: '}</strong>
-        {'Services that you provide to customers. '}
+        <FormattedHTMLMessage id={'services_that_you_provide_to_customers'} />
      </div>
      <div class="mb1">
-        <strong>{'Inventory: '}</strong>
-        {'Products you buy and/or sell and that you track quantities of.'}
+        <FormattedHTMLMessage id={'products_you_buy_and_or_sell'} />
      </div>
      <div class="mb1">
-        <strong>{'Non-Inventory: '}</strong>
-        {
-          'Products you buy and/or sell but don’t need to (or can’t) track quantities of, for example, nuts and bolts used in an installation.'
-        }
+        <FormattedHTMLMessage
+          id={'products_you_buy_and_or_sell_but_don_t_need'}
+        />
      </div>
    </>
  );
--- a/client/src/containers/Items/ItemsDataTable.js
+++ b/client/src/containers/Items/ItemsDataTable.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
+import { FormattedMessage as T } from 'react-intl';

 import { DataTable } from 'components';

@@ -36,13 +37,8 @@ function ItemsDataTable({
  tableProps,
 }) {
  // Items list context.
-  const {
-    items,
-    pagination,
-    isItemsLoading,
-    isEmptyStatus,
-    isItemsFetching,
-  } = useItemsListContext();
+  const { items, pagination, isItemsLoading, isEmptyStatus, isItemsFetching } =
+    useItemsListContext();

  // Datatable columns.
  const columns = useItemsTableColumns();
@@ -134,7 +130,7 @@ function ItemsDataTable({
        onMakeAdjustment: handleMakeAdjustment,
        onDuplicate: handleDuplicate,
      }}
-      noResults={'There is no items in the table yet.'}
+      noResults={<T id={'there_is_no_items_in_the_table_yet'} />}
      {...tableProps}
    />
  );
--- a/client/src/containers/Preferences/Accountant/AccountantForm.js
+++ b/client/src/containers/Preferences/Accountant/AccountantForm.js
@@ -9,9 +9,13 @@ import {
  Intent,
 } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
-import { AccountsSelectList, FieldRequiredHint } from 'components';
-import { FormattedMessage as T } from 'components';
 import intl from 'react-intl-universal';
+
+import {
+  FormattedMessage as T,
+  AccountsSelectList,
+  FieldRequiredHint,
+} from 'components';
 import { handleStringChange, inputIntent } from 'utils';

 import { useAccountantFormContext } from './AccountantFormProvider';
@@ -22,8 +26,6 @@ import { useAccountantFormContext } from './AccountantFormProvider';
 export default function AccountantForm() {
  const history = useHistory();

-  
-
  const { isSubmitting } = useFormikContext();

  const handleCloseClick = () => {
@@ -103,7 +105,7 @@ export default function AccountantForm() {
                setFieldValue('accounting_basis', _value);
              })}
            >
-              <Radio label={intl.get('Cash')} value="cash" />
+              <Radio label={intl.get('cash')} value="cash" />
              <Radio label={intl.get('accrual')} value="accrual" />
            </RadioGroup>
          </FormGroup>
--- a/client/src/containers/Setup/SetupCongratsPage.js
+++ b/client/src/containers/Setup/SetupCongratsPage.js
@@ -1,7 +1,8 @@
 import React, { useCallback } from 'react';
 import { Button, Intent } from '@blueprintjs/core';
-import { useHistory } from "react-router-dom";
+import { useHistory } from 'react-router-dom';
 import WorkflowIcon from './WorkflowIcon';
+import { FormattedMessage as T } from 'react-intl';
 import withOrganizationActions from 'containers/Organization/withOrganizationActions';

 import 'style/pages/Setup/Congrats.scss';
@@ -11,18 +12,13 @@ import { compose } from 'utils';
 /**
 * Setup congrats page.
 */
-function SetupCongratsPage({
-  setOrganizationSetupCompleted,
-}) {
+function SetupCongratsPage({ setOrganizationSetupCompleted }) {
  const history = useHistory();

  const handleBtnClick = useCallback(() => {
    setOrganizationSetupCompleted(false);
    history.push('/homepage');
-  }, [
-    setOrganizationSetupCompleted,
-    history,
-  ]);
+  }, [setOrganizationSetupCompleted, history]);

  return (
    <div class="setup-congrats">
@@ -31,24 +27,20 @@ function SetupCongratsPage({
      </div>

      <div class="setup-congrats__text">
-        <h1>Congrats! You are ready to go</h1>
+        <h1>
+          <T id={'congrats_you_are_ready_to_go'} />
+        </h1>

        <p class="paragraph">
-          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>

-        <Button
-          intent={Intent.PRIMARY}
-          type="submit"
-          onClick={handleBtnClick}
-        >
-          Go to dashboard
+        <Button intent={Intent.PRIMARY} type="submit" onClick={handleBtnClick}>
+          <T id={'go_to_dashboard'} />
        </Button>
      </div>
    </div>
  );
 }

-export default compose(
-  withOrganizationActions,
-)(SetupCongratsPage);
+export default compose(withOrganizationActions)(SetupCongratsPage);