From a70fd300f2890b73e0279cf38c410e7e545bc059 Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Sun, 6 Jun 2021 20:32:55 +0200
Subject: [PATCH] feat (lang) : add Contacts & Sales & Purchases.

---
 client/src/components/SalutationList.js       | 17 ++---
 .../CustomerForm/CustomerAttachmentTabs.js    |  3 +-
 .../CustomerFormAfterPrimarySection.js        |  7 +-
 .../CustomerFormPrimarySection.js             | 10 +--
 .../CustomersLanding/CustomersEmptyStatus.js  | 10 +--
 .../InventoryAdjustmentTable.js               | 22 +++---
 .../src/containers/Items/ItemsEmptyStatus.js  |  9 +--
 .../Bills/BillForm/BillFormFooter.js          |  4 +-
 .../Bills/BillForm/BillFormHeader.js          |  3 +-
 .../Bills/BillsLanding/BillsEmptyStatus.js    |  9 +--
 .../PaymentForm/PaymentMadeEntriesTable.js    | 13 +++-
 .../PaymentForm/PaymentMadeFooter.js          |  2 +-
 .../PaymentForm/PaymentMadeFormHeader.js      | 14 ++--
 .../PaymentMadeFormHeaderFields.js            |  2 +-
 .../PaymentMadesEmptyStatus.js                | 10 +--
 .../InvoicesLanding/InvoicesEmptyStatus.js    | 68 +++++++++----------
 .../PaymentReceiveForm/components.js          |  5 +-
 .../Receipts/ReceiptForm/ReceiptFormFooter.js |  5 +-
 .../Receipts/ReceiptForm/ReceiptFormHeader.js | 11 +--
 .../ReceiptsLanding/ReceiptsEmptyStatus.js    |  9 +--
 .../Vendors/VendorForm/VendorAttahmentTab.js  |  3 +-
 .../VendorFormAfterPrimarySection.js          |  8 ++-
 .../VendorForm/VendorFormPrimarySection.js    |  7 +-
 .../VendorsLanding/VendorsEmptyStatus.js      | 10 +--
 client/src/lang/en/index.json                 | 21 +++++-
 server/.env.example                           |  1 -
 26 files changed, 161 insertions(+), 122 deletions(-)

diff --git a/client/src/components/SalutationList.js b/client/src/components/SalutationList.js
index 96b881589..ba9661026 100644
--- a/client/src/components/SalutationList.js
+++ b/client/src/components/SalutationList.js
@@ -1,20 +1,21 @@
 import React from 'react';
-import {
-  ListSelect,
-} from 'components';
+import { formatMessage } from 'services/intl';
 
-export default function SalutationList({
-  ...restProps
-}) {
+import { ListSelect } from 'components';
+
+export default function SalutationList({ ...restProps }) {
   const saluations = ['Mr.', 'Mrs.', 'Ms.', 'Miss', 'Dr.'];
-  const items = saluations.map((saluation) => ({ key: saluation, label: saluation }));
+  const items = saluations.map((saluation) => ({
+    key: saluation,
+    label: saluation,
+  }));
 
   return (
     <ListSelect
       items={items}
       selectedItemProp={'key'}
       textProp={'label'}
-      defaultText={'Salutation'}
+      defaultText={formatMessage({ id: 'salutation' })}
       filterable={false}
       {...restProps}
     />
diff --git a/client/src/containers/Customers/CustomerForm/CustomerAttachmentTabs.js b/client/src/containers/Customers/CustomerForm/CustomerAttachmentTabs.js
index 1f07e51aa..ca8abd137 100644
--- a/client/src/containers/Customers/CustomerForm/CustomerAttachmentTabs.js
+++ b/client/src/containers/Customers/CustomerForm/CustomerAttachmentTabs.js
@@ -6,6 +6,7 @@ import React, {
   useCallback,
 } from 'react';
 import Dragzone from 'components/Dragzone';
+import { FormattedMessage as T } from 'react-intl';
 
 function CustomerAttachmentTabs() {
   return (
@@ -14,7 +15,7 @@ function CustomerAttachmentTabs() {
         initialFiles={[]}
         onDrop={null}
         onDeleteFile={[]}
-        hint={'Attachments: Maxiumum size: 20MB'}
+        hint={<T id={'attachments_maximum'} />}
       />
     </div>
   );
diff --git a/client/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.js b/client/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.js
index 09b2ec694..874797baf 100644
--- a/client/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.js
+++ b/client/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core';
 import { FastField, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import { inputIntent } from 'utils';
 
 export default function CustomerFormAfterPrimarySection({}) {
+  const { formatMessage } = useIntl();
   return (
     <div class="customer-form__after-primary-section-content">
       {/*------------ Customer email -----------*/}
@@ -33,7 +34,7 @@ export default function CustomerFormAfterPrimarySection({}) {
             {({ field, meta: { error, touched } }) => (
               <InputGroup
                 intent={inputIntent({ error, touched })}
-                placeholder={'Work'}
+                placeholder={formatMessage({ id: 'work' })}
                 {...field}
               />
             )}
@@ -43,7 +44,7 @@ export default function CustomerFormAfterPrimarySection({}) {
             {({ field, meta: { error, touched } }) => (
               <InputGroup
                 intent={inputIntent({ error, touched })}
-                placeholder={'Mobile'}
+                placeholder={formatMessage({id:'Mobile'})}
                 {...field}
               />
             )}
diff --git a/client/src/containers/Customers/CustomerForm/CustomerFormPrimarySection.js b/client/src/containers/Customers/CustomerForm/CustomerFormPrimarySection.js
index 6427569f3..6ec2fe491 100644
--- a/client/src/containers/Customers/CustomerForm/CustomerFormPrimarySection.js
+++ b/client/src/containers/Customers/CustomerForm/CustomerFormPrimarySection.js
@@ -2,7 +2,8 @@ import React from 'react';
 import classNames from 'classnames';
 import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core';
 import { FastField, Field, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
 import {
   Hint,
   FieldRequiredHint,
@@ -19,7 +20,8 @@ import { useAutofocus } from 'hooks';
  */
 export default function CustomerFormPrimarySection({}) {
   const firstNameFieldRef = useAutofocus();
-
+  const { formatMessage } = useIntl();
+  
   return (
     <div className={'customer-form__primary-section-content'}>
       {/**-----------Customer type. -----------*/}
@@ -53,7 +55,7 @@ export default function CustomerFormPrimarySection({}) {
           <FastField name={'first_name'}>
             {({ field, meta: { error, touched } }) => (
               <InputGroup
-                placeholder={'First Name'}
+                placeholder={formatMessage({ id: 'first_name' })}
                 intent={inputIntent({ error, touched })}
                 className={classNames('input-group--first-name')}
                 inputRef={(ref) => (firstNameFieldRef.current = ref)}
@@ -65,7 +67,7 @@ export default function CustomerFormPrimarySection({}) {
           <FastField name={'last_name'}>
             {({ field, meta: { error, touched } }) => (
               <InputGroup
-                placeholder={'Last Name'}
+                placeholder={formatMessage({ id: 'last_name' })}
                 intent={inputIntent({ error, touched })}
                 className={classNames('input-group--last-name')}
                 {...field}
diff --git a/client/src/containers/Customers/CustomersLanding/CustomersEmptyStatus.js b/client/src/containers/Customers/CustomersLanding/CustomersEmptyStatus.js
index a957e8b8e..8a80f0ee9 100644
--- a/client/src/containers/Customers/CustomersLanding/CustomersEmptyStatus.js
+++ b/client/src/containers/Customers/CustomersLanding/CustomersEmptyStatus.js
@@ -2,17 +2,17 @@ import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import { EmptyStatus } from 'components';
+import { FormattedMessage as T } from 'react-intl';
 
 export default function CustomersEmptyStatus() {
   const history = useHistory();
 
   return (
     <EmptyStatus
-      title={"Create and manage your organization's customers."}
+      title={<T id={'create_and_manage_your_organization_s_customers'} />}
       description={
         <p>
-          Here a list of your organization products and services, to be used
-          when you create invoices or bills to your customers or vendors.
+          <T id={'here_a_list_of_your_organization_products_and_services'} />
         </p>
       }
       action={
@@ -24,11 +24,11 @@ export default function CustomersEmptyStatus() {
               history.push('/customers/new');
             }}
           >
-            New customer
+            <T id={'new_customer'} />
           </Button>
 
           <Button intent={Intent.NONE} large={true}>
-            Learn more
+            <T id={'learn_more'} />
           </Button>
         </>
       }
diff --git a/client/src/containers/InventoryAdjustments/InventoryAdjustmentTable.js b/client/src/containers/InventoryAdjustments/InventoryAdjustmentTable.js
index 24f9416d7..81e5c464f 100644
--- a/client/src/containers/InventoryAdjustments/InventoryAdjustmentTable.js
+++ b/client/src/containers/InventoryAdjustments/InventoryAdjustmentTable.js
@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 import { DataTable } from 'components';
 import { useInventoryAdjustmentsColumns, ActionsMenu } from './components';
+import { formatMessage } from 'services/intl';
 
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withInventoryAdjustmentActions from './withInventoryAdjustmentActions';
@@ -23,14 +24,14 @@ function InventoryAdjustmentDataTable({
   openAlert,
 
   // #ownProps
-  tableProps
+  tableProps,
 }) {
   const {
     isAdjustmentsLoading,
     isAdjustmentsFetching,
 
     inventoryAdjustments,
-    pagination
+    pagination,
   } = useInventoryAdjustmentsContext();
 
   // Handle delete inventory adjustment transaction.
@@ -47,40 +48,35 @@ function InventoryAdjustmentDataTable({
       setInventoryAdjustmentTableState({
         pageSize,
         pageIndex,
-        sortBy
-      })
+        sortBy,
+      });
     },
     [setInventoryAdjustmentTableState],
   );
 
-  return (  
+  return (
     <DataTable
       columns={columns}
       data={inventoryAdjustments}
-
       loading={isAdjustmentsLoading}
       headerLoading={isAdjustmentsLoading}
       progressBarLoading={isAdjustmentsFetching}
-      
       initialState={inventoryAdjustmentTableState}
       noInitialFetch={true}
-
       onFetchData={handleDataTableFetchData}
-      
       manualSortBy={true}
       selectionColumn={true}
-
       pagination={true}
       pagesCount={pagination.pagesCount}
-
       autoResetSortBy={false}
       autoResetPage={false}
-
       payload={{
         onDelete: handleDeleteAdjustment,
       }}
       ContextMenu={ActionsMenu}
-      noResults={'There is no inventory adjustments transactions yet.'}
+      noResults={formatMessage({
+        id: 'there_is_no_inventory_adjustments_transactions_yet',
+      })}
       {...tableProps}
     />
   );
diff --git a/client/src/containers/Items/ItemsEmptyStatus.js b/client/src/containers/Items/ItemsEmptyStatus.js
index 01682e478..dc956ad5a 100644
--- a/client/src/containers/Items/ItemsEmptyStatus.js
+++ b/client/src/containers/Items/ItemsEmptyStatus.js
@@ -2,16 +2,17 @@ import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import { EmptyStatus } from 'components';
+import { FormattedMessage as T } from 'react-intl';
 
 export default function ItemsEmptyStatus() {
   const history = useHistory();
 
   return (
     <EmptyStatus
-      title={'Manage the organization’s services and products.'}
+      title={<T id={'manage_the_organization_s_services_and_products'} />}
       description={
         <p>
-          Here a list of your organization products and services, to be used when you create invoices or bills to your customers or vendors.
+          <T id={'here_a_list_of_your_organization_products_and_services'} />
         </p>
       }
       action={
@@ -23,11 +24,11 @@ export default function ItemsEmptyStatus() {
               history.push('/items/new');
             }}
           >
-            New Item
+            <T id={'new_item'} />
           </Button>
 
           <Button intent={Intent.NONE} large={true}>
-            Learn more
+            <T id={'learn_more'}/>
           </Button>
         </>
       }
diff --git a/client/src/containers/Purchases/Bills/BillForm/BillFormFooter.js b/client/src/containers/Purchases/Bills/BillForm/BillFormFooter.js
index 4c34a5ba6..5add2a1a1 100644
--- a/client/src/containers/Purchases/Bills/BillForm/BillFormFooter.js
+++ b/client/src/containers/Purchases/Bills/BillForm/BillFormFooter.js
@@ -12,7 +12,7 @@ import { inputIntent } from 'utils';
 export default function BillFormFooter() {
   return (
     <div class={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <Postbox title={'Bill details'} defaultOpen={false}>
+      <Postbox title={<T id={'bill_details'} />} defaultOpen={false}>
         <Row>
           <Col md={8}>
             <FastField name={'note'}>
@@ -33,7 +33,7 @@ export default function BillFormFooter() {
               initialFiles={[]}
               // onDrop={onDropFiles}
               // onDeleteFile={onDropFiles}
-              hint={'Attachments: Maxiumum size: 20MB'}
+              hint={<T id={'attachments_maximum'} />}
             />
           </Col>
         </Row>
diff --git a/client/src/containers/Purchases/Bills/BillForm/BillFormHeader.js b/client/src/containers/Purchases/Bills/BillForm/BillFormHeader.js
index ea8ac2aeb..eeaac3f5d 100644
--- a/client/src/containers/Purchases/Bills/BillForm/BillFormHeader.js
+++ b/client/src/containers/Purchases/Bills/BillForm/BillFormHeader.js
@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { sumBy } from 'lodash';
 import { useFormikContext } from 'formik';
+import { formatMessage } from 'services/intl';
 
 import { CLASSES } from 'common/classes';
 
@@ -28,7 +29,7 @@ function BillFormHeader({
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <BillFormHeaderFields />
       <PageFormBigNumber
-        label={'Due Amount'}
+        label={formatMessage({id:'due_amount'})}
         amount={totalDueAmount}
         currencyCode={baseCurrency}
       />
diff --git a/client/src/containers/Purchases/Bills/BillsLanding/BillsEmptyStatus.js b/client/src/containers/Purchases/Bills/BillsLanding/BillsEmptyStatus.js
index fd42a941d..f0e13918e 100644
--- a/client/src/containers/Purchases/Bills/BillsLanding/BillsEmptyStatus.js
+++ b/client/src/containers/Purchases/Bills/BillsLanding/BillsEmptyStatus.js
@@ -2,16 +2,17 @@ import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import { EmptyStatus } from 'components';
+import { FormattedMessage as T } from 'react-intl';
 
 export default function BillsEmptyStatus() {
   const history = useHistory();
 
   return (
     <EmptyStatus
-      title={'Manage the organization’s services and products.'}
+      title={<T id={'manage_the_organization_s_services_and_products'} />}
       description={
         <p>
-          Here a list of your organization products and services, to be used when you create invoices or bills to your customers or vendors.
+          <T id={'here_a_list_of_your_organization_products_and_services'} />
         </p>
       }
       action={
@@ -23,11 +24,11 @@ export default function BillsEmptyStatus() {
               history.push('/bills/new');
             }}
           >
-            New bill
+            <T id={'new_bill'} />
           </Button>
 
           <Button intent={Intent.NONE} large={true}>
-            Learn more
+            <T id={'learn_more'} />
           </Button>
         </>
       }
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeEntriesTable.js b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeEntriesTable.js
index 2a7383042..5273d8eee 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeEntriesTable.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeEntriesTable.js
@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 import { CloudLoadingIndicator } from 'components';
 import classNames from 'classnames';
+import { FormattedMessage as T } from 'react-intl';
 
 import { CLASSES } from 'common/classes';
 import { DataTableEditable } from 'components';
@@ -42,9 +43,15 @@ export default function PaymentMadeEntriesTable({
 
   // Detarmines the right no results message before selecting vendor and aftering
   // selecting vendor id.
-  const noResultsMessage = vendor_id
-    ? 'There is no payable bills for this vendor that can be applied for this payment'
-    : 'Please select a vendor to display all open bills for it.';
+  const noResultsMessage = vendor_id ? (
+    <T
+      id={
+        'there_is_no_payable_bills_for_this_vendor_that_can_be_applied_for_this_payment'
+      }
+    />
+  ) : (
+    <T id={'please_select_a_vendor_to_display_all_open_bills_for_it'} />
+  );
 
   return (
     <CloudLoadingIndicator isLoading={isNewEntriesFetching}>
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFooter.js b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFooter.js
index ae1156448..e74a536e6 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFooter.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFooter.js
@@ -12,7 +12,7 @@ import { CLASSES } from 'common/classes';
 export default function PaymentMadeFooter() {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <Postbox title={'Payment made details'} defaultOpen={false}>
+      <Postbox title={<T id={'payment_made_details'} />} defaultOpen={false}>
         <Row>
           <Col md={8}>
             {/* --------- Statement --------- */}
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeader.js b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeader.js
index 528524842..ebde8ccc8 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeader.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeader.js
@@ -4,9 +4,9 @@ import { useFormikContext } from 'formik';
 import { sumBy } from 'lodash';
 import { CLASSES } from 'common/classes';
 import { compose } from 'utils';
-import {
-  Money,
-} from 'components';
+import { Money } from 'components';
+import { FormattedMessage as T } from 'react-intl';
+
 import PaymentMadeFormHeaderFields from './PaymentMadeFormHeaderFields';
 import withSettings from 'containers/Settings/withSettings';
 
@@ -18,7 +18,9 @@ function PaymentMadeFormHeader({
   baseCurrency,
 }) {
   // Formik form context.
-  const { values: { entries } } = useFormikContext();
+  const {
+    values: { entries },
+  } = useFormikContext();
 
   // Calculate the payment amount of the entries.
   const amountPaid = useMemo(() => sumBy(entries, 'payment_amount'), [entries]);
@@ -30,7 +32,9 @@ function PaymentMadeFormHeader({
 
         <div className={classNames(CLASSES.PAGE_FORM_HEADER_BIG_NUMBERS)}>
           <div class="big-amount">
-            <span class="big-amount__label">Amount Received</span>
+            <span class="big-amount__label">
+              <T id={'amount_received'} />
+            </span>
             <h1 class="big-amount__number">
               <Money amount={amountPaid} currency={baseCurrency} />
             </h1>
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js
index d107cdb5e..08a5442f2 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js
@@ -157,7 +157,7 @@ function PaymentMadeFormHeaderFields({ baseCurrency }) {
               small={true}
               minimal={true}
             >
-              Receive full amount (
+             <T id={'receive_full_amount'} /> (
               <Money amount={payableFullAmount} currency={baseCurrency} />)
             </Button>
           </FormGroup>
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesEmptyStatus.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesEmptyStatus.js
index 8ed4582af..fbe55af9c 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesEmptyStatus.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesEmptyStatus.js
@@ -2,17 +2,17 @@ import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import { EmptyStatus } from 'components';
+import { FormattedMessage as T } from 'react-intl';
 
 export default function PaymentMadesEmptyStatus() {
   const history = useHistory();
 
   return (
     <EmptyStatus
-      title={'The organization does not have invoices, yet!'}
+      title={<T id={'the_organization_doesn_t_receive_money_yet'} />}
       description={
         <p>
-          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>
       }
       action={
@@ -24,11 +24,11 @@ export default function PaymentMadesEmptyStatus() {
               history.push('/payment-mades/new');
             }}
           >
-            New bill payment
+            <T id={'new_bill_payment'} />
           </Button>
 
           <Button intent={Intent.NONE} large={true}>
-            Learn more
+            <T id={'learn_more'} />
           </Button>
         </>
       }
diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesEmptyStatus.js b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesEmptyStatus.js
index 80bd64d3b..bf7da7463 100644
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesEmptyStatus.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesEmptyStatus.js
@@ -1,37 +1,37 @@
-  import React from 'react';
-  import { Button, Intent } from '@blueprintjs/core';
-  import { useHistory } from 'react-router-dom';
-  import { EmptyStatus } from 'components';
+import React from 'react';
+import { Button, Intent } from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+import { EmptyStatus } from 'components';
+import { FormattedMessage as T } from 'react-intl';
 
-  export default function EstimatesEmptyStatus() {
-    const history = useHistory();
+export default function EstimatesEmptyStatus() {
+  const history = useHistory();
 
-    return (
-      <EmptyStatus
-        title={'The organization does not have invoices, yet!'}
-        description={
-          <p>
-            It is a long established fact that a reader will be distracted by the
-            readable content of a page when looking at its layout.
-          </p>
-        }
-        action={
-          <>
-            <Button
-              intent={Intent.PRIMARY}
-              large={true}
-              onClick={() => {
-                history.push('/invoices/new');
-              }}
-            >
-              New sale invoice
-            </Button>
+  return (
+    <EmptyStatus
+      title={<T id={'the_organization_doesn_t_receive_money_yet'} />}
+      description={
+        <p>
+          <T id={'it_is_a_long_established_fact_that_a_reader'} />
+        </p>
+      }
+      action={
+        <>
+          <Button
+            intent={Intent.PRIMARY}
+            large={true}
+            onClick={() => {
+              history.push('/invoices/new');
+            }}
+          >
+            <T id={'new_sale_invoice'} />
+          </Button>
 
-            <Button intent={Intent.NONE} large={true}>
-              Learn more
-            </Button>
-          </>
-        }
-      />
-    );
-  }
+          <Button intent={Intent.NONE} large={true}>
+            <T id={'learn_more'} />
+          </Button>
+        </>
+      }
+    />
+  );
+}
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/components.js b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/components.js
index 87d63db8e..1f323a1b7 100644
--- a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/components.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/components.js
@@ -4,6 +4,7 @@ import { useIntl } from 'react-intl';
 import { Money } from 'components';
 import { MoneyFieldCell } from 'components/DataTableCells';
 import { safeSumBy, formattedAmount } from 'utils';
+import { formatMessage } from 'services/intl';
 
 /**
  * Invoice date cell.
@@ -58,14 +59,14 @@ function MoneyTableCell({ row: { original }, value }) {
 }
 
 function DateFooterCell() {
-  return 'Total';
+  return formatMessage({id:'total'})
 }
 
 /**
  * Retrieve payment receive form entries columns.
  */
 export const usePaymentReceiveEntriesColumns = () => {
-  const { formatMessage } = useIntl();
+ 
 
   return React.useMemo(
     () => [
diff --git a/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooter.js b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooter.js
index c3f651be7..53fcdf5b9 100644
--- a/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooter.js
+++ b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooter.js
@@ -10,7 +10,7 @@ import { inputIntent } from 'utils';
 export default function ReceiptFormFooter({}) {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <Postbox title={'Invoice details'} defaultOpen={false}>
+      <Postbox title={<T id={'receipt_details'}/>} defaultOpen={false}>
         <Row>
           <Col md={8}>
             {/* --------- Receipt message --------- */}
@@ -45,7 +45,8 @@ export default function ReceiptFormFooter({}) {
               initialFiles={[]}
               // onDrop={handleDropFiles}
               // onDeleteFile={handleDeleteFile}
-              hint={'Attachments: Maxiumum size: 20MB'}
+              hint={<T id={'attachments_maximum'} />}
+
             />
           </Col>
         </Row>
diff --git a/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.js b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.js
index 38e7ea290..8b4906a69 100644
--- a/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.js
+++ b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.js
@@ -7,6 +7,8 @@ import { CLASSES } from 'common/classes';
 import ReceiptFormHeaderFields from './ReceiptFormHeaderFields';
 
 import { PageFormBigNumber } from 'components';
+import { formatMessage } from 'services/intl';
+
 import withSettings from 'containers/Settings/withSettings';
 import { compose } from 'redux';
 
@@ -22,9 +24,10 @@ function ReceiptFormHeader({
   const { values } = useFormikContext();
 
   // Calculate the total due amount of bill entries.
-  const totalDueAmount = useMemo(() => sumBy(values.entries, 'total'), [
-    values.entries,
-  ]);
+  const totalDueAmount = useMemo(
+    () => sumBy(values.entries, 'total'),
+    [values.entries],
+  );
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
@@ -32,7 +35,7 @@ function ReceiptFormHeader({
         onReceiptNumberChanged={onReceiptNumberChanged}
       />
       <PageFormBigNumber
-        label={'Due Amount'}
+        label={formatMessage({ id: 'due_amount' })}
         amount={totalDueAmount}
         currencyCode={baseCurrency}
       />
diff --git a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsEmptyStatus.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsEmptyStatus.js
index 2878dff45..597c63dd2 100644
--- a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsEmptyStatus.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsEmptyStatus.js
@@ -2,16 +2,17 @@ import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import { EmptyStatus } from 'components';
+import { FormattedMessage as T } from 'react-intl';
 
 export default function ReceiptsEmptyStatus() {
   const history = useHistory();
 
   return (
     <EmptyStatus
-      title={'Manage the organization’s services and products.'}
+      title={<T id={'manage_the_organization_s_services_and_products'} />}
       description={
         <p>
-          Here a list of your organization products and services, to be used when you create invoices or bills to your customers or vendors.
+          <T id={'here_a_list_of_your_organization_products_and_services'} />
         </p>
       }
       action={
@@ -23,11 +24,11 @@ export default function ReceiptsEmptyStatus() {
               history.push('/receipts/new');
             }}
           >
-            New receipt
+            <T id={'new_receipt'} />
           </Button>
 
           <Button intent={Intent.NONE} large={true}>
-            Learn more
+         <T id={'learn_more'}/>
           </Button>
         </>
       }
diff --git a/client/src/containers/Vendors/VendorForm/VendorAttahmentTab.js b/client/src/containers/Vendors/VendorForm/VendorAttahmentTab.js
index 71a4038e3..d82d5a92f 100644
--- a/client/src/containers/Vendors/VendorForm/VendorAttahmentTab.js
+++ b/client/src/containers/Vendors/VendorForm/VendorAttahmentTab.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import Dragzone from 'components/Dragzone';
+import { FormattedMessage as T } from 'react-intl';
 
 /**
  * Vendor Attahment Tab.
@@ -11,7 +12,7 @@ function VendorAttahmentTab() {
         initialFiles={[]}
         onDrop={null}
         onDeleteFile={[]}
-        hint={'Attachments: Maxiumum size: 20MB'}
+        hint={<T id={'attachments_maximum'} />}
       />
     </div>
   );
diff --git a/client/src/containers/Vendors/VendorForm/VendorFormAfterPrimarySection.js b/client/src/containers/Vendors/VendorForm/VendorFormAfterPrimarySection.js
index 9e51bd550..c5a9054e9 100644
--- a/client/src/containers/Vendors/VendorForm/VendorFormAfterPrimarySection.js
+++ b/client/src/containers/Vendors/VendorForm/VendorFormAfterPrimarySection.js
@@ -1,13 +1,15 @@
 import React from 'react';
 import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core';
 import { FastField, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import { inputIntent } from 'utils';
 
 /**
  * Vendor form  after primary section.
  */
 function VendorFormAfterPrimarySection() {
+  const { formatMessage } = useIntl();
+
   return (
     <div class="customer-form__after-primary-section-content">
       {/*------------ Vendor email -----------*/}
@@ -36,7 +38,7 @@ function VendorFormAfterPrimarySection() {
             {({ field, meta: { error, touched } }) => (
               <InputGroup
                 intent={inputIntent({ error, touched })}
-                placeholder={'Work'}
+                placeholder={formatMessage({ id: 'work' })}
                 {...field}
               />
             )}
@@ -45,7 +47,7 @@ function VendorFormAfterPrimarySection() {
             {({ field, meta: { error, touched } }) => (
               <InputGroup
                 intent={inputIntent({ error, touched })}
-                placeholder={'Mobile'}
+                placeholder={formatMessage({ id: 'Mobile' })}
                 {...field}
               />
             )}
diff --git a/client/src/containers/Vendors/VendorForm/VendorFormPrimarySection.js b/client/src/containers/Vendors/VendorForm/VendorFormPrimarySection.js
index c1bf1830e..a553835f6 100644
--- a/client/src/containers/Vendors/VendorForm/VendorFormPrimarySection.js
+++ b/client/src/containers/Vendors/VendorForm/VendorFormPrimarySection.js
@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core';
 import { FastField, Field, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import {
   Hint,
   FieldRequiredHint,
@@ -20,6 +20,7 @@ import { useAutofocus } from 'hooks';
  */
 function VendorFormPrimarySection() {
   const firstNameFieldRef = useAutofocus();
+  const { formatMessage } = useIntl();
 
   return (
     <div className={'customer-form__primary-section-content'}>
@@ -51,7 +52,7 @@ function VendorFormPrimarySection() {
           <FastField name={'first_name'}>
             {({ field, meta: { error, touched } }) => (
               <InputGroup
-                placeholder={'First Name'}
+                placeholder={formatMessage({ id: 'first_name' })}
                 intent={inputIntent({ error, touched })}
                 className={classNames('input-group--first-name')}
                 inputRef={(ref) => (firstNameFieldRef.current = ref)}
@@ -63,7 +64,7 @@ function VendorFormPrimarySection() {
           <FastField name={'last_name'}>
             {({ field, meta: { error, touched } }) => (
               <InputGroup
-                placeholder={'Last Name'}
+                placeholder={formatMessage({ id: 'last_name' })}
                 intent={inputIntent({ error, touched })}
                 className={classNames('input-group--last-name')}
                 {...field}
diff --git a/client/src/containers/Vendors/VendorsLanding/VendorsEmptyStatus.js b/client/src/containers/Vendors/VendorsLanding/VendorsEmptyStatus.js
index ff2d11247..e9d3f0b5e 100644
--- a/client/src/containers/Vendors/VendorsLanding/VendorsEmptyStatus.js
+++ b/client/src/containers/Vendors/VendorsLanding/VendorsEmptyStatus.js
@@ -2,17 +2,17 @@ import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import { EmptyStatus } from 'components';
+import { FormattedMessage as T } from 'react-intl';
 
 export default function VendorsEmptyStatus() {
   const history = useHistory();
 
   return (
     <EmptyStatus
-      title={"Create and manage your organization's vendors."}
+      title={<T id={'create_and_manage_your_organization_s_vendors'} />}
       description={
         <p>
-          Here a list of your organization products and services, to be used
-          when you create invoices or bills to your customers or vendors.
+          <T id={'here_a_list_of_your_organization_products_and_services'} />
         </p>
       }
       action={
@@ -24,11 +24,11 @@ export default function VendorsEmptyStatus() {
               history.push('/vendors/new');
             }}
           >
-            New vendor
+            <T id={'new_vendor'} />
           </Button>
 
           <Button intent={Intent.NONE} large={true}>
-            Learn more
+            <T id={'learn_more'} />
           </Button>
         </>
       }
diff --git a/client/src/lang/en/index.json b/client/src/lang/en/index.json
index ec4e325f1..22f9dc06f 100644
--- a/client/src/lang/en/index.json
+++ b/client/src/lang/en/index.json
@@ -902,7 +902,6 @@
   "manage_your_products_inventory_or_non_inventory": "Manage your products (inventory or non-inventory) and services and place them into categories.",
   "products_services_categories": "Products & Services Categories",
   "group_your_products_and_service": "Group your products and service into different categories.",
-  "inventory_adjustments": "Inventory Adjustments",
   "manage_your_inventory_adjustment_of_inventory_items": "Manage your inventory adjustment of inventory items.",
   "page_size": "Page size",
   "there_is_no_items_categories_in_table_yet": "There is no items categories in table yet.",
@@ -927,9 +926,25 @@
   "setting_your_auto_generated_invoice_number": "Setting your auto-generated invoice number",
   "setting_your_auto_generated_payment_receive_number": "Setting your auto-generated Payment Receive number",
   "the_organization_doesn_t_receive_money_yet": "The organization doesn't receive money, yet!",
-  "new_payment_receive": "New payment receive",
   "there_is_no_receivable_invoices_for_this_customer": "There is no receivable invoices for this customer that can be applied for this payment",
   "please_select_a_customer_to_display_all_open_invoices_for_it": "Please select a customer to display all open invoices for it.",
   "payment_receive_details": "Payment receive details",
-  "receive_full_amount": "Receive full amount"
+  "receive_full_amount": "Receive full amount",
+  "manage_the_organization_s_services_and_products": "Manage the organization’s services and products.",
+  "here_a_list_of_your_organization_products_and_services": " Here a list of your organization products and services, to be used when you create invoices or bills to your customers or vendors.",
+  "receipt_details": "Receipt details",
+  "bill_details": "Bill details",
+  "new_bill_payment": "New bill payment",
+  "new_sale_invoice": " New sale invoice",
+  "there_is_no_payable_bills_for_this_vendor_that_can_be_applied_for_this_payment": "There is no payable bills for this vendor that can be applied for this payment",
+  "please_select_a_vendor_to_display_all_open_bills_for_it": "Please select a vendor to display all open bills for it.",
+  "payment_made_details": "Payment made details",
+  "there_is_no_inventory_adjustments_transactions_yet":"There is no inventory adjustments transactions yet.",
+  "create_and_manage_your_organization_s_customers":"Create and manage your organization's customers.",
+  "salutation":"Salutation", 
+   "work":"work",
+   "mobile":"Mobile",
+   "phone":"Phone",
+   "create_and_manage_your_organization_s_vendors":"Create and manage your organization's vendors."
+
 }
\ No newline at end of file
diff --git a/server/.env.example b/server/.env.example
index 31287ed5d..cc54ba76b 100644
--- a/server/.env.example
+++ b/server/.env.example
@@ -26,7 +26,6 @@ DB_MANAGER_SUPER_PASSWORD=root
 
 MONGODB_DATABASE_URL=mongodb://localhost/bigcapital
 
-EASY_SMS_TOKEN=b0JDZW56RnV6aEthb0RGPXVEcUI
 
 JWT_SECRET=b0JDZW56RnV6aEthb0RGPXVEcUI