feat: lang.

client/src/common/countries.js

@@ -1,5 +1,3 @@
+import { formatMessage } from 'services/intl';
 
-
-export default [
-  { name: 'Libya', value: 'libya' },
-]
+export default [{ name: formatMessage({ id: 'libya' }), value: 'libya' }];

client/src/common/dateFormatsOptions.js

@@ -1,40 +1,41 @@
 import moment from 'moment';
+import { formatMessage } from 'services/intl';
 
 export default [
   {
     id: 1,
-    name: 'MM/DD/YY',
+    name: formatMessage({ id: 'mm_dd_yy' }),
     label: `${moment().format('MM/DD/YYYY')}`,
     value: 'mm/dd/yy',
   },
   {
     id: 2,
-    name: 'DD/MM/YY',
+    name: formatMessage({ id: 'dd_mm_yy' }),
     label: `${moment().format('DD/MM/YYYY')}`,
     value: 'dd/mm/yy',
   },
   {
     id: 3,
-    name: 'YY/MM/DD',
+    name: formatMessage({ id: 'yy_mm_dd' }),
     label: `${moment().format('YYYY/MM/DD')}`,
     value: 'yy/mm/dd',
   },
   {
     id: 4,
-    name: 'MM-DD-YY',
+    name: formatMessage({ id: 'mm_dd_yy' }),
     label: `${moment().format('MM-DD-YYYY')}`,
     value: 'mm-dd-yy',
   },
   {
     id: 5,
-    name: 'DD-MM-YY',
+    name: formatMessage({ id: 'dd_mm_yy_' }),
     label: `${moment().format('DD-MM-YYYY')}`,
     value: 'dd-mm-yy',
   },
   {
     id: 6,
-    name: 'YY-MM-DD',
+    name: formatMessage({ id: 'yy_mm_dd_' }),
     label: `${moment().format('YYYY-MM-DD')}`,
     value: 'yy-mm-dd',
   },
-]
+];

client/src/components/AccountsSuggestField.js

@@ -6,6 +6,8 @@ import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 
 import { FormattedMessage as T } from 'react-intl';
+import { formatMessage } from 'services/intl';
+
 import { filterAccountsByQuery } from './utils';
 
 /**
@@ -15,7 +17,7 @@ export default function AccountsSuggestField({
   accounts,
   initialAccountId,
   selectedAccountId,
-  defaultSelectText = 'Select account',
+  defaultSelectText = formatMessage({ id: 'select_account' }),
   popoverFill = false,
   onAccountSelected,
 
@@ -32,7 +34,7 @@ export default function AccountsSuggestField({
       filterByRootTypes,
       filterByParentTypes,
       filterByTypes,
-      filterByNormal,  
+      filterByNormal,
     });
     return filteredAccounts;
   }, [

client/src/components/DataTableCells/AccountsListFieldCell.js

@@ -1,6 +1,7 @@
 import React, { useRef, useCallback, useMemo } from 'react';
 import classNames from 'classnames';
 import { useCellAutoFocus } from 'hooks';
+import { formatMessage } from 'services/intl';
 
 import AccountsSuggestField from 'components/AccountsSuggestField';
 
@@ -61,6 +62,7 @@ export default function AccountCellRenderer({
         filterByTypes={filterAccountsByTypes}
         inputProps={{
           inputRef: (ref) => (accountRef.current = ref),
+          placeholder: formatMessage({ id: 'search' }),
         }}
         openOnKeyDown={true}
         blurOnSelectClose={false}

client/src/components/SalutationList.js

@@ -4,7 +4,13 @@ import { formatMessage } from 'services/intl';
 import { ListSelect } from 'components';
 
 export default function SalutationList({ ...restProps }) {
-  const saluations = ['Mr.', 'Mrs.', 'Ms.', 'Miss', 'Dr.'];
+  const saluations = [
+    formatMessage({ id: 'mr' }),
+    formatMessage({ id: 'mrs' }),
+    formatMessage({ id: 'ms' }),
+    formatMessage({ id: 'miss' }),
+    formatMessage({ id: 'dr' }),
+  ];
   const items = saluations.map((saluation) => ({
     key: saluation,
     label: saluation,

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 { formatMessage } from 'services/intl';
+
 
 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={formatMessage({id:'all_accounts_'})}
           currentViewId={accountsCustomViewId}
           resourceName={'accounts'}
           onChange={handleTabChange}

client/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.js

@@ -44,7 +44,7 @@ export default function CustomerFormAfterPrimarySection({}) {
             {({ field, meta: { error, touched } }) => (
               <InputGroup
                 intent={inputIntent({ error, touched })}
-                placeholder={formatMessage({id:'Mobile'})}
+                placeholder={formatMessage({ id: 'Mobile' })}
                 {...field}
               />
             )}

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);

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>

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

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>

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

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

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

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

client/src/containers/Items/ItemFormPrimarySection.js

@@ -7,7 +7,7 @@ import {
   Radio,
   Position,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T, FormattedHTMLMessage } from 'react-intl';
 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>
     </>
   );

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

client/src/containers/Preferences/Accountant/AccountantForm.js

@@ -102,7 +102,7 @@ export default function AccountantForm() {
                 setFieldValue('accounting_basis', _value);
               })}
             >
-              <Radio label={formatMessage({ id: 'Cash' })} value="cash" />
+              <Radio label={formatMessage({ id: 'cash' })} value="cash" />
               <Radio label={formatMessage({ id: 'accrual' })} value="accrual" />
             </RadioGroup>
           </FormGroup>

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);

client/src/lang/en/index.json

@@ -909,7 +909,7 @@
   "accounting": "Accounting",
   "system": "SYSTEM",
   "it_s_time_to_send_estimates_to_your_customers": "It's time to send estimates to your customers",
-  "it_is_a_long_established_fact_that_a_reader": " It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.",
+  "it_is_a_long_established_fact_that_a_reader": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.",
   "new_sale_estimate": "New sale estimate",
   "learn_more": "Learn more",
   "back_to_list": "Back to list.",
@@ -1066,5 +1066,40 @@
   "other_expenses": "Other expenses",
   "total_other_expenses": "Total other expenses",
   "net_other_income": "Net other income",
-  "net_income": "Net Income"
+  "net_income": "Net Income",
+  "services_that_you_provide_to_customers": "<strong> Service :</strong> Services that you provide to customers.",
+  "products_you_buy_and_or_sell": "<strong> Inventory :</strong> Products you buy and/or sell and that you track quantities of.",
+  "products_you_buy_and_or_sell_but_don_t_need": "<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.",
+  "there_is_no_items_in_the_table_yet": "There is no items in the table yet.",
+  "congrats_you_are_ready_to_go": "Congrats! You are ready to go",
+  "go_to_dashboard": "Go to dashboard",
+  "mr": "Mr.",
+  "mrs": "Mrs.",
+  "ms": "Ms.",
+  "miss": "Miss.",
+  "dr": "Dr.",
+  "all_accounts_": "All Accounts",
+  "search": "Search...",
+  "starter": "Starter",
+  "sale_and_purchase_invoices": "Sale and purchase invoices.",
+  "customers_vendors_accounts": "Customers/vendors accounts.",
+  "expense_tracking": "Expense tracking.",
+  "for_one_user_and_accountant": "For one user and accountant.",
+  "all_capital_starter_features": "All Capital Starter features.",
+  "multi_currency": "Multi-currency.",
+  "purchase_and_sell_orders": "Purchase and sell orders.",
+  "inventory_management": "Inventory management.",
+  "three_users_with_your_accountant": "Three users with your accountant.",
+  "advanced_financial_reports": "Advanced financial reports.",
+  "all_capital_essential_features": "All Capital Essential features.",
+  "track_multi_branches_and_locations": "Track multi-branches and locations.",
+  "projects_accounting_and_timesheets": "Projects accounting and timesheets.",
+  "accounting_dimensions": "Accounting dimensions",
+  "libya": "Libya",
+  "mm_dd_yy": "MM/DD/YY",
+  "dd_mm_yy": "DD/MM/YY",
+  "yy_mm_dd": "YY/MM/DD",
+  "mm_dd_yy_": "MM-DD-YY",
+  "dd_mm_yy_": "DD-MM-YY",
+  "yy_mm_dd_": "YY-MM-DD"
 }