fix: react intl.

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

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>
 

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
-                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(
     () => [
       {

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(
     () => [
       {

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

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>