Merge branch 'feature/i18n-arabic' of https://github.com/abouolia/Ratteb into feature/i18n-arabic

client/src/components/AppIntlLoader.js

@@ -6,8 +6,8 @@ import rtlDetect from 'rtl-detect';
 import DashboardLoadingIndicator from 'components/Dashboard/DashboardLoadingIndicator';
 
 const SUPPORTED_LOCALES = [
-  { name: "English", value: "en" },
+  { name: 'English', value: 'en' },
-  { name: 'العربية', value: 'ar' }
+  { name: 'العربية', value: 'ar-ly' },
 ];
 
 /**
@@ -15,12 +15,12 @@ const SUPPORTED_LOCALES = [
  */
 function getCurrentLocal() {
   let currentLocale = intl.determineLocale({
-    urlLocaleKey: "lang",
+    urlLocaleKey: 'lang',
-    cookieLocaleKey: "lang",
+    cookieLocaleKey: 'lang',
-    localStorageLocaleKey: "lang",
+    localStorageLocaleKey: 'lang',
   });
   if (!find(SUPPORTED_LOCALES, { value: currentLocale })) {
-    currentLocale = "en";
+    currentLocale = 'en';
   }
   return currentLocale;
 }
@@ -50,9 +50,7 @@ function useDocumentDirectionModifier(locale) {
 /**
  * Application Intl loader.
  */
-export default function AppIntlLoader({
+export default function AppIntlLoader({ children }) {
-  children
-}) {
   const [isLoading, setIsLoading] = React.useState(true);
   const currentLocale = getCurrentLocal();
 
@@ -61,17 +59,19 @@ export default function AppIntlLoader({
 
   React.useEffect(() => {
     // Lodas the locales data file.
-    loadLocales(currentLocale).then((results) => {
+    loadLocales(currentLocale)
-      return intl.init({
+      .then((results) => {
-        currentLocale,
+        return intl.init({
-        locales: {
+          currentLocale,
-          [currentLocale]: results,
+          locales: {
-        },
+            [currentLocale]: results,
+          },
+        });
+      })
+      .then(() => {
+        moment.locale(currentLocale);
+        setIsLoading(false);
       });
-    }).then(() => {
-      moment.locale('ar-ly');
-      setIsLoading(false);
-    });
   }, [currentLocale, setIsLoading]);
 
   return (

client/src/components/ContactsMultiSelect.js

@@ -3,6 +3,7 @@ import { MenuItem, Button } from '@blueprintjs/core';
 import { omit } from 'lodash';
 import MultiSelect from 'components/MultiSelect';
 import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 
 export default function ContactsMultiSelect({
   contacts,
@@ -31,9 +32,10 @@ export default function ContactsMultiSelect({
     [isContactSelect],
   );
 
-  const countSelected = useMemo(() => Object.values(selectedContacts).length, [
+  const countSelected = useMemo(
-    selectedContacts,
+    () => Object.values(selectedContacts).length,
-  ]);
+    [selectedContacts],
+  );
 
   const onContactSelect = useCallback(
     ({ id }) => {
@@ -50,12 +52,7 @@ export default function ContactsMultiSelect({
       setSelectedContacts({ ...selected });
       onContactSelected && onContactSelected(selected);
     },
-    [
+    [setSelectedContacts, selectedContacts, isContactSelect, onContactSelected],
-      setSelectedContacts,
-      selectedContacts,
-      isContactSelect,
-      onContactSelected,
-    ],
   );
 
   return (
@@ -69,11 +66,9 @@ export default function ContactsMultiSelect({
     >
       <Button
         text={
-          countSelected === 0 ? (
+          countSelected === 0
-            defaultText
+            ? defaultText
-          ) : (
+            : intl.get('selected_customers', { count: countSelected })
-            <T id={'selected_customers'} values={{ count: countSelected }} />
-          )
         }
         {...buttonProps}
       />

client/src/components/Pagination.js

@@ -2,6 +2,7 @@ import React, { useReducer, useEffect } from 'react';
 import classNames from 'classnames';
 import { Button, ButtonGroup, Intent, HTMLSelect } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import PropTypes from 'prop-types';
 import { range } from 'lodash';
 import { Icon } from 'components';
@@ -204,14 +205,11 @@ function Pagination({
       </div>
 
       <div class="pagination__info">
-        <T
+        {intl.get('showing_current_page_to_total', {
-          id={'showing_current_page_to_total'}
+          currentPage: state.currentPage,
-          values={{
+          totalPages: state.totalPages,
-            currentPage: state.currentPage,
+          total: total,
-            totalPages: state.totalPages,
+        })}
-            total: total,
-          }}
-        />
       </div>
     </div>
   );

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

@@ -21,7 +21,7 @@ export default function MakeJournalEntriesHeader() {
       <MakeJournalEntriesHeaderFields />
 
       <PageFormBigNumber
-        label={<T id={'due_amount'} />}
+        label={<T id={'amount'} />}
         amount={total}
         currencyCode={currency_code}
       />

client/src/containers/Accounts/AccountsActionsBar.js

@@ -13,6 +13,7 @@ import {
 } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { If, DashboardActionViewsList } from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
@@ -104,7 +105,7 @@ function AccountsActionsBar({
               true ? (
                 <T id={'filter'} />
               ) : (
-                <T id={'count_filters_applied'} values={{ count: 0 }} />
+                intl.get('count_filters_applied', { count: 0 })
               )
             }
             icon={<Icon icon="filter-16" iconSize={16} />}
@@ -159,5 +160,5 @@ export default compose(
   withAccounts(({ accountsSelectedRows }) => ({
     accountsSelectedRows,
   })),
-  withAccountsTableActions
+  withAccountsTableActions,
 )(AccountsActionsBar);

client/src/containers/Authentication/InviteAcceptFormContent.js

@@ -3,6 +3,7 @@ import { Button, InputGroup, Intent, FormGroup } from '@blueprintjs/core';
 import { Form, ErrorMessage, FastField, useFormikContext } from 'formik';
 import { Link } from 'react-router-dom';
 import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { inputIntent } from 'utils';
 import { Col, Row } from 'components';
 import { useInviteAcceptContext } from './InviteAcceptProvider';
@@ -108,13 +109,10 @@ export default function InviteUserFormContent() {
           <T id={'you_will_use_this_address_to_sign_in_to_bigcapital'} />
         </p>
         <p>
-          <T
+          {intl.getHTML('signing_in_or_creating', {
-            id={'signing_in_or_creating'}
+            terms: (msg) => <Link>{msg}</Link>,
-            values={{
+            privacy: (msg) => <Link>{msg}</Link>,
-              terms: (msg) => <Link>{msg}</Link>,
+          })}
-              privacy: (msg) => <Link>{msg}</Link>,
-            }}
-          />
         </p>
       </div>
 

client/src/containers/Authentication/RegisterForm.js

@@ -8,6 +8,7 @@ import {
 } from '@blueprintjs/core';
 import { ErrorMessage, Field, Form } from 'formik';
 import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Link } from 'react-router-dom';
 import { Row, Col, If } from 'components';
 import { PasswordRevealer } from './components';
@@ -117,13 +118,10 @@ export default function RegisterForm({ isSubmitting }) {
 
       <div className={'register-form__agreement-section'}>
         <p>
-          <T
+          {intl.getHTML('signing_in_or_creating', {
-            id={'signing_in_or_creating'}
+            terms: (msg) => <Link>{msg}</Link>,
-            values={{
+            privacy: (msg) => <Link>{msg}</Link>,
-              terms: (msg) => <Link>{msg}</Link>,
+          })}
-              privacy: (msg) => <Link>{msg}</Link>,
-            }}
-          />
         </p>
       </div>
 

client/src/containers/FinancialStatements/reducers.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { chain } from 'lodash';
 import moment from 'moment';
 import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 
 export const balanceSheetRowsReducer = (accounts) => {
   return accounts.map((account) => {
@@ -12,7 +13,7 @@ export const balanceSheetRowsReducer = (accounts) => {
         ...(account.total && account.children && account.children.length > 0
           ? [
               {
-                name: <T id={'total_name'} values={{ name: account.name }} />,
+                name: intl.get('total_name', { name: account.name }),
                 row_types: ['total-row', account.section_type],
                 total: { ...account.total },
                 ...(account.total_periods && {

client/src/containers/Purchases/Bills/BillsLanding/components.js

@@ -11,7 +11,7 @@ import {
   ProgressBar,
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import {  FormattedMessage as T } from 'components';
+import { FormattedMessage as T } from 'components';
 import { Icon, If, Choose, Money } from 'components';
 import { safeCallback, isBlank, calculateStatus } from 'utils';
 import moment from 'moment';
@@ -23,8 +23,6 @@ export function ActionsMenu({
   payload: { onEdit, onOpen, onDelete, onQuick },
   row: { original },
 }) {
-  
-
   return (
     <Menu>
       <MenuItem
@@ -93,28 +91,25 @@ export function StatusAccessor(bill) {
           <Choose>
             <Choose.When condition={bill.is_overdue}>
               <span className={'overdue-status'}>
-                <T id={'overdue_by'} values={{ overdue: bill.overdue_days }} />
+                {intl.get('overdue_by', { overdue: bill.overdue_days })}
               </span>
             </Choose.When>
             <Choose.Otherwise>
               <span className={'due-status'}>
-                <T id={'due_in'} values={{ due: bill.remaining_days }} />
+                {intl.get('due_in', { due: bill.remaining_days })}
               </span>
             </Choose.Otherwise>
           </Choose>
           <If condition={bill.is_partially_paid}>
             <span className="partial-paid">
-              <T
+              {intl.get('day_partially_paid', {
-                id={'day_partially_paid'}
+                due: (
-                values={{
+                  <Money
-                  due: (
+                    amount={bill.due_amount}
-                    <Money
+                    currency={bill.currency_code}
-                      amount={bill.due_amount}
+                  />
-                      currency={bill.currency_code}
+                ),
-                    />
+              })}
-                  ),
-                }}
-              />
             </span>
             <ProgressBar
               animate={false}
@@ -149,8 +144,6 @@ export function ActionsCell(props) {
  * Retrieve bills table columns.
  */
 export function useBillsTableColumns() {
-  
-
   return React.useMemo(
     () => [
       {

client/src/containers/Sales/Invoices/InvoicesLanding/components.js

@@ -35,29 +35,23 @@ export const statusAccessor = (row) => {
           <Choose>
             <Choose.When condition={row.is_overdue}>
               <span className={'overdue-status'}>
-                <T id={'overdue_by'} values={{ overdue: row.overdue_days }} />
+                {intl.get('overdue_by', { overdue: row.overdue_days })}
               </span>
             </Choose.When>
             <Choose.Otherwise>
               <span className={'due-status'}>
-                <T id={'due_in'} values={{ due: row.remaining_days }} />
+                {intl.get('due_in', { due: row.remaining_days })}
               </span>
             </Choose.Otherwise>
           </Choose>
 
           <If condition={row.is_partially_paid}>
             <span class="partial-paid">
-              <T
+              {intl.get('day_partially_paid', {
-                id={'day_partially_paid'}
+                due: (
-                values={{
+                  <Money amount={row.due_amount} currency={row.currency_code} />
-                  due: (
+                ),
-                    <Money
+              })}
-                      amount={row.due_amount}
-                      currency={row.currency_code}
-                    />
-                  ),
-                }}
-              />
             </span>
             <ProgressBar
               animate={false}
@@ -104,8 +98,6 @@ export function ActionsMenu({
   payload: { onEdit, onDeliver, onDelete, onDrawer, onQuick },
   row: { original },
 }) {
-  
-
   return (
     <Menu>
       <MenuItem
@@ -162,8 +154,6 @@ function ActionsCell(props) {
  * Retrieve invoices table columns.
  */
 export function useInvoicesTableColumns() {
-  
-
   return React.useMemo(
     () => [
       {

client/src/containers/Subscriptions/BillingPlan.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 
 import 'style/pages/Subscription/PlanRadio.scss';
 
@@ -32,7 +33,7 @@ export default function BillingPlan({
     >
       <div className={'plan-radio__header'}>
         <div className={'plan-radio__name'}>
-          <T id={name} />
+          {intl.get('plan_radio_name', { name: name })}
         </div>
       </div>
 

client/src/containers/Subscriptions/BillingPlansForm.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 
 import 'style/pages/Subscription/BillingPlans.scss';
 
@@ -14,15 +15,15 @@ export default function BillingPlansForm() {
   return (
     <div class="billing-plans">
       <BillingPlansInput
-        title={<T id={'select_a_plan'} values={{ order: 1 }} />}
+        title={intl.get('select_a_plan', { order: 1 })}
         description={<T id={'please_enter_your_preferred_payment_method'} />}
       />
       <BillingPeriodsInput
-        title={<T id={'choose_your_billing'} values={{ order: 2 }} />}
+        title={intl.get('choose_your_billing', { order: 2 })}
         description={<T id={'please_enter_your_preferred_payment_method'} />}
       />
       <BillingPaymentMethod
-        title={<T id={'payment_methods'} values={{ order: 3 }} />}
+        title={intl.get('payment_methods', { order: 3 })}
         description={<T id={'please_enter_your_preferred_payment_method'} />}
       />
     </div>

client/src/lang/en/index.json

@@ -31,7 +31,7 @@
   "phone_number": "Phone Number",
   "you_email_address_is": "You email address is",
   "you_will_use_this_address_to_sign_in_to_bigcapital": "You will use this address to sign in to Bigcapital.",
-  "signing_in_or_creating": "By signing in or creating an account, you agree with our <a> Terms & Conditions </a> and <a> Privacy Statement </a> ",
+  "signing_in_or_creating": "By signing in or creating an account, you agree with our <br/> <a>Terms & Conditions </a> and <a> Privacy Statement </a> ",
   "and": "And",
   "create_account": "Create Account",
   "success": "Success",
@@ -1101,5 +1101,6 @@
   "yy_mm_dd": "YY/MM/DD",
   "mm_dd_yy_": "MM-DD-YY",
   "dd_mm_yy_": "DD-MM-YY",
-  "yy_mm_dd_": "YY-MM-DD"
+  "yy_mm_dd_": "YY-MM-DD",
+  "plan_radio_name":"{name}"
 }