feat add localization & auto focus.

src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormFields.js

@@ -17,7 +17,7 @@ import {
  *  locking Transactions form fields.
  */
 export default function LockingTransactionsFormFields() {
-  const dateFieldRef = useAutofocus();
+  const reasonFieldRef = useAutofocus();
 
   return (
     <div className={Classes.DIALOG_BODY}>
@@ -43,7 +43,6 @@ export default function LockingTransactionsFormFields() {
                 minimal: true,
               }}
               intent={inputIntent({ error, touched })}
-              inputRef={(ref) => (dateFieldRef.current = ref)}
             />
           </FormGroup>
         )}
@@ -63,6 +62,7 @@ export default function LockingTransactionsFormFields() {
               growVertically={true}
               large={true}
               intent={inputIntent({ error, touched })}
+              inputRef={(ref) => (reasonFieldRef.current = ref)}
               {...field}
             />
           </FormGroup>

src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsFormFields.js

@@ -11,11 +11,14 @@ import {
   tansformDateValue,
   handleDateChange,
 } from 'utils';
+import { useAutofocus } from 'hooks';
 
 /**
  * Parial Unlocking transactions form fields.
  */
 export default function UnlockingPartialTransactionsFormFields() {
+  const reasonFieldRef = useAutofocus();
+
   return (
     <div className={Classes.DIALOG_BODY}>
       <Row>
@@ -96,6 +99,7 @@ export default function UnlockingPartialTransactionsFormFields() {
               growVertically={true}
               large={true}
               intent={inputIntent({ error, touched })}
+              inputRef={(ref) => (reasonFieldRef.current = ref)}
               {...field}
             />
           </FormGroup>

src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsFormFields.js

@@ -2,12 +2,15 @@ import React from 'react';
 import { FastField, ErrorMessage } from 'formik';
 import { Classes, FormGroup, TextArea } from '@blueprintjs/core';
 import { FieldRequiredHint, FormattedMessage as T } from 'components';
+import { useAutofocus } from 'hooks';
 import { inputIntent } from 'utils';
 
 /**
  * Unlocking transactions form fields.
  */
 export default function UnlockingTransactionsFormFields() {
+  const reasonFieldRef = useAutofocus();
+
   return (
     <div className={Classes.DIALOG_BODY}>
       {/*------------ Locking  Reason -----------*/}
@@ -24,6 +27,7 @@ export default function UnlockingTransactionsFormFields() {
               growVertically={true}
               large={true}
               intent={inputIntent({ error, touched })}
+              inputRef={(ref) => (reasonFieldRef.current = ref)}
               {...field}
             />
           </FormGroup>

src/containers/TransactionsLocking/TransactionsLockingList.js

@@ -1,9 +1,17 @@
 import React from 'react';
+import intl from 'react-intl-universal';
 import { Intent } from '@blueprintjs/core';
 import styled from 'styled-components';
 import * as R from 'ramda';
 
-import { Alert, ButtonLink, AppToaster, Join, Paragraph } from 'components';
+import {
+  Alert,
+  ButtonLink,
+  AppToaster,
+  Join,
+  Paragraph,
+  FormattedMessage as T,
+} from 'components';
 import { TransactionsLockingProvider } from './TransactionsLockingProvider';
 import {
   TransactionLockingContent,
@@ -130,7 +138,7 @@ function TransactionsLockingAlert() {
 
   return transactionLockingType !== 'all' ? (
     <LockAllAlert
-      title={'Lock All Transactions At Once.'}
+      title={<T id={'transactions_locking_lock_all_transactions_at_once'} />}
       intent={Intent.PRIMARY}
     >
       <p>
@@ -138,7 +146,7 @@ function TransactionsLockingAlert() {
         tempor incididunt ut labore et dolore magna aliqua.
       </p>
       <ButtonLink onClick={handleAllLockClick}>
-        Lock All Transactions At Once →
+        <T id={'transactions_locking.lock_all_transactions_at_once'} />
       </ButtonLink>
     </LockAllAlert>
   ) : (
@@ -148,7 +156,7 @@ function TransactionsLockingAlert() {
         tempor incididunt ut labore et dolore magna aliqua.
       </p>
       <ButtonLink onClick={handleUndividualLockClick}>
-        Lock Modules Individually →
+        <T id={'transactions_locking.lock_modules_individually'} />
       </ButtonLink>
     </LockAllAlert>
   );

src/containers/TransactionsLocking/components.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import intl from 'react-intl-universal';
 import {
   Button,
   Position,
@@ -96,13 +97,20 @@ export const TransactionLockingContent = ({
           <If condition={isEnabled}>
             <TransLockWrap>
               <TransLockingItemDesc>
-                Transactions of the module locked to{' '}
-                <strong>{lockToDate}</strong>.
+                {intl.formatHTMLMessage(
+                  { id: 'transactions_locking.of_the_module_locked_to' },
+                  {
+                    value: lockToDate,
+                  },
+                )}
               </TransLockingItemDesc>
 
               <If condition={lockReason}>
                 <TransLockingReason>
-                  <strong>Lock Reason:</strong> {lockReason}
+                  {intl.formatHTMLMessage(
+                    { id: 'transactions_locking.lock_reason' },
+                    { value: lockReason },
+                  )}
                 </TransLockingReason>
               </If>
             </TransLockWrap>
@@ -111,13 +119,21 @@ export const TransactionLockingContent = ({
           <If condition={isPartialUnlock}>
             <TransUnlockWrap>
               <TransLockingItemDesc>
-                Partial unlocked from <strong>{unlockFromDate}</strong> to{' '}
-                <strong>{unlockToDate}</strong>.
+                {intl.formatHTMLMessage(
+                  { id: 'transactions_locking.partial_unlocked_from' },
+                  {
+                    fromDate: unlockFromDate,
+                    toDate: unlockToDate,
+                  },
+                )}
               </TransLockingItemDesc>
 
               <If condition={unlockReason}>
                 <TransLockingReason>
-                  <strong>Unlock Reason:</strong> {unlockReason}
+                  {intl.formatHTMLMessage(
+                    { id: 'transactions_locking.unlock_reason' },
+                    { value: unlockReason },
+                  )}
                 </TransLockingReason>
               </If>
             </TransUnlockWrap>
@@ -132,7 +148,7 @@ export const TransactionLockingContent = ({
               intent={Intent.PRIMARY}
               onClick={handleLockClick}
             >
-              Lock
+              <T id={'transactions_locking.lock'} />
             </Button>
           </If>
 
@@ -143,23 +159,28 @@ export const TransactionLockingContent = ({
               intent={Intent.PRIMARY}
               onClick={handleEditBtn}
             >
-              Edit
+              <T id={'edit'} />
             </Button>
             <Divider />
             <Popover2
               content={
                 <Menu>
-                  <MenuItem text="Full unlock" onClick={handleUnlockFull} />
+                  <MenuItem
+                    text={<T id={'transactions_locking.full_unlock'} />}
+                    onClick={handleUnlockFull}
+                  />
 
                   <If condition={!isPartialUnlock}>
                     <MenuItem
-                      text="Partial unlock"
+                      text={<T id={'transactions_locking.paetial_unlock'} />}
                       onClick={handleUnlockPartial}
                     />
                   </If>
                   <If condition={isPartialUnlock}>
                     <MenuItem
-                      text="Cancel partial unlock"
+                      text={
+                        <T id={'transactions_locking.cancel_partial_unlock'} />
+                      }
                       onClick={handleCanclel}
                     />
                   </If>
@@ -169,7 +190,7 @@ export const TransactionLockingContent = ({
               minimal={true}
             >
               <Button small={true} minimal={true} intent={Intent.PRIMARY}>
-                Unlock
+                <T id={'transactions_locking.unlock'} />
               </Button>
             </Popover2>
           </If>

src/lang/en/index.json

@@ -1608,7 +1608,7 @@
   "locking_transactions.dialog.locking_date": "Locking date",
   "locking_transactions.dialog.reason": "Locking reason",
   "locking_transactions.dialog.success_message": "All transactions locking has been submit successfully.",
-  "unlocking_transactions.dialog.label": "transactions locking",
+  "unlocking_transactions.dialog.label": "Transactions unlocking",
   "unlocking_transactions.dialog.reason": "Unlocking reason",
   "unlocking_transactions.dialog.success_message": "Transactions locking has been canceled successfully.",
   "unlocking_partial_transactions.dialog.label": "Partial unlocking transactions",
@@ -1620,5 +1620,18 @@
   "unlocking_full_transactions.dialog.reason": "Unlocking reason",
   "unlocking_partial_transactions.alert.success_message": "Partial transaction unlocking has been canceled successfully.",
   "unlocking_partial_transactions.alert.message": "Are you sure you want to cancel partial unlock of this module?",
-  "yes": "Yes"
+  "yes": "Yes",
+  "transactions_locking.lock_all_transactions_at_once": "Lock All Transactions At Once →",
+  "transactions_locking.lock_modules_individually": "Lock Modules Individually →",
+  "transactions_locking_lock_all_transactions_at_once": "Lock All Transactions At Once.",
+  "transactions_locking.lock": "Lock", 
+  "transactions_locking.unlock": "Unlock", 
+  "transactions_locking.full_unlock": "Full Unlock", 
+  "transactions_locking.paetial_unlock": "Partial Unlock", 
+  "transactions_locking.cancel_partial_unlock": "Cancel Partial Unlock", 
+  "transactions_locking.of_the_module_locked_to": "Transactions of the module locked to <strong>{value}</strong>.",
+  "transactions_locking.lock_reason": "Lock Reason: <strong>{value}</strong>.",
+  "transactions_locking.partial_unlocked_from": "Partial unlocked from <strong>{fromDate}</strong> to <strong>{toDate}</strong>.",
+  "transactions_locking.unlock_reason":"<strong>Unlock Reason:</strong> {value}."
+
 }

src/style/pages/TransactionsLocking/TransactionsLockingDialog.scss

@@ -16,6 +16,7 @@
       .bp3-form-content {
         textarea {
           width: 100%;
+          min-height: 85px;
           min-width: 100%;
           font-size: 14px;
         }
@@ -25,7 +26,7 @@
   .bp3-dialog-footer {
     display: flex;
     justify-content: flex-start;
-    padding-top: 10px;
+    // padding-top: 10px;
     margin-left: 10px;
   }
 }