Merge remote-tracking branch 'origin/feature/i18n-arabic' into feature/i18n-arabic

client/src/components/ContactsSuggestField.js

@@ -5,12 +5,13 @@ import { Suggest } from '@blueprintjs/select';
 import { FormattedMessage as T } from 'react-intl';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
+import { formatMessage } from 'services/intl';
 
 export default function ContactsSuggestField({
   contactsList,
   initialContactId,
   selectedContactId,
-  defaultTextSelect = 'Select contact',
+  defaultTextSelect = formatMessage({id:'select_contact'}),
   onContactSelected,
 
   selectedContactType = [],

client/src/components/DataTable.js

@@ -10,6 +10,7 @@ import {
   useAsyncDebounce,
 } from 'react-table';
 import { useSticky } from 'react-table-sticky';
+import { formatMessage } from 'services/intl';
 
 import { useUpdateEffect } from 'hooks';
 import { saveInvoke } from 'utils';
@@ -52,7 +53,7 @@ export default function DataTable(props) {
     payload,
     expandable = false,
     noInitialFetch = false,
-    
+
     pagesCount: controlledPageCount,
 
     // Pagination props.
@@ -122,7 +123,7 @@ export default function DataTable(props) {
       autoResetFilters,
       autoResetRowState,
 
-      ...restProps
+      ...restProps,
     },
     useSortBy,
     useExpanded,
@@ -181,7 +182,6 @@ export default function DataTable(props) {
   );
 }
 
-
 DataTable.defaultProps = {
   pagination: false,
   spinnerProps: { size: 30 },
@@ -209,6 +209,6 @@ DataTable.defaultProps = {
   TablePaginationRenderer: TablePagination,
   TableNoResultsRowRenderer: TableNoResultsRow,
 
-  noResults: 'There is no results in the table.',
+  noResults: formatMessage({ id: 'there_is_no_results_in_the_table' }),
   payload: {},
-};
+};

client/src/components/Preferences/PreferencesSidebar.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 import { useHistory, useLocation } from 'react-router-dom';
+import { FormattedMessage as T } from 'react-intl';
 import preferencesMenu from 'config/preferencesMenu';
 import PreferencesSidebarContainer from './PreferencesSidebarContainer';
 
@@ -32,7 +33,7 @@ export default function PreferencesSidebar() {
   return (
     <PreferencesSidebarContainer>
       <div class="preferences-sidebar__head">
-        <h2>Preferences</h2>
+        <h2>{<T id={'preferences'} />}</h2>
       </div>
 
       <Menu className="preferences-sidebar__menu">{items}</Menu>

client/src/config/financialReportsMenu.js

@@ -1,45 +1,56 @@
+import React from 'react';
+import { FormattedMessage as T } from 'react-intl';
+
 export const financialReportMenus = [
   {
-    sectionTitle: 'Financial Accounting',
+    sectionTitle: <T id={'financial_accounting'} />,
     reports: [
       {
-        title: 'Balance Sheet Report',
+        title: <T id={'balance_sheet_report'} />,
-        desc: "Reports a company's assets, liabilities and shareholders' equity at a specific point in time with comparison period(s).",
+        desc: (
+          <T id={'reports_a_company_s_assets_liabilities_and_shareholders'} />
+        ),
         link: '/financial-reports/balance-sheet',
       },
       {
-        title: 'Trial Balance Sheet',
+        title: <T id={'trial_balance_sheet'} />,
-        desc: 'Summarizes the credit and debit balance of each account in your chart of accounts at a specific point in time.',
+        desc: (
+          <T id={'summarizes_the_credit_and_debit_balance_of_each_account'} />
+        ),
         link: '/financial-reports/trial-balance-sheet',
       },
       {
-        title: 'Profit/Loss Report',
+        title: <T id={'profit_loss_report'} />,
-        desc: 'Reports the revenues, costs and expenses incurred during a specific point in time with comparison period(s).',
+        desc: <T id={'reports_the_revenues_costs_and_expenses'} />,
         link: '/financial-reports/profit-loss-sheet',
       },
       {
-        title: 'Cash Flow Statement',
+        title: <T id={'cash_flow_statement'} />,
-        desc: 'Reports inflow and outflow of cash and cash equivalents between a specific two points of time.',
+        desc: (
+          <T id={'reports_inflow_and_outflow_of_cash_and_cash_equivalents'} />
+        ),
         link: '/financial-reports/cash-flow',
       },
       {
-        title: 'Journal Report',
+        title: <T id={'journal_report'} />,
-        desc: 'The debit and credit entries of system transactions, sorted by date.',
+        desc: <T id={'the_debit_and_credit_entries_of_system_transactions'} />,
         link: '/financial-reports/journal-sheet',
       },
       {
-        title: 'General Ledger Report',
+        title: <T id={'general_ledger_report'} />,
-        desc: 'Reports every transaction going in and out of your accounts and organized by accounts and date to monitoring activity of accounts.',
+        desc: <T id={'reports_every_transaction_going_in_and_out_of_your'} />,
         link: '/financial-reports/general-ledger',
       },
       {
-        title: 'Receivable Aging Summary',
+        title: <T id={'receivable_aging_summary'} />,
-        desc: 'Summarize total unpaid balances of customers invoices with number of days the unpaid invoice is overdue.',
+        desc: (
+          <T id={'summarize_total_unpaid_balances_of_customers_invoices'} />
+        ),
         link: '/financial-reports/receivable-aging-summary',
       },
       {
-        title: 'Payable Aging Summary',
+        title: <T id={'payable_aging_summary'} />,
-        desc: 'Summarize total unpaid balances of vendors purchase invoices with the number of days the unpaid invoice is overdue.',
+        desc: <T id={'summarize_total_unpaid_balances_of_vendors_purchase'} />,
         link: '/financial-reports/payable-aging-summary',
       },
     ],
@@ -48,46 +59,82 @@ export const financialReportMenus = [
 
 export const SalesAndPurchasesReportMenus = [
   {
-    sectionTitle: 'Sales/Purchases Reports',
+    sectionTitle: <T id={'sales_purchases_reports'} />,
     reports: [
       {
-        title: 'Purchases By Items',
+        title: <T id={'purchases_by_items'} />,
-        desc: 'Shows the average age of unresolved issues for a project or filter. This helps you see whether your backlog is being kept up to date.',
+        desc: (
+          <T
+            id={
+              'shows_the_average_age_of_unresolved_issues_for_a_project_or_filter'
+            }
+          />
+        ),
         link: '/financial-reports/purchases-by-items',
       },
       {
-        title: 'Sales By Items',
+        title: <T id={'sales_by_items'} />,
-        desc: 'Summarize the business’s sold items quantity, income and average income rate of each item during a specific point in time.',
+        desc: (
+          <T
+            id={
+              'summarize_the_business_s_sold_items_quantity_income_and_average_income_rate'
+            }
+          />
+        ),
         link: '/financial-reports/sales-by-items',
       },
       {
-        title: 'Inventory valuation',
+        title: <T id={'inventory_valuation'} />,
-        desc: 'Summarize the business’s purchase items quantity, cost and average cost rate of each item during a specific point in time.',
+        desc: (
+          <T
+            id={
+              'summarize_the_business_s_purchase_items_quantity_cost_and_average'
+            }
+          />
+        ),
         link: '/financial-reports/inventory-valuation',
       },
       {
-        title: 'Customers Balance summary',
+        title: <T id={'customers_balance_summary'} />,
-        desc: 'Summerize the total amount of each customer owes your business.',
+        desc: (
+          <T
+            id={
+              'summerize_the_total_amount_of_each_customer_owes_your_business'
+            }
+          />
+        ),
         link: '/financial-reports/customers-balance-summary',
       },
       {
-        title: 'Vendors Balance summary',
+        title: <T id={'vendors_balance_summary'} />,
-        desc: 'Summerize the total amount your business owes each vendor.',
+        desc: 'summerize_the_total_amount_your_business_owes_each_vendor',
         link: '/financial-reports/vendors-balance-summary',
       },
       {
-        title: 'Customers Transactions',
+        title: <T id={'customers_transactions'} />,
-        desc: 'Reports every transaction going in and out of each customer.',
+        desc: (
+          <T
+            id={'reports_every_transaction_going_in_and_out_of_each_customer'}
+          />
+        ),
         link: '/financial-reports/transactions-by-customers',
       },
       {
-        title: 'Vendors Transactions',
+        title: <T id={'vendors_transactions'} />,
-        desc: 'Reports every transaction going in and out of each vendor/supplier.',
+        desc: (
+          <T
+            id={
+              'reports_every_transaction_going_in_and_out_of_each_vendor_supplier'
+            }
+          />
+        ),
         link: '/financial-reports/transactions-by-vendors',
       },
       {
-        title: 'Inventory Item details',
+        title: <T id={'inventory_item_details'} />,
-        desc: 'Reports every transaction going in and out of your items to monitoring activity of items.',
+        desc: (
+          <T id={'reports_every_transaction_going_in_and_out_of_your_items'} />
+        ),
         link: '/financial-reports/inventory-item-details',
       },
     ],

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
+          <T id={'it_is_a_long_established_fact_that_a_reader'} />
-          readable content of a page when looking at its layout.
         </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/Dialogs/PaymentViaVoucherDialog/PaymentViaVoucherForm.js

@@ -10,7 +10,6 @@ import { useAutofocus } from 'hooks';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 
-
 /**
  * Payment via license form.
  */
@@ -31,7 +30,9 @@ function PaymentViaLicenseForm({
   return (
     <Form>
       <div className={CLASSES.DIALOG_BODY}>
-        <p>Please enter your preferred payment method below.</p>
+        <p>
+          <T id={'please_enter_your_preferred_payment_method_below'} />
+        </p>
 
         <FastField name="license_code">
           {({ field, meta: { error, touched } }) => (
@@ -72,6 +73,4 @@ function PaymentViaLicenseForm({
   );
 }
 
-export default compose(
+export default compose(withDialogActions)(PaymentViaLicenseForm);
-  withDialogActions
-)(PaymentViaLicenseForm);

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({
+function AccountDrawerTable({ closeDrawer }) {
-  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}>
+        <Link
-          ← View more transactions.
+          to={`/financial-reports/general-ledger`}
+          onClick={handleLinkClick}
+        >
+          ←{formatMessage({ id: 'view_more_transactions' })}
         </Link>
       </div>
     </div>
   );
 }
 
-export default compose(
+export default compose(withDrawerActions)(AccountDrawerTable);
-  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',
+    name: formatMessage({ id: 'estimate_' }),
-    billedTo: 'Billed to',
+    billedTo: formatMessage({ id: 'billed_to' }),
-    date: 'Estimate date',
+    date: formatMessage({ id: 'estimate_date' }),
-    refNo: 'Estimate No.',
+    refNo: formatMessage({ id: 'estimate_no' }),
-    billedFrom: 'Billed from',
+    billedFrom: formatMessage({ id: 'billed_from' }),
-    amount: 'Estimate amount',
+    amount: formatMessage({ id: 'estimate_amount' }),
-    dueDate: 'Due date',
+    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',
+    name: formatMessage({ id: 'payment_receive' }),
-    billedTo: 'Billed to',
+    billedTo: formatMessage({ id: 'billed_to' }),
-    date: 'Payment date',
+    date: formatMessage({ id: 'payment_date_' }),
-    refNo: 'Payment No.',
+    refNo: formatMessage({ id: 'payment_no' }),
-    billedFrom: 'Billed from',
+    billedFrom: formatMessage({ id: 'billed_from' }),
-    referenceNo: 'Reference No',
+    referenceNo: formatMessage({ id: 'reference_no' }),
-    amount: 'Amount received',
+    amount: formatMessage({ id: 'amount_received' }),
-    dueDate: 'Due date',
+    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
+          <T id={'it_is_a_long_established_fact_that_a_reader'} />
-          readable content of a page when looking at its layout.
         </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/Preferences/Accountant/AccountantForm.js

@@ -48,7 +48,11 @@ export default function AccountantForm() {
             <FormGroup inline={true}>
               <Checkbox
                 inline={true}
-                label={'Make account code required when create a new accounts.'}
+                label={
+                  <T
+                    id={'make_account_code_required_when_create_a_new_accounts'}
+                  />
+                }
                 name={'account_code_required'}
                 {...field}
               />
@@ -62,7 +66,11 @@ export default function AccountantForm() {
               <Checkbox
                 inline={true}
                 label={
-                  'Should account code be unique when create a new account.'
+                  <T
+                    id={
+                      'should_account_code_be_unique_when_create_a_new_account'
+                    }
+                  />
                 }
                 name={'account_code_unique'}
                 {...field}
@@ -115,7 +123,11 @@ export default function AccountantForm() {
               </strong>
             }
             helperText={
-              'Select a preferred account to deposit into it after customer make payment.'
+              <T
+                id={
+                  'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
+                }
+              />
             }
             labelInfo={<FieldRequiredHint />}
             intent={inputIntent({ error, touched })}
@@ -147,7 +159,11 @@ export default function AccountantForm() {
               </strong>
             }
             helperText={
-              'Select a preferred account to deposit into it after customer make payment.'
+              <T
+                id={
+                  'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
+                }
+              />
             }
             labelInfo={<FieldRequiredHint />}
             intent={inputIntent({ error, touched })}
@@ -178,7 +194,11 @@ export default function AccountantForm() {
               </strong>
             }
             helperText={
-              'Select a preferred account to deposit into it vendor advanced deposits.'
+              <T
+                id={
+                  'select_a_preferred_account_to_deposit_into_it_vendor_advanced_deposits'
+                }
+              />
             }
             labelInfo={<FieldRequiredHint />}
             intent={inputIntent({ error, touched })}

client/src/containers/Preferences/Currencies/CurrenciesActions.js

@@ -1,15 +1,11 @@
-import React, {useCallback} from 'react';
+import React, { useCallback } from 'react';
-import {
+import { Button, Intent } from '@blueprintjs/core';
-  Button,
-  Intent,
-} from '@blueprintjs/core';
 import Icon from 'components/Icon';
 import withDialogActions from 'containers/Dialog/withDialogActions';
-import {compose} from 'utils';
+import { compose } from 'utils';
+import { FormattedMessage as T } from 'react-intl';
 
-function CurrenciesActions({
+function CurrenciesActions({ openDialog }) {
-  openDialog,
-}) {
   const handleClickNewCurrency = useCallback(() => {
     openDialog('currency-form');
   }, [openDialog]);
@@ -17,15 +13,14 @@ function CurrenciesActions({
   return (
     <div class="users-actions">
       <Button
-        icon={<Icon icon='plus' iconSize={12} />}
+        icon={<Icon icon="plus" iconSize={12} />}
         onClick={handleClickNewCurrency}
-        intent={Intent.PRIMARY}>
+        intent={Intent.PRIMARY}
-        New Currency
+      >
+        <T id={'new_currency'} />
       </Button>
-    </div>    
+    </div>
   );
 }
 
-export default compose(
+export default compose(withDialogActions)(CurrenciesActions);
-  withDialogActions,
-)(CurrenciesActions);

client/src/containers/Preferences/General/GeneralForm.js

@@ -44,7 +44,7 @@ export default function PreferencesGeneralForm({}) {
             inline={true}
             intent={inputIntent({ error, touched })}
             className={'form-group--org-name'}
-            helperText={'Shown on sales forms and purchase orders.'}
+            helperText={<T id={'shown_on_sales_forms_and_purchase_orders'} />}
           >
             <InputGroup medium={'true'} {...field} />
           </FormGroup>
@@ -59,9 +59,7 @@ export default function PreferencesGeneralForm({}) {
             inline={true}
             intent={inputIntent({ error, touched })}
             className={classNames('form-group--select-list', CLASSES.FILL)}
-            helperText={
+            helperText={<T id={'for_reporting_you_can_specify_any_month'} />}
-              'For reporting, you can specify any month as the start of your financial year (also called your financial reporting year or accounting year).'
-            }
           >
             <DateInput
               {...momentFormatter('MMMM Do YYYY')}
@@ -125,7 +123,11 @@ export default function PreferencesGeneralForm({}) {
             inline={true}
             intent={inputIntent({ error, touched })}
             helperText={
-              "You can't change the base currency as there are transactions recorded in your organization."
+              <T
+                id={
+                  'you_can_t_change_the_base_currency_as_there_are_transactions'
+                }
+              />
             }
           >
             <ListSelect

client/src/containers/Preferences/Item/ItemForm.js

@@ -38,7 +38,11 @@ export default function ItemForm() {
               </strong>
             }
             helperText={
-              'Select a preferred account to deposit into it after customer make payment.'
+              <T
+                id={
+                  'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
+                }
+              />
             }
             labelInfo={<FieldRequiredHint />}
             intent={inputIntent({ error, touched })}
@@ -70,7 +74,11 @@ export default function ItemForm() {
               </strong>
             }
             helperText={
-              'Select a preferred account to deposit into it after customer make payment.'
+              <T
+                id={
+                  'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
+                }
+              />
             }
             labelInfo={<FieldRequiredHint />}
             intent={inputIntent({ error, touched })}
@@ -102,7 +110,11 @@ export default function ItemForm() {
               </strong>
             }
             helperText={
-              'Select a preferred account to deposit into it vendor advanced deposits.'
+              <T
+                id={
+                  'select_a_preferred_account_to_deposit_into_it_vendor_advanced_deposits'
+                }
+              />
             }
             labelInfo={<FieldRequiredHint />}
             intent={inputIntent({ error, touched })}

client/src/containers/Preferences/Users/Users.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import { Tabs, Tab } from '@blueprintjs/core';
+import { formatMessage } from 'services/intl';
 import classNames from 'classnames';
 
-import 'style/pages/Preferences/Users.scss'
+import 'style/pages/Preferences/Users.scss';
 
 import { CLASSES } from 'common/classes';
 import PreferencesSubContent from 'components/Preferences/PreferencesSubContent';
@@ -16,15 +17,17 @@ function UsersPreferences({ openDialog }) {
   const onChangeTabs = (currentTabId) => {};
 
   return (
-    <div className={classNames(
+    <div
-      CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
+      className={classNames(
-      CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_USERS,
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
-    )}>
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_USERS,
+      )}
+    >
       <div className={classNames(CLASSES.CARD)}>
         <div className={classNames(CLASSES.PREFERENCES_PAGE_TABS)}>
           <Tabs animate={true} onChange={onChangeTabs}>
-            <Tab id="users" title="Users" />
+            <Tab id="users" title={formatMessage({ id: 'users' })} />
-            <Tab id="roles" title="Roles" />
+            <Tab id="roles" title={formatMessage({ id: 'roles' })} />
           </Tabs>
         </div>
         <PreferencesSubContent preferenceTab="users" />

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',
+      name: formatMessage({ id: 'invoice' }),
-      billedTo: 'Billed to',
+      billedTo: formatMessage({ id: 'billed_to' }),
-      date: 'Invoice date',
+      date: formatMessage({ id: 'invoice_date_' }),
-      refNo: 'Invoice No.',
+      refNo: formatMessage({ id: 'invoice_no__' }),
-      billedFrom: 'Billed from',
+      billedFrom: formatMessage({ id: 'billed_from' }),
-      amount: 'Invoice amount',
+      amount: formatMessage({ id: 'invoice_amount' }),
-      dueDate: 'Due date',
+      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',
+      name: formatMessage({ id: 'receipt_' }),
-      billedTo: 'Billed to',
+      billedTo: formatMessage({ id: 'billed_to' }),
-      date: 'Receipt date',
+      date: formatMessage({ id: 'receipt_date_' }),
-      refNo: 'Receipt No.',
+      refNo: formatMessage({ id: 'receipt_no' }),
-      billedFrom: 'Billed from',
+      billedFrom: formatMessage({ id: 'billed_from' }),
-      amount: 'Receipt amount',
+      amount: formatMessage({ id: 'receipt_amount' }),
-      dueDate: 'Due date',
+      dueDate: formatMessage({ id: 'due_date_' }),
     },
   };
 

client/src/containers/Subscriptions/LicenseTab.js

@@ -28,8 +28,12 @@ function LicenseTab({ openDialog }) {
         <T id={'cards_will_be_charged'} />
       </p>
 
-      <Button onClick={handleSubmitBtnClick} intent={Intent.PRIMARY} large={true}>
+      <Button
-        Submit Voucher
+        onClick={handleSubmitBtnClick}
+        intent={Intent.PRIMARY}
+        large={true}
+      >
+        <T id={'submit_voucher'} />
       </Button>
     </div>
   );

client/src/lang/en/index.json

@@ -939,12 +939,67 @@
   "there_is_no_payable_bills_for_this_vendor_that_can_be_applied_for_this_payment": "There is no payable bills for this vendor that can be applied for this payment",
   "please_select_a_vendor_to_display_all_open_bills_for_it": "Please select a vendor to display all open bills for it.",
   "payment_made_details": "Payment made details",
-  "there_is_no_inventory_adjustments_transactions_yet":"There is no inventory adjustments transactions yet.",
+  "there_is_no_inventory_adjustments_transactions_yet": "There is no inventory adjustments transactions yet.",
-  "create_and_manage_your_organization_s_customers":"Create and manage your organization's customers.",
+  "create_and_manage_your_organization_s_customers": "Create and manage your organization's customers.",
-  "salutation":"Salutation", 
+  "salutation": "Salutation",
-   "work":"work",
+  "work": "work",
-   "mobile":"Mobile",
+  "mobile": "Mobile",
-   "phone":"Phone",
+  "phone": "Phone",
-   "create_and_manage_your_organization_s_vendors":"Create and manage your organization's vendors."
+  "create_and_manage_your_organization_s_vendors": "Create and manage your organization's vendors.",
-
+  "balance_sheet_report": "Balance Sheet Report",
+  "reports_a_company_s_assets_liabilities_and_shareholders": "Reports a company's assets, liabilities and shareholders' equity at a specific point in time with comparison period(s).",
+  "summarizes_the_credit_and_debit_balance_of_each_account": "Summarizes the credit and debit balance of each account in your chart of accounts at a specific point in time.",
+  "profit_loss_report": "Profit/Loss Report",
+  "reports_the_revenues_costs_and_expenses": "Reports the revenues, costs and expenses incurred during a specific point in time with comparison period(s).",
+  "reports_inflow_and_outflow_of_cash_and_cash_equivalents": "Reports inflow and outflow of cash and cash equivalents between a specific two points of time.",
+  "journal_report": "Journal Report",
+  "the_debit_and_credit_entries_of_system_transactions": "The debit and credit entries of system transactions, sorted by date.",
+  "general_ledger_report": "General Ledger Report",
+  "reports_every_transaction_going_in_and_out_of_your": "Reports every transaction going in and out of your accounts and organized by accounts and date to monitoring activity of accounts.",
+  "summarize_total_unpaid_balances_of_customers_invoices": "Summarize total unpaid balances of customers invoices with number of days the unpaid invoice is overdue.",
+  "summarize_total_unpaid_balances_of_vendors_purchase": "Summarize total unpaid balances of vendors purchase invoices with the number of days the unpaid invoice is overdue.",
+  "sales_purchases_reports": "Sales/Purchases Reports",
+  "reports_every_transaction_going_in_and_out_of_your_items": "Reports every transaction going in and out of your items to monitoring activity of items.",
+  "reports_every_transaction_going_in_and_out_of_each_vendor_supplier": "Reports every transaction going in and out of each vendor/supplier.",
+  "reports_every_transaction_going_in_and_out_of_each_customer": "Reports every transaction going in and out of each customer.",
+  "summerize_the_total_amount_your_business_owes_each_vendor": "Summarize the total amount your business owes each vendor.",
+  "summerize_the_total_amount_of_each_customer_owes_your_business": "Summarize the total amount of each customer owes your business.",
+  "summarize_the_business_s_purchase_items_quantity_cost_and_average": "Summarize the business’s purchase items quantity, cost and average cost rate of each item during a specific point in time.",
+  "summarize_the_business_s_sold_items_quantity_income_and_average_income_rate": "Summarize the business’s sold items quantity, income and average income rate of each item during a specific point in time.",
+  "shows_the_average_age_of_unresolved_issues_for_a_project_or_filter": "Shows the average age of unresolved issues for a project or filter. This helps you see whether your backlog is being kept up to date",
+  "categories": "Categories",
+  "duplicate_item": "Duplicate item",
+  "summerize_your_transactions_for_each_inventory_item": "Summarize your transactions for each inventory item and how they affect quantity, valuation and weighted average.",
+  "summerize_how_much_each_customer_owes_your_business": "Summarize how much each customer owes your business.",
+  "duplicate_customer": "Duplicate customer",
+  "duplicate_vendor": "Duplicate vendor",
+  "new_billing": "New Billing",
+  "shown_on_sales_forms_and_purchase_orders": "Shown on sales forms and purchase orders.",
+  "for_reporting_you_can_specify_any_month": "For reporting, you can specify any month as the start of your financial year (also called your financial reporting year or accounting year).",
+  "you_can_t_change_the_base_currency_as_there_are_transactions": "You can't change the base currency as there are transactions recorded in your organization.",
+  "make_account_code_required_when_create_a_new_accounts": "Make account code required when create a new accounts.",
+  "should_account_code_be_unique_when_create_a_new_account": "Should account code be unique when create a new account.",
+  "select_a_preferred_account_to_deposit_into_it_after_customer_make_payment": "Select a preferred account to deposit into it after customer make payment.",
+  "select_a_preferred_account_to_deposit_into_it_vendor_advanced_deposits": "Select a preferred account to deposit into it vendor advanced deposits.",
+  "roles": "Roles",
+  "closing_balance": "Closing Balance",
+  "view_more_transactions": "View more transactions.",
+  "there_is_no_results_in_the_table": "There is no results in the table.",
+  "create_your_first_journal_entries_on_accounts_chart": "Create your first journal entries on accounts chart.",
+  "journal_details": "Journal details",
+  "create_and_manage_your_organization_s_expenses": "Create and manage your organization's expenses",
+  "expense_amount": "Expense Amount",
+  "expense_details": "Expense details",
+  "sub_total": "Sub Total",
+  "estimate_": "Estimate",
+  "billed_to": "Billed to",
+  "estimate_no": "Estimate No.",
+  "billed_from": "Billed from",
+  "estimate_amount": "Estimate amount",
+  "invoice": "Invoice",
+  "receipt_": "Receipt",
+  "receipt_no": "Receipt No.",
+  "receipt_amount": "Receipt amount",
+  "please_enter_your_preferred_payment_method_below": "Please enter your preferred payment method below.",
+  "submit_voucher": "Submit Voucher",
 }

client/src/routes/dashboard.js

@@ -1,4 +1,4 @@
-import { lazy } from 'react';
+import React, { lazy } from 'react';
 import { formatMessage } from 'services/intl';
 
 // const BASE_URL = '/dashboard';
@@ -8,9 +8,9 @@ export default [
   {
     path: `/accounts`,
     component: lazy(() => import('containers/Accounts/AccountsChart')),
-    breadcrumb: 'Accounts Chart',
+    breadcrumb: formatMessage({ id: 'accounts_chart' }),
     hotkey: 'shift+a',
-    pageTitle: 'Accounts Chart',
+    pageTitle: formatMessage({ id: 'accounts_chart' }),
   },
   // Custom views.
   // {
@@ -29,7 +29,7 @@ export default [
     component: lazy(() =>
       import('containers/Accounting/MakeJournal/MakeJournalEntriesPage'),
     ),
-    breadcrumb: 'Make Journal Entry',
+    breadcrumb: formatMessage({ id: 'make_journal_entry' }),
     hotkey: 'ctrl+shift+m',
     pageTitle: formatMessage({ id: 'new_journal' }),
     sidebarExpand: false,
@@ -40,7 +40,7 @@ export default [
     component: lazy(() =>
       import('containers/Accounting/MakeJournal/MakeJournalEntriesPage'),
     ),
-    breadcrumb: 'Edit',
+    breadcrumb: formatMessage({ id: 'edit' }),
     pageTitle: formatMessage({ id: 'edit_journal' }),
     sidebarExpand: false,
     backLink: true,
@@ -50,7 +50,7 @@ export default [
     component: lazy(() =>
       import('containers/Accounting/JournalsLanding/ManualJournalsList'),
     ),
-    breadcrumb: 'Manual Journals',
+    breadcrumb: formatMessage({ id: 'manual_journals' }),
     hotkey: 'shift+m',
     pageTitle: formatMessage({ id: 'manual_journals' }),
   },
@@ -59,7 +59,7 @@ export default [
     component: lazy(() =>
       import('containers/ItemsCategories/ItemCategoriesList'),
     ),
-    breadcrumb: 'Categories',
+    breadcrumb: formatMessage({ id: 'categories' }),
     pageTitle: formatMessage({ id: 'category_list' }),
   },
   // Items.
@@ -67,7 +67,7 @@ export default [
     path: `/items/:id/edit`,
     component: lazy(() => import('containers/Items/ItemFormPage')),
     name: 'item-edit',
-    breadcrumb: 'Edit Item',
+    breadcrumb: formatMessage({ id: 'edit_item' }),
     pageTitle: formatMessage({ id: 'edit_item' }),
     backLink: true,
   },
@@ -76,13 +76,13 @@ export default [
     component: lazy({
       loader: () => import('containers/Items/ItemFormPage'),
     }),
-    breadcrumb: 'Duplicate Item',
+    breadcrumb: formatMessage({ id: 'duplicate_item' }),
   },
   {
     path: `/items/new`,
     component: lazy(() => import('containers/Items/ItemFormPage')),
     name: 'item-new',
-    breadcrumb: 'New Item',
+    breadcrumb: formatMessage({ id: 'new_item' }),
     hotkey: 'ctrl+shift+w',
     pageTitle: formatMessage({ id: 'new_item' }),
     backLink: true,
@@ -90,7 +90,7 @@ export default [
   {
     path: `/items`,
     component: lazy(() => import('containers/Items/ItemsList')),
-    breadcrumb: 'Items',
+    breadcrumb: formatMessage({ id: 'items' }),
     hotkey: 'shift+w',
     pageTitle: formatMessage({ id: 'items_list' }),
   },
@@ -101,7 +101,7 @@ export default [
     component: lazy(() =>
       import('containers/InventoryAdjustments/InventoryAdjustmentList'),
     ),
-    breadcrumb: 'Inventory a adjustments',
+    breadcrumb: formatMessage({ id: 'inventory_adjustments' }),
     pageTitle: formatMessage({ id: 'inventory_adjustment_list' }),
   },
 
@@ -111,8 +111,10 @@ export default [
     component: lazy(() =>
       import('containers/FinancialStatements/GeneralLedger/GeneralLedger'),
     ),
-    breadcrumb: 'General Ledger',
+    breadcrumb: formatMessage({ id: 'general_ledger' }),
-    hint: 'Reports every transaction going in and out of your accounts and organized by accounts and date to monitoring activity of accounts.',
+    hint: formatMessage({
+      id: 'reports_every_transaction_going_in_and_out_of_your',
+    }),
     hotkey: 'shift+4',
     pageTitle: formatMessage({ id: 'general_ledger' }),
     backLink: true,
@@ -123,8 +125,10 @@ export default [
     component: lazy(() =>
       import('containers/FinancialStatements/BalanceSheet/BalanceSheet'),
     ),
-    breadcrumb: 'Balance Sheet',
+    breadcrumb: formatMessage({ id: 'balance_sheet' }),
-    hint: "Reports a company's assets, liabilities and shareholders' equity at a specific point in time with comparison period(s).",
+    hint: formatMessage({
+      id: 'reports_a_company_s_assets_liabilities_and_shareholders',
+    }),
     hotkey: 'shift+1',
     pageTitle: formatMessage({ id: 'balance_sheet' }),
     backLink: true,
@@ -137,8 +141,10 @@ export default [
         'containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet'
       ),
     ),
-    breadcrumb: 'Trial Balance Sheet',
+    breadcrumb: formatMessage({ id: 'trial_balance_sheet' }),
-    hint: 'Summarizes the credit and debit balance of each account in your chart of accounts at a specific point in time. ',
+    hint: formatMessage({
+      id: 'summarizes_the_credit_and_debit_balance_of_each_account',
+    }),
     hotkey: 'shift+5',
     pageTitle: formatMessage({ id: 'trial_balance_sheet' }),
     backLink: true,
@@ -149,8 +155,8 @@ export default [
     component: lazy(() =>
       import('containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet'),
     ),
-    breadcrumb: 'Profit Loss Sheet',
+    breadcrumb: formatMessage({ id: 'profit_loss_sheet' }),
-    hint: 'Reports the revenues, costs and expenses incurred during a specific point in time with comparison period(s).',
+    hint: formatMessage({ id: 'reports_the_revenues_costs_and_expenses' }),
     hotkey: 'shift+2',
     pageTitle: formatMessage({ id: 'profit_loss_sheet' }),
     backLink: true,
@@ -161,8 +167,10 @@ export default [
     component: lazy(() =>
       import('containers/FinancialStatements/ARAgingSummary/ARAgingSummary'),
     ),
-    breadcrumb: 'Receivable Aging Summary',
+    breadcrumb: formatMessage({ id: 'receivable_aging_summary' }),
-    hint: 'Summarize total unpaid balances of customers invoices with number of days the unpaid invoice is overdue.',
+    hint: formatMessage({
+      id: 'summarize_total_unpaid_balances_of_customers_invoices',
+    }),
     pageTitle: formatMessage({ id: 'receivable_aging_summary' }),
     backLink: true,
     sidebarExpand: false,
@@ -172,8 +180,10 @@ export default [
     component: lazy(() =>
       import('containers/FinancialStatements/APAgingSummary/APAgingSummary'),
     ),
-    breadcrumb: 'Payable Aging Summary',
+    breadcrumb: formatMessage({ id: 'payable_aging_summary' }),
-    hint: 'Summarize total unpaid balances of vendors purchase invoices with the number of days the unpaid invoice is overdue.',
+    hint: formatMessage({
+      id: 'summarize_total_unpaid_balances_of_vendors_purchase',
+    }),
     pageTitle: formatMessage({ id: 'payable_aging_summary' }),
     backLink: true,
     sidebarExpand: false,
@@ -183,8 +193,10 @@ export default [
     component: lazy(() =>
       import('containers/FinancialStatements/Journal/Journal'),
     ),
-    breadcrumb: 'Journal Sheet',
+    breadcrumb: formatMessage({ id: 'journal_sheet' }),
-    hint: 'The debit and credit entries of system transactions, sorted by date.',
+    hint: formatMessage({
+      id: 'the_debit_and_credit_entries_of_system_transactions',
+    }),
     hotkey: 'shift+3',
     pageTitle: formatMessage({ id: 'journal_sheet' }),
     sidebarExpand: false,
@@ -197,7 +209,7 @@ export default [
         'containers/FinancialStatements/PurchasesByItems/PurchasesByItems'
       ),
     ),
-    breadcrumb: 'Purchases by Items',
+    breadcrumb: formatMessage({ id: 'purchases_by_items' }),
     // hotkey: '',
     pageTitle: formatMessage({ id: 'purchases_by_items' }),
     backLink: true,
@@ -208,9 +220,11 @@ export default [
     component: lazy(() =>
       import('containers/FinancialStatements/SalesByItems/SalesByItems'),
     ),
-    breadcrumb: 'Sales by Items',
+    breadcrumb: formatMessage({ id: 'sales_by_items' }),
     pageTitle: formatMessage({ id: 'sales_by_items' }),
-    hint: 'Summarize the business’s sold items quantity, income and average income rate of each item during a specific point in time.',
+    hint: formatMessage({
+      id: 'summarize_the_business_s_sold_items_quantity_income_and_average_income_rate',
+    }),
     backLink: true,
     sidebarExpand: false,
   },
@@ -221,8 +235,10 @@ export default [
         'containers/FinancialStatements/InventoryValuation/InventoryValuation'
       ),
     ),
-    breadcrumb: 'Inventory Valuation ',
+    breadcrumb: formatMessage({ id: 'inventory_valuation' }),
-    hint: 'Summerize your transactions for each inventory item and how they affect quantity, valuation and weighted average.',
+    hint: formatMessage({
+      id: 'summerize_your_transactions_for_each_inventory_item',
+    }),
     pageTitle: formatMessage({ id: 'inventory_valuation' }),
     backLink: true,
     sidebarExpand: false,
@@ -234,8 +250,10 @@ export default [
         'containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummary'
       ),
     ),
-    breadcrumb: 'Customers Balance Summary ',
+    breadcrumb: formatMessage({ id: 'customers_balance_summary' }),
-    hint: 'Summerize how much each customer owes your business.',
+    hint: formatMessage({
+      id: 'summerize_how_much_each_customer_owes_your_business',
+    }),
     pageTitle: formatMessage({ id: 'customers_balance_summary' }),
     backLink: true,
     sidebarExpand: false,
@@ -247,8 +265,10 @@ export default [
         'containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummary'
       ),
     ),
-    breadcrumb: 'Vendors Balance Summary ',
+    breadcrumb: formatMessage({ id: 'vendors_balance_summary' }),
-    hint: 'Summerize the total amount your business owes each vendor.',
+    hint: formatMessage({
+      id: 'summerize_the_total_amount_your_business_owes_each_vendor',
+    }),
     pageTitle: formatMessage({ id: 'vendors_balance_summary' }),
     backLink: true,
     sidebarExpand: false,
@@ -260,8 +280,10 @@ export default [
         'containers/FinancialStatements/CustomersTransactions/CustomersTransactions'
       ),
     ),
-    breadcrumb: 'Customers Transactions ',
+    breadcrumb: formatMessage({ id: 'customers_transactions' }),
-    hint: 'Reports every transaction going in and out of each customer.',
+    hint: formatMessage({
+      id: 'reports_every_transaction_going_in_and_out_of_each_customer',
+    }),
     pageTitle: formatMessage({ id: 'customers_transactions' }),
     backLink: true,
     sidebarExpand: false,
@@ -273,8 +295,10 @@ export default [
         'containers/FinancialStatements/VendorsTransactions/VendorsTransactions'
       ),
     ),
-    breadcrumb: 'Vendors Transactions ',
+    breadcrumb: formatMessage({ id: 'vendors_transactions' }),
-    hint: 'Reports every transaction going in and out of each vendor/supplier.',
+    hint: formatMessage({
+      id: 'reports_every_transaction_going_in_and_out_of_each_vendor_supplier',
+    }),
     pageTitle: formatMessage({ id: 'vendors_transactions' }),
     backLink: true,
     sidebarExpand: false,
@@ -286,8 +310,10 @@ export default [
         'containers/FinancialStatements/CashFlowStatement/CashFlowStatement'
       ),
     ),
-    breadcrumb: 'Cash Flow Statement',
+    breadcrumb: formatMessage({ id: 'cash_flow_statement' }),
-    hint: 'Reports inflow and outflow of cash and cash equivalents between a specific two points of time.',
+    hint: formatMessage({
+      id: 'reports_inflow_and_outflow_of_cash_and_cash_equivalents',
+    }),
     pageTitle: formatMessage({ id: 'cash_flow_statement' }),
     backLink: true,
     sidebarExpand: false,
@@ -299,8 +325,10 @@ export default [
         'containers/FinancialStatements/InventoryItemDetails/InventoryItemDetails'
       ),
     ),
-    breadcrumb: 'Inventory Item Details',
+    breadcrumb: formatMessage({ id: 'inventory_item_details' }),
-    hint: 'Reports every transaction going in and out of your items to monitoring activity of items.',
+    hint: formatMessage({
+      id: 'reports_every_transaction_going_in_and_out_of_your_items',
+    }),
     pageTitle: formatMessage({ id: 'inventory_item_details' }),
     backLink: true,
     sidebarExpand: false,
@@ -310,14 +338,14 @@ export default [
     component: lazy(() =>
       import('containers/FinancialStatements/FinancialReports'),
     ),
-    breadcrumb: 'Financial Reports',
+    breadcrumb: formatMessage({ id: 'financial_reports' }),
     pageTitle: formatMessage({ id: 'all_financial_reports' }),
   },
   // Exchange Rates
   {
     path: `/exchange-rates`,
     component: lazy(() => import('containers/ExchangeRates/ExchangeRatesList')),
-    breadcrumb: 'Exchange Rates',
+    breadcrumb: formatMessage({ id: 'exchange_rates_list' }),
     pageTitle: formatMessage({ id: 'exchange_rates_list' }),
   },
   // Expenses.
@@ -326,7 +354,7 @@ export default [
     component: lazy(() =>
       import('containers/Expenses/ExpenseForm/ExpenseFormPage'),
     ),
-    breadcrumb: 'Expenses',
+    breadcrumb: formatMessage({ id: 'expenses' }),
     hotkey: 'ctrl+shift+x',
     pageTitle: formatMessage({ id: 'new_expense' }),
     sidebarExpand: false,
@@ -337,7 +365,7 @@ export default [
     component: lazy(() =>
       import('containers/Expenses/ExpenseForm/ExpenseFormPage'),
     ),
-    breadcrumb: 'Edit',
+    breadcrumb: formatMessage({ id: 'edit' }),
     pageTitle: formatMessage({ id: 'edit_expense' }),
     sidebarExpand: false,
     backLink: true,
@@ -347,7 +375,7 @@ export default [
     component: lazy(() =>
       import('containers/Expenses/ExpensesLanding/ExpensesList'),
     ),
-    breadcrumb: 'Expenses List',
+    breadcrumb: formatMessage({ id: 'expenses_list' }),
     pageTitle: formatMessage({ id: 'expenses_list' }),
     hotkey: 'shift+x',
   },
@@ -359,7 +387,7 @@ export default [
       import('containers/Customers/CustomerForm/CustomerFormPage'),
     ),
     name: 'customer-edit',
-    breadcrumb: 'Edit Customer',
+    breadcrumb: formatMessage({ id: 'edit_customer' }),
     pageTitle: formatMessage({ id: 'edit_customer' }),
     backLink: true,
   },
@@ -369,7 +397,7 @@ export default [
       import('containers/Customers/CustomerForm/CustomerFormPage'),
     ),
     name: 'customer-new',
-    breadcrumb: 'New Customer',
+    breadcrumb: formatMessage({ id: 'new_customer' }),
     hotkey: 'ctrl+shift+c',
     pageTitle: formatMessage({ id: 'new_customer' }),
     backLink: true,
@@ -379,7 +407,7 @@ export default [
     component: lazy(() =>
       import('containers/Customers/CustomersLanding/CustomersList'),
     ),
-    breadcrumb: 'Customers',
+    breadcrumb: formatMessage({ id: 'customers' }),
     hotkey: 'shift+c',
     pageTitle: formatMessage({ id: 'customers_list' }),
   },
@@ -389,7 +417,7 @@ export default [
       import('containers/Customers/CustomerForm/CustomerFormPage'),
     ),
     name: 'duplicate-customer',
-    breadcrumb: 'Duplicate  Customer',
+    breadcrumb: formatMessage({ id: 'duplicate_customer' }),
     pageTitle: formatMessage({ id: 'new_customer' }),
     backLink: true,
   },
@@ -401,7 +429,7 @@ export default [
       import('containers/Vendors/VendorForm/VendorFormPage'),
     ),
     name: 'vendor-edit',
-    breadcrumb: 'Edit Vendor',
+    breadcrumb: formatMessage({ id: 'edit_vendor' }),
     pageTitle: formatMessage({ id: 'edit_vendor' }),
     backLink: true,
   },
@@ -411,7 +439,7 @@ export default [
       import('containers/Vendors/VendorForm/VendorFormPage'),
     ),
     name: 'vendor-new',
-    breadcrumb: 'New Vendor',
+    breadcrumb: formatMessage({ id: 'new_vendor' }),
     hotkey: 'ctrl+shift+v',
     pageTitle: formatMessage({ id: 'new_vendor' }),
     backLink: true,
@@ -421,7 +449,7 @@ export default [
     component: lazy(() =>
       import('containers/Vendors/VendorsLanding/VendorsList'),
     ),
-    breadcrumb: 'Vendors',
+    breadcrumb: formatMessage({ id: 'vendors' }),
     hotkey: 'shift+v',
     pageTitle: formatMessage({ id: 'vendors_list' }),
   },
@@ -431,7 +459,7 @@ export default [
       import('containers/Vendors/VendorForm/VendorFormPage'),
     ),
     name: 'duplicate-vendor',
-    breadcrumb: 'Duplicate  Vendor',
+    breadcrumb: formatMessage({ id: 'duplicate_vendor' }),
     pageTitle: formatMessage({ id: 'new_vendor' }),
     backLink: true,
   },
@@ -443,7 +471,7 @@ export default [
       import('containers/Sales/Estimates/EstimateForm/EstimateFormPage'),
     ),
     name: 'estimate-edit',
-    breadcrumb: 'Edit',
+    breadcrumb: formatMessage({ id: 'edit' }),
     pageTitle: formatMessage({ id: 'edit_estimate' }),
     backLink: true,
     sidebarExpand: false,
@@ -454,7 +482,7 @@ export default [
       import('containers/Sales/Estimates/EstimateForm/EstimateFormPage'),
     ),
     name: 'convert-to-invoice',
-    breadcrumb: 'New Estimate',
+    breadcrumb: formatMessage({ id: 'new_estimate' }),
     pageTitle: formatMessage({ id: 'new_estimate' }),
     backLink: true,
     sidebarExpand: false,
@@ -465,7 +493,7 @@ export default [
       import('containers/Sales/Estimates/EstimateForm/EstimateFormPage'),
     ),
     name: 'estimate-new',
-    breadcrumb: 'New Estimate',
+    breadcrumb: formatMessage({ id: 'new_estimate' }),
     hotkey: 'ctrl+shift+e',
     pageTitle: formatMessage({ id: 'new_estimate' }),
     backLink: true,
@@ -477,7 +505,7 @@ export default [
       import('containers/Sales/Estimates/EstimatesLanding/EstimatesList'),
     ),
     name: 'estimates-list',
-    breadcrumb: 'Estimates List',
+    breadcrumb: formatMessage({ id: 'estimates_list' }),
     hotkey: 'shift+e',
     pageTitle: formatMessage({ id: 'estimates_list' }),
   },
@@ -489,7 +517,7 @@ export default [
       import('containers/Sales/Invoices/InvoiceForm/InvoiceFormPage'),
     ),
     name: 'invoice-edit',
-    breadcrumb: 'Edit',
+    breadcrumb: formatMessage({ id: 'edit' }),
     pageTitle: formatMessage({ id: 'edit_invoice' }),
     sidebarExpand: false,
     backLink: true,
@@ -500,7 +528,7 @@ export default [
       import('containers/Sales/Invoices/InvoiceForm/InvoiceFormPage'),
     ),
     name: 'invoice-new',
-    breadcrumb: 'New Invoice',
+    breadcrumb: formatMessage({ id: 'new_invoice' }),
     hotkey: 'ctrl+shift+i',
     pageTitle: formatMessage({ id: 'new_invoice' }),
     sidebarExpand: false,
@@ -511,7 +539,7 @@ export default [
     component: lazy(() =>
       import('containers/Sales/Invoices/InvoicesLanding/InvoicesList'),
     ),
-    breadcrumb: 'Invoices List',
+    breadcrumb: formatMessage({ id: 'invoices_list' }),
     hotkey: 'shift+i',
     pageTitle: formatMessage({ id: 'invoices_list' }),
   },
@@ -523,7 +551,7 @@ export default [
       import('containers/Sales/Receipts/ReceiptForm/ReceiptFormPage'),
     ),
     name: 'receipt-edit',
-    breadcrumb: 'Edit',
+    breadcrumb: formatMessage({ id: 'edit' }),
     pageTitle: formatMessage({ id: 'edit_receipt' }),
     backLink: true,
     sidebarExpand: false,
@@ -534,7 +562,7 @@ export default [
       import('containers/Sales/Receipts/ReceiptForm/ReceiptFormPage'),
     ),
     name: 'receipt-new',
-    breadcrumb: 'New Receipt',
+    breadcrumb: formatMessage({ id: 'new_receipt' }),
     hotkey: 'ctrl+shift+r',
     pageTitle: formatMessage({ id: 'new_receipt' }),
     backLink: true,
@@ -545,7 +573,7 @@ export default [
     component: lazy(() =>
       import('containers/Sales/Receipts/ReceiptsLanding/ReceiptsList'),
     ),
-    breadcrumb: 'Receipts List',
+    breadcrumb: formatMessage({ id: 'receipts_list' }),
     hotkey: 'shift+r',
     pageTitle: formatMessage({ id: 'receipts_list' }),
   },
@@ -559,7 +587,7 @@ export default [
       ),
     ),
     name: 'payment-receive-edit',
-    breadcrumb: 'Edit',
+    breadcrumb: formatMessage({ id: 'edit' }),
     pageTitle: formatMessage({ id: 'edit_payment_receive' }),
     backLink: true,
     sidebarExpand: false,
@@ -572,7 +600,7 @@ export default [
       ),
     ),
     name: 'payment-receive-new',
-    breadcrumb: 'New Payment Receive',
+    breadcrumb: formatMessage({ id: 'new_payment_receive' }),
     pageTitle: formatMessage({ id: 'new_payment_receive' }),
     backLink: true,
     sidebarExpand: false,
@@ -584,7 +612,7 @@ export default [
         'containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesList'
       ),
     ),
-    breadcrumb: 'Payment Receives List',
+    breadcrumb: formatMessage({ id: 'payment_receives_list' }),
     pageTitle: formatMessage({ id: 'payment_receives_list' }),
   },
 
@@ -595,7 +623,7 @@ export default [
       import('containers/Purchases/Bills/BillForm/BillFormPage'),
     ),
     name: 'bill-edit',
-    breadcrumb: 'Edit',
+    breadcrumb: formatMessage({ id: 'edit' }),
     pageTitle: formatMessage({ id: 'edit_bill' }),
     sidebarExpand: false,
     backLink: true,
@@ -606,7 +634,7 @@ export default [
       import('containers/Purchases/Bills/BillForm/BillFormPage'),
     ),
     name: 'bill-new',
-    breadcrumb: 'New Bill',
+    breadcrumb: formatMessage({ id: 'new_bill' }),
     hotkey: 'ctrl+shift+b',
     pageTitle: formatMessage({ id: 'new_bill' }),
     sidebarExpand: false,
@@ -617,7 +645,7 @@ export default [
     component: lazy(() =>
       import('containers/Purchases/Bills/BillsLanding/BillsList'),
     ),
-    breadcrumb: 'Bills List',
+    breadcrumb: formatMessage({ id: 'bills_list' }),
     hotkey: 'shift+b',
     pageTitle: formatMessage({ id: 'bills_list' }),
   },
@@ -626,7 +654,7 @@ export default [
   {
     path: `/billing`,
     component: lazy(() => import('containers/Subscriptions/BillingForm')),
-    breadcrumb: 'New Billing',
+    breadcrumb: formatMessage({ id: 'new_billing' }),
   },
   // Payment modes.
   {
@@ -637,7 +665,7 @@ export default [
       ),
     ),
     name: 'payment-made-edit',
-    breadcrumb: 'Edit',
+    breadcrumb: formatMessage({ id: 'edit' }),
     pageTitle: formatMessage({ id: 'edit_payment_made' }),
     sidebarExpand: false,
     backLink: true,
@@ -650,7 +678,7 @@ export default [
       ),
     ),
     name: 'payment-made-new',
-    breadcrumb: 'New Payment Made',
+    breadcrumb: formatMessage({ id: 'new_payment_made' }),
     pageTitle: formatMessage({ id: 'new_payment_made' }),
     sidebarExpand: false,
     backLink: true,
@@ -662,13 +690,13 @@ export default [
         'containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeList'
       ),
     ),
-    breadcrumb: 'Payment Made List',
+    breadcrumb: formatMessage({ id: 'payment_made_list' }),
     pageTitle: formatMessage({ id: 'payment_made_list' }),
   },
   // Homepage
   {
     path: `/`,
     component: lazy(() => import('containers/Homepage/Homepage')),
-    breadcrumb: 'Home',
+    breadcrumb: formatMessage({ id: 'homepage' }),
   },
 ];