From b2655a0ed2f0b3e63297fc0424df833cab721d7a Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Thu, 10 Jun 2021 15:49:12 +0200
Subject: [PATCH] fix: react intl.

---
 client/src/components/ContactsMultiSelect.js  | 23 ++++++---------
 client/src/components/Pagination.js           | 14 ++++-----
 .../containers/Accounts/AccountsActionsBar.js |  5 ++--
 .../Authentication/InviteAcceptFormContent.js | 12 ++++----
 .../containers/Authentication/RegisterForm.js | 12 ++++----
 .../FinancialStatements/reducers.js           |  3 +-
 .../Bills/BillsLanding/components.js          | 29 +++++++------------
 .../Invoices/InvoicesLanding/components.js    | 24 +++++----------
 .../containers/Subscriptions/BillingPlan.js   |  5 ++--
 .../Subscriptions/BillingPlansForm.js         |  7 +++--
 client/src/lang/en/index.json                 |  5 ++--
 11 files changed, 58 insertions(+), 81 deletions(-)

diff --git a/client/src/components/ContactsMultiSelect.js b/client/src/components/ContactsMultiSelect.js
index 7cbb1c332..9a480f66a 100644
--- a/client/src/components/ContactsMultiSelect.js
+++ b/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, [
-    selectedContacts,
-  ]);
+  const countSelected = useMemo(
+    () => 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 ? (
-            defaultText
-          ) : (
-            <T id={'selected_customers'} values={{ count: countSelected }} />
-          )
+          countSelected === 0
+            ? defaultText
+            : intl.get('selected_customers', { count: countSelected })
         }
         {...buttonProps}
       />
diff --git a/client/src/components/Pagination.js b/client/src/components/Pagination.js
index 27f9c3fe2..b3e16ab36 100644
--- a/client/src/components/Pagination.js
+++ b/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
-          id={'showing_current_page_to_total'}
-          values={{
-            currentPage: state.currentPage,
-            totalPages: state.totalPages,
-            total: total,
-          }}
-        />
+        {intl.get('showing_current_page_to_total', {
+          currentPage: state.currentPage,
+          totalPages: state.totalPages,
+          total: total,
+        })}
       </div>
     </div>
   );
diff --git a/client/src/containers/Accounts/AccountsActionsBar.js b/client/src/containers/Accounts/AccountsActionsBar.js
index 25df336fa..2731c823e 100644
--- a/client/src/containers/Accounts/AccountsActionsBar.js
+++ b/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);
diff --git a/client/src/containers/Authentication/InviteAcceptFormContent.js b/client/src/containers/Authentication/InviteAcceptFormContent.js
index ad3d0e3a5..a5d063446 100644
--- a/client/src/containers/Authentication/InviteAcceptFormContent.js
+++ b/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
-            id={'signing_in_or_creating'}
-            values={{
-              terms: (msg) => <Link>{msg}</Link>,
-              privacy: (msg) => <Link>{msg}</Link>,
-            }}
-          />
+          {intl.getHTML('signing_in_or_creating', {
+            terms: (msg) => <Link>{msg}</Link>,
+            privacy: (msg) => <Link>{msg}</Link>,
+          })}
         </p>
       </div>
 
diff --git a/client/src/containers/Authentication/RegisterForm.js b/client/src/containers/Authentication/RegisterForm.js
index 742e2db66..f634b2f42 100644
--- a/client/src/containers/Authentication/RegisterForm.js
+++ b/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
-            id={'signing_in_or_creating'}
-            values={{
-              terms: (msg) => <Link>{msg}</Link>,
-              privacy: (msg) => <Link>{msg}</Link>,
-            }}
-          />
+          {intl.getHTML('signing_in_or_creating', {
+            terms: (msg) => <Link>{msg}</Link>,
+            privacy: (msg) => <Link>{msg}</Link>,
+          })}
         </p>
       </div>
 
diff --git a/client/src/containers/FinancialStatements/reducers.js b/client/src/containers/FinancialStatements/reducers.js
index 4e6edfcbf..7d6770764 100644
--- a/client/src/containers/FinancialStatements/reducers.js
+++ b/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 && {
diff --git a/client/src/containers/Purchases/Bills/BillsLanding/components.js b/client/src/containers/Purchases/Bills/BillsLanding/components.js
index d7d42900b..34d299000 100644
--- a/client/src/containers/Purchases/Bills/BillsLanding/components.js
+++ b/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
-                id={'day_partially_paid'}
-                values={{
-                  due: (
-                    <Money
-                      amount={bill.due_amount}
-                      currency={bill.currency_code}
-                    />
-                  ),
-                }}
-              />
+              {intl.get('day_partially_paid', {
+                due: (
+                  <Money
+                    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(
     () => [
       {
diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/components.js b/client/src/containers/Sales/Invoices/InvoicesLanding/components.js
index b21275b52..4cc6acc46 100644
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/components.js
+++ b/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
-                id={'day_partially_paid'}
-                values={{
-                  due: (
-                    <Money
-                      amount={row.due_amount}
-                      currency={row.currency_code}
-                    />
-                  ),
-                }}
-              />
+              {intl.get('day_partially_paid', {
+                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(
     () => [
       {
diff --git a/client/src/containers/Subscriptions/BillingPlan.js b/client/src/containers/Subscriptions/BillingPlan.js
index c307cd0b4..c15c450ae 100644
--- a/client/src/containers/Subscriptions/BillingPlan.js
+++ b/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>
 
@@ -54,4 +55,4 @@ export default function BillingPlan({
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/client/src/containers/Subscriptions/BillingPlansForm.js b/client/src/containers/Subscriptions/BillingPlansForm.js
index fa809aba2..222d0d749 100644
--- a/client/src/containers/Subscriptions/BillingPlansForm.js
+++ b/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>
diff --git a/client/src/lang/en/index.json b/client/src/lang/en/index.json
index def7bf7f8..b8bcb1a75 100644
--- a/client/src/lang/en/index.json
+++ b/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}"
 }
\ No newline at end of file