WIP: Arabic localization.

client/src/common/countries.js

@@ -1,5 +1,3 @@
+import intl from 'react-intl-universal';
 
-
-export default [
-  { name: 'Libya', value: 'libya' },
-]
+export default [{ name: intl.get('libya'), value: 'libya' }];

client/src/common/currencies.js

@@ -1,5 +1,7 @@
+import intl from 'react-intl-universal';
+
 export default [
-  { name: 'US Dollar', code: 'USD' },
-  { name: 'Euro', code: 'EUR' },
-  { name: 'Libyan Dinar	', code: 'LYD' },
-]
+  { name: intl.get('us_dollar'), code: 'USD' },
+  { name: intl.get('euro'), code: 'EUR' },
+  { name: intl.get('libyan_diner'), code: 'LYD' },
+];

client/src/common/dateFormatsOptions.js

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

client/src/common/languagesOptions.js

@@ -1,6 +1,6 @@
-
+import intl from 'react-intl-universal';
 
 export default [
-  { name: 'English', value: 'en' },
-  { name: 'Arabic', value: 'ar' },
-];
+  { name: intl.get('english'), value: 'en' },
+  { name: intl.get('arabic'), value: 'ar' },
+];

client/src/common/numberFormatsOptions.js

@@ -1,7 +1,9 @@
+import intl from 'react-intl-universal';
+
 export const moneyFormat = [
-  { key: 'total', text: 'Total rows' },
-  { key: 'always', text: 'Always' },
-  { key: 'none', text: 'None' },
+  { key: 'total', text: intl.get('total_rows') },
+  { key: 'always', text: intl.get('always') },
+  { key: 'none', text: intl.get('none') },
 ];
 
 export const negativeFormat = [

client/src/components/AccountsSuggestField.js

@@ -1,6 +1,7 @@
 import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import { MenuItem } from '@blueprintjs/core';
 import { Suggest } from '@blueprintjs/select';
+import intl from 'react-intl-universal';
 
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
@@ -15,7 +16,7 @@ export default function AccountsSuggestField({
   accounts,
   initialAccountId,
   selectedAccountId,
-  defaultSelectText = 'Select account',
+  defaultSelectText = intl.formatMessage({ id: 'select_account' }),
   popoverFill = false,
   onAccountSelected,
 
@@ -32,7 +33,7 @@ export default function AccountsSuggestField({
       filterByRootTypes,
       filterByParentTypes,
       filterByTypes,
-      filterByNormal,  
+      filterByNormal,
     });
     return filteredAccounts;
   }, [

client/src/components/App.js

@@ -5,6 +5,8 @@ import { QueryClientProvider, QueryClient } from 'react-query';
 import { ReactQueryDevtools } from 'react-query/devtools';
 
 import 'style/App.scss';
+import 'moment/locale/ar-ly';
+import 'moment/locale/es-us'
 
 import AppIntlLoader from './AppIntlLoader';
 import PrivateRoute from 'components/Guards/PrivateRoute';

client/src/components/AppIntlLoader.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import moment from 'moment';
 import intl from 'react-intl-universal';
 import { find } from 'lodash';
 import rtlDetect from 'rtl-detect';
@@ -68,6 +69,7 @@ export default function AppIntlLoader({
         },
       });
     }).then(() => {
+      moment.locale('ar-ly');
       setIsLoading(false);
     });
   }, [currentLocale, setIsLoading]);

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 intl from 'react-intl-universal';
 
 import AccountsSuggestField from 'components/AccountsSuggestField';
 
@@ -61,6 +62,7 @@ export default function AccountCellRenderer({
         filterByTypes={filterAccountsByTypes}
         inputProps={{
           inputRef: (ref) => (accountRef.current = ref),
+          placeholder: intl.get('search'),
         }}
         openOnKeyDown={true}
         blurOnSelectClose={false}

client/src/components/SalutationList.js

@@ -4,7 +4,13 @@ import intl from 'react-intl-universal';
 import { ListSelect } from 'components';
 
 export default function SalutationList({ ...restProps }) {
-  const saluations = ['Mr.', 'Mrs.', 'Ms.', 'Miss', 'Dr.'];
+  const saluations = [
+    intl.get('mr'),
+    intl.get('mrs'),
+    intl.get('ms'),
+    intl.get('miss'),
+    intl.get('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 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}

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

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

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

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

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>

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

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>

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

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>

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

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/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',
+    ),
   },
 ];
 

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;
-};
+};

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

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

@@ -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>

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.",
@@ -1030,5 +1030,76 @@
   "create_a_new_bill": "Create a new bill.",
   "create_a_new_make_journal": "Create a new Make Journal.",
   "create_a_new_item": "Create a new item.",
-  "close_and_open_sidebar": "Close and open sidebar."
+  "close_and_open_sidebar": "Close and open sidebar.",
+  "and_over": "And Over",
+  "date_year": "Date/Year",
+  "date_month": "Date/Month",
+  "date_week": "Date/Week",
+  "date_day": "Date/Day",
+  "date_quarter": "Date/Quarter",
+  "today": "Today",
+  "this_week": "This Week",
+  "this_month": "This Month",
+  "this_quarter": "This Quarter",
+  "this_year": "This Year",
+  "custom_range": "Custom Range",
+  "total_rows": "Total rows",
+  "always": "Always",
+  "none": "None",
+  "us_dollar": "US Dollar",
+  "euro": "Euro",
+  "libyan_diner": "Libyan Diner",
+  "english": "English",
+  "arabic": "Arabic",
+  "just_a_moment_we_re_calculating_your_cost_transactions": "Just a moment! We're calculating your cost transactions and this doesn't take much time.Please check after sometime.",
+  "refresh": "Refresh",
+  "total_name": "Total {name}",
+  "income": "Income",
+  "total_income": "Total Income",
+  "cost_of_sales": "Cost of sales",
+  "total_cost_of_sales": "Total cost of sales",
+  "gross_profit": "Gross profit",
+  "total_expenses": "Total Expenses",
+  "net_operating_income": "Net Operating income",
+  "other_income": "Other Income",
+  "total_other_income": "Total other income",
+  "other_expenses": "Other expenses",
+  "total_other_expenses": "Total other expenses",
+  "net_other_income": "Net other 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"
 }

client/src/style/pages/fonts.scss

@@ -34,7 +34,7 @@
 @font-face {
   font-family: Noto Sans Arabic;
   src: local('Noto Sans'),
-    url('../fonts/NotoSansArabicUI-Regular.woff') format('woff');
+    url('../fonts/NotoSansArabicUI-SemiCondensed.woff') format('woff');
   font-style: normal;
   font-weight: 400;
   font-display: swap;
@@ -44,57 +44,17 @@
 @font-face {
   font-family: Noto Sans Arabic;
   src: local('Noto Sans'),
-    url('../fonts/NotoSansArabicUI-Black.woff') format('woff');
+    url('../fonts/NotoSansArabicUI-SemiCondensedBlack.woff') format('woff');
   font-style: normal;
   font-weight: 900;
   font-display: swap;
 }
 
-// arabic Bold
-@font-face {
-  font-family: Noto Sans Arabic;
-  src: local('Noto Sans'),
-    url('../fonts/NotoSansArabicUI-Bold.woff') format('woff');
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-}
-
-// arabic ExtraBold
-@font-face {
-  font-family: Noto Sans Arabic;
-  src: local('Noto Sans'),
-    url('../fonts/NotoSansArabicUI-ExtraBold.woff') format('woff');
-  font-style: normal;
-  font-weight: 800;
-  font-display: swap;
-}
-
-//arabic light
-@font-face {
-  font-family: Noto Sans Arabic;
-  src: local('Noto Sans'),
-    url('../fonts/NotoSansArabicUI-Light.woff') format('woff');
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-}
-
-//arabic ExtraLight
-@font-face {
-  font-family: Noto Sans Arabic;
-  src: local('Noto Sans'),
-    url('../fonts/NotoSansArabicUI-ExtraLight.woff') format('woff');
-  font-style: normal;
-  font-weight: 200;
-  font-display: swap;
-}
-
 //arabic Medium
 @font-face {
   font-family: Noto Sans Arabic;
   src: local('Noto Sans'),
-    url('../fonts/NotoSansArabicUI-Medium.woff') format('woff');
+    url('../fonts/NotoSansArabicUI-SemiCondensedMedium.woff') format('woff');
   font-style: normal;
   font-weight: 500;
   font-display: swap;
@@ -104,18 +64,8 @@
 @font-face {
   font-family: Noto Sans Arabic;
   src: local('Noto Sans'),
-    url('../fonts/NotoSansArabicUI-SemiBold.woff') format('woff');
+    url('../fonts/NotoSansArabicUI-SemiCondensedSemiBold.woff') format('woff');
   font-style: normal;
   font-weight: 600;
   font-display: swap;
 }
-
-//arabic Thin
-@font-face {
-  font-family: Noto Sans Arabic;
-  src: local('Noto Sans'),
-    url('../fonts/NotoSansArabicUI-Thin.woff') format('woff');
-  font-style: normal;
-  font-weight: 100;
-  font-display: swap;
-}