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

client/src/components/AccountsMultiSelect.js

@@ -56,7 +56,7 @@ export default function AccountsMultiSelect({ accounts, onAccountSelected }) {
   return (
     <MultiSelect
       items={accounts}
-      noResults={<MenuItem disabled={true} text="No results." />}
+      noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
       itemRenderer={accountItem}
       popoverProps={{ minimal: true }}
       filterable={true}

client/src/components/AppIntlLoader.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import moment from 'moment';
+import { setLocale } from 'yup';
 import intl from 'react-intl-universal';
 import { find } from 'lodash';
 import rtlDetect from 'rtl-detect';
@@ -32,6 +33,10 @@ function loadLocales(currentLocale) {
   return import(`../lang/${currentLocale}/index.json`);
 }
 
+function loadYupLocales(currentLocale) {
+  return import(`../lang/${currentLocale}/locale`);
+}
+
 /**
  * Modifies the html document direction to RTl if it was rtl-language.
  */
@@ -74,6 +79,14 @@ export default function AppIntlLoader({ children }) {
       });
   }, [currentLocale, setIsLoading]);
 
+  React.useEffect(() => {
+    loadYupLocales(currentLocale)
+      .then(({ locale }) => {
+        setLocale(locale);
+      })
+      .then(() => {});
+  }, [currentLocale]);
+  
   return (
     <DashboardLoadingIndicator isLoading={isLoading}>
       {children}

client/src/components/ContactSelecetList.js

@@ -1,5 +1,7 @@
 import React, { useCallback, useState, useEffect, useMemo } from 'react';
 import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+
 import { MenuItem, Button } from '@blueprintjs/core';
 import { Select } from '@blueprintjs/select';
 import classNames from 'classnames';
@@ -14,7 +16,7 @@ export default function ContactSelecetList({
   onContactSelected,
   popoverFill = false,
   disabled = false,
-  buttonProps
+  buttonProps,
 }) {
   const contacts = useMemo(
     () =>
@@ -79,7 +81,7 @@ export default function ContactSelecetList({
   return (
     <Select
       items={contacts}
-      noResults={<MenuItem disabled={true} text="No results." />}
+      noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
       itemRenderer={handleContactRenderer}
       itemPredicate={filterContacts}
       filterable={true}
@@ -89,6 +91,9 @@ export default function ContactSelecetList({
       className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
         [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
       })}
+      inputProps={{
+        placeholder: intl.get('filter_')
+      }}
     >
       <Button
         disabled={disabled}

client/src/components/ContactsMultiSelect.js

@@ -58,7 +58,7 @@ export default function ContactsMultiSelect({
   return (
     <MultiSelect
       items={contacts}
-      noResults={<MenuItem disabled={true} text="No results." />}
+      noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
       itemRenderer={contactRenderer}
       popoverProps={{ minimal: true }}
       filterable={true}

client/src/components/ItemsListField.js

@@ -68,7 +68,7 @@ function ItemsListField({
   return (
     <ListSelect
       items={filteredItems}
-      noResults={<MenuItem disabled={true} text="No results." />}
+      noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
       itemRenderer={itemRenderer}
       itemPredicate={filterItem}
       popoverProps={{ minimal: true }}

client/src/components/PaymentReceiveListField.js

@@ -23,7 +23,7 @@ function PaymentReceiveListField({
   return (
     <ListSelect
       item={invoices}
-      noResults={<MenuItem disabled={true} text="No results." />}
+      noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
       itemRenderer={handleInvoiceRenderer}
       popoverProps={{ minimal: true }}
       onItemSelect={onInvoiceSelect}

client/src/containers/Authentication/AuthCopyright.js

@@ -1,14 +1,19 @@
 import React from 'react';
 import Icon from 'components/Icon';
+import moment from 'moment';
+import intl from 'react-intl-universal';
 
 export default function AuthCopyright() {
   return (
     <div class="auth-copyright">
       <div class="auth-copyright__text">
-        © 2001–2020 All Rights Reserved.
+        {intl.get('all_rights_reserved', {
+          pre: moment().subtract(1, 'years').year(),
+          current: moment().get('year'),
+        })}
       </div>
 
       <Icon width={122} height={22} icon={'bigcapital'} />
-    </div>    
+    </div>
   );
-}
+}

client/src/containers/Authentication/InviteAcceptForm.js

@@ -13,15 +13,10 @@ import InviteAcceptFormContent from './InviteAcceptFormContent';
 
 export default function InviteAcceptForm() {
   const history = useHistory();
-  
 
   // Invite accept context.
-  const {
-    inviteAcceptMutate,
-    inviteMeta,
-    token,
-  } = useInviteAcceptContext();
- 
+  const { inviteAcceptMutate, inviteMeta, token } = useInviteAcceptContext();
+
   // Invite value.
   const inviteValue = {
     organization_name: '',
@@ -39,8 +34,13 @@ export default function InviteAcceptForm() {
     inviteAcceptMutate([values, token])
       .then((response) => {
         AppToaster.show({
-          message: `Congrats! Your account has been created and invited to
-            <strong>${inviteValue.organization_name}</strong> organization successfully.`,
+          message: intl.getHTML(
+            'congrats_your_account_has_been_created_and_invited',
+            {
+              organization_name: inviteValue.organization_name,
+            },
+          ),
+
           intent: Intent.SUCCESS,
         });
         history.push('/auth/login');
@@ -67,7 +67,7 @@ export default function InviteAcceptForm() {
           }
           if (errors.find((e) => e.type === 'INVITE.TOKEN.NOT.FOUND')) {
             AppToaster.show({
-              message: 'An unexpected error occurred',
+              message: intl.get('an_unexpected_error_occurred'),
               intent: Intent.DANGER,
               position: Position.BOTTOM,
             });

client/src/containers/Authentication/InviteAcceptFormContent.js

@@ -36,7 +36,7 @@ export default function InviteUserFormContent() {
           <FastField name={'first_name'}>
             {({ form, field, meta: { error, touched } }) => (
               <FormGroup
-                label={<T id={'First Name'} />}
+                label={<T id={'first_name'} />}
                 className={'form-group--first_name'}
                 intent={inputIntent({ error, touched })}
                 helperText={<ErrorMessage name={'first_name'} />}
@@ -54,7 +54,7 @@ export default function InviteUserFormContent() {
           <FastField name={'last_name'}>
             {({ form, field, meta: { error, touched } }) => (
               <FormGroup
-                label={<T id={'Last Name'} />}
+                label={<T id={'last_name'} />}
                 className={'form-group--last_name'}
                 intent={inputIntent({ error, touched })}
                 helperText={<ErrorMessage name={'last_name'} />}
@@ -72,7 +72,7 @@ export default function InviteUserFormContent() {
       <FastField name={'phone_number'}>
         {({ form, field, meta: { error, touched } }) => (
           <FormGroup
-            label={<T id={'Phone Number'} />}
+            label={<T id={'phone_number'} />}
             className={'form-group--phone_number'}
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'phone_number'} />}
@@ -105,7 +105,7 @@ export default function InviteUserFormContent() {
 
       <div className={'invite-form__statement-section'}>
         <p>
-          <T id={'You email address is'} /> <b>{inviteMeta.email},</b> <br />
+          <T id={'you_email_address_is'} /> <b>{inviteMeta.email},</b> <br />
           <T id={'you_will_use_this_address_to_sign_in_to_bigcapital'} />
         </p>
         <p>

client/src/containers/Authentication/SendResetPasswordForm.js

@@ -1,10 +1,5 @@
 import React from 'react';
-import {
-  Button,
-  InputGroup,
-  Intent,
-  FormGroup,
-} from '@blueprintjs/core';
+import { Button, InputGroup, Intent, FormGroup } from '@blueprintjs/core';
 import { Form, ErrorMessage, FastField } from 'formik';
 import { FormattedMessage as T } from 'components';
 import { inputIntent } from 'utils';
@@ -12,15 +7,13 @@ import { inputIntent } from 'utils';
 /**
  * Send reset password form.
  */
-export default function SendResetPasswordForm({
-  isSubmitting
-}) {
+export default function SendResetPasswordForm({ isSubmitting }) {
   return (
     <Form className={'send-reset-password'}>
       <FastField name={'crediential'}>
         {({ form, field, meta: { error, touched } }) => (
           <FormGroup
-            label={'Email or Phone Number'}
+            label={<T id={'email_or_phone_number'} />}
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'crediential'} />}
             className={'form-group--crediential'}

client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryForm.js

@@ -9,7 +9,7 @@ import { transformToForm } from 'utils';
 import {
   CreateItemCategoryFormSchema,
   EditItemCategoryFormSchema,
-} from './ItemCategoryForm.schema';
+} from './itemCategoryForm.schema';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import ItemCategoryFormContent from './ItemCategoryFormContent'

client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationTable.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import intl from 'react-intl-universal';
+import intl, { init } from 'react-intl-universal';
 
 import FinancialSheet from 'components/FinancialSheet';
 import { DataTable } from 'components';
@@ -14,8 +14,6 @@ export default function InventoryValuationTable({
   //#ownProps
   companyName,
 }) {
-  
-
   // inventory valuation context.
   const {
     inventoryValuation: { tableRows },
@@ -56,7 +54,9 @@ export default function InventoryValuationTable({
         expandColumnSpace={1}
         sticky={true}
         rowClassNames={rowClassNames}
-        noResults={'There were no inventory transactions during the selected date range.'}
+        noResults={intl.get(
+          'there_were_no_inventory_transactions_during_the_selected_date_range',
+        )}
       />
     </FinancialSheet>
   );

client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.js

@@ -12,8 +12,6 @@ import { usePurchasesByItemsTableColumns } from './components';
  * purchases by items data table.
  */
 export default function PurchasesByItemsTable({ companyName }) {
-  
-
   // Purchases by items context.
   const {
     purchaseByItems: { tableRows, query },
@@ -55,7 +53,9 @@ export default function PurchasesByItemsTable({ companyName }) {
         expandColumnSpace={1}
         sticky={true}
         rowClassNames={rowClassNames}
-        noResults={'There were no purchases during the selected date range.'}
+        noResults={intl.get(
+          'there_were_no_purchases_during_the_selected_date_range',
+        )}
       />
     </FinancialSheet>
   );

client/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.js

@@ -10,8 +10,6 @@ import { useSalesByItemsTableColumns } from './components';
  * Sales by items data table.
  */
 export default function SalesByItemsTable({ companyName }) {
-  
-
   // Sales by items context.
   const {
     salesByItems: { tableRows, query },
@@ -53,7 +51,9 @@ export default function SalesByItemsTable({ companyName }) {
         expandColumnSpace={1}
         sticky={true}
         rowClassNames={rowClassNames}
-        noResults={'There were no sales during the selected date range.'}
+        noResults={intl.get(
+          'there_were_no_sales_during_the_selected_date_range',
+        )}
       />
     </FinancialSheet>
   );

client/src/containers/GeneralSearch/Search.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Omnibar } from '@blueprintjs/select';
 import { MenuItem } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
 import { compose } from 'utils';
 import withSearch from 'containers/GeneralSearch/withSearch';
 
@@ -30,7 +31,7 @@ function Search({
       <Omnibar
         className={'navbar-omnibar'}
         isOpen={globalSearchShow}
-        noResults={<MenuItem disabled={true} text="No results." />}
+        noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
         onClose={() => closeGlobalSearch(false)}
         resetOnSelect={true}
         itemRenderer={renderSearch}

client/src/containers/Setup/SetupCongratsPage.js

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import WorkflowIcon from './WorkflowIcon';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import withOrganizationActions from 'containers/Organization/withOrganizationActions';
 
 import 'style/pages/Setup/Congrats.scss';

client/src/containers/Setup/SetupInitializingForm.js

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import { ProgressBar, Intent } from '@blueprintjs/core';
 import { useBuildTenant } from 'hooks/query';
+import { FormattedMessage as T } from 'components';
 
 import 'style/pages/Setup/Initializing.scss';
 
@@ -25,22 +26,34 @@ export default function SetupInitializingForm() {
       <div className={'setup-initializing-form__title'}>
         {isLoading ? (
           <>
-            <h1>It's time to make your accounting really simple!</h1>
+            <h1>
+              <T id={'it_s_time_to_make_your_accounting_really_simple'} />
+            </h1>
             <p className={'paragraph'}>
-              while we set up your account, please remember to verify your
-              account by clicking on the link we sent to yout registered email
-              address
+              <T
+                id={
+                  'while_we_set_up_your_account_please_remember_to_verify_your_account'
+                }
+              />
             </p>
           </>
         ) : isError ? (
           <>
-            <h1>Something went wrong!</h1>
-            <p class="paragraph">Please refresh the page</p>
+            <h1>
+              <T id={'something_went_wrong'} />
+            </h1>
+            <p class="paragraph">
+              <T id={'please_refresh_the_page'} />
+            </p>
           </>
         ) : (
           <>
-            <h1>Waiting to redirect</h1>
-            <p class="paragraph">Refresh the page if redirect not worked.</p>
+            <h1>
+              <T id={'waiting_to_redirect'} />
+            </h1>
+            <p class="paragraph">
+              <T id={'refresh_the_page_if_redirect_not_worked'} />
+            </p>
           </>
         )}
       </div>

client/src/containers/Setup/SetupOrganizationForm.js

@@ -98,7 +98,7 @@ export default function SetupOrganizationForm({ isSubmitting, values }) {
               >
                 <ListSelect
                   items={currencies}
-                  noResults={<MenuItem disabled={true} text="No results." />}
+                  noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
                   popoverProps={{ minimal: true }}
                   onItemSelect={(item) => {
                     setFieldValue('baseCurrency', item.code);
@@ -133,7 +133,7 @@ export default function SetupOrganizationForm({ isSubmitting, values }) {
               >
                 <ListSelect
                   items={languages}
-                  noResults={<MenuItem disabled={true} text="No results." />}
+                  noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
                   onItemSelect={(item) => {
                     setFieldValue('language', item.value);
                   }}
@@ -165,7 +165,7 @@ export default function SetupOrganizationForm({ isSubmitting, values }) {
           >
             <ListSelect
               items={fiscalYearOptions}
-              noResults={<MenuItem disabled={true} text="No results." />}
+              noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
               selectedItem={value}
               selectedItemProp={'value'}
               textProp={'name'}

client/src/lang/ar-ly/locale.js

@@ -0,0 +1,64 @@
+// Based on https://github.com/jquense/yup/blob/2973d0a/src/locale.js
+
+import printValue from '../printValue';
+
+export const locale = {
+  mixed: {
+    default: '${path} غير صالح.',
+    required: '${path} هو حقل مطلوب',
+    oneOf: '${path} يجب أن تكون واحدة من القيم التالية: ${values}',
+    notOneOf: '${path} لا يجب أن تكون واحدة من القيم التالية: ${values}',
+    notType: ({ path, type, value, originalValue }) => {
+      const isCast = originalValue != null && originalValue !== value;
+      let msg =
+        `${path} يجب أن يكون \`${type}\` نوع, ` +
+        `ولكن القيمة النهائية كانت في: \`${printValue(value, true)}\`` +
+        (isCast
+          ? ` (المدلى بها من قيمة \`${printValue(originalValue, true)}\`).`
+          : '.');
+
+      if (value === null) {
+        msg +=
+          `\n إذا كان المقصود "لاغية" كقيمة فارغة مما لا شك فيه للاحتفال مخطط كما` +
+          ' `.nullable()`';
+      }
+
+      return msg;
+    },
+  },
+
+  string: {
+    length: '${path} يجب أن يكون بالضبط ${length} حرفا',
+    min: '${path} يجب أن تكون على الأقل ${min} حرفا',
+    max: '${path} يجب أن تكون على الأكثر ${max} حرفا',
+    matches: '${path} يجب أن يطابق ما يلي: "${regex}"',
+    email: '${path} يجب أن يكون عنوان بريد إلكتروني صالح',
+    url: '${path} يجب أن يكون عنوان URL صالحا',
+    trim: '${path} يجب أن تكون سلسلة قلص',
+    lowercase: '${path} يجب أن تكون سلسلة صغيرة',
+    uppercase: '${path} يجب أن تكون سلسلة الحالة العلوي',
+  },
+
+  number: {
+    min: '${path} يجب أن تكون أكبر من أو يساوي ${min}',
+    max: '${path} يجب أن يكون أقل من أو يساوي ${max}',
+    lessThan: '${path} يجب أن يكون أقل من ${less}',
+    moreThan: '${path} يجب أن تكون أكبر من ${more}',
+    positive: '${path} يجب أن يكون رقما موجبا',
+    negative: '${path} يجب أن يكون رقما سالبا',
+    integer: '${path} يجب أن يكون رقما',
+  },
+  date: {
+    min: '${path} يجب أن يكون حقل في وقت لاحق من ${min}',
+    max: '${path} يجب أن يكون حقل في وقت سابق من ${max}',
+  },
+  boolean: {},
+
+  object: {
+    noUnknown: '${path} حقل لا يمكن أن يكون مفاتيح غير محددة في شكل وجوه',
+  },
+  array: {
+    min: 'يجب أن يكون ${path} حقل على الأقل ${min} من العناصر',
+    max: '${path} يجب أن يكون الحقل أقل من أو يساوي إلى ${max} من العناصر',
+  },
+};

client/src/lang/en/index.json

@@ -348,7 +348,7 @@
   "session_expired": "Session Expired!",
   "this_report_does_not_contain_any_data_between_date_period": "This report does not contain any data between date period.",
   "welcome_organization_account_has_been_created": "👋 Welcome, You organization account has been created, Sign in now!",
-  "the_phone_number_already_used_in_another_account": "he phone number is already used in another account",
+  "the_phone_number_already_used_in_another_account": "the phone number is already used in another account",
   "the_email_already_used_in_another_account": "The email is already used in another account",
   "hide_filter": "Hide filter",
   "show_filter": "Show filter",
@@ -1109,5 +1109,17 @@
   "payment_made_empty_status_description": "The payments transactions will appear once payments made to purchases invoices.",
   "bill_empty_status_description": "Record purchases transactions from vendors who make no or partial payment and help you keep track of accounts payable with a vendor.",
   "invoices_empty_status_description": "Record sales transactions from customers who make no or partial payment and help you keep track of accounts receivable with a customer.",
-  "receipt_empty_status_description": "Create a sales receipt any time your customer immediately pays for products or services at the time of sale."
+  "receipt_empty_status_description": "Create a sales receipt any time your customer immediately pays for products or services at the time of sale.",
+  "there_were_no_purchases_during_the_selected_date_range": "There were no purchases during the selected date range.",
+  "there_were_no_sales_during_the_selected_date_range": "There were no sales during the selected date range.",
+  "there_were_no_inventory_transactions_during_the_selected_date_range": "There were no inventory transactions during the selected date range.",
+  "filter_": "Filter...",
+  "all_rights_reserved": "© {pre}-{current} All Rights Reserved.",
+  "congrats_your_account_has_been_created_and_invited": "Congrats! Your account has been created and invited to <strong>{organization_name} </strong> organization successfully.",
+  "it_s_time_to_make_your_accounting_really_simple": "It's time to make your accounting really simple!",
+  "while_we_set_up_your_account_please_remember_to_verify_your_account": "while we set up your account, please remember to verify your account by clicking on the link we sent to your registered email address",
+  "something_went_wrong": "Something went wrong!",
+  "please_refresh_the_page": "Please refresh the page",
+  "waiting_to_redirect": "Waiting to redirect",
+  "refresh_the_page_if_redirect_not_worked": "Refresh the page if redirect not worked."
 }

client/src/lang/en/locale.js

@@ -1,4 +1,5 @@
 import printValue from '../printValue';
+
 export const locale = {
   mixed: {
     default: '${path} is invalid',