feat: optimize transactions locking.

src/components/Alert/style.module.scss

@@ -1,26 +0,0 @@
-.root {
-  
-
-  &_danger {
-    
-
-    
-  }
-
-  &__primary{
-    
-
-    .title{
-      color: #1a3bd4;
-    }
-  }
-}
-
-
-.title {
-
-}
-
-.description {
-
-}

src/components/Typo/Paragraph.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import clsx from 'classnames';
+
+export function Paragraph({ className, children }) {
+  return <p className={clsx('paragraph', className)}>{children}</p>;
+}

src/components/Typo/index.js

@@ -0,0 +1,2 @@
+
+export * from './Paragraph';

src/components/index.js

@@ -88,6 +88,7 @@ export * from './IntersectionObserver';
 export * from './SMSPreview';
 export * from './Contacts';
 export * from './Utils/Join';
+export * from './Typo';
 
 const Hint = FieldHint;
 

src/containers/Alerts/TransactionLocking/cancelUnlockingPartialAlert.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { FormattedMessage as T, FormattedHTMLMessage } from 'components';
+import { FormattedMessage as T } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
@@ -61,9 +61,8 @@ function CancelUnlockingPartialTarnsactions({
   return (
     <Alert
       cancelButtonText={<T id={'cancel'} />}
-      confirmButtonText={<T id={'save'} />}
-      icon="trash"
-      intent={Intent.WARNING}
+      confirmButtonText={<T id={'yes'} />}
+      intent={Intent.DANGER}
       isOpen={isOpen}
       onCancel={handleCancel}
       onConfirm={handleConfirm}

src/containers/GlobalErrors/GlobalErrors.js

@@ -52,6 +52,16 @@ function GlobalErrors({
       toastKeySomethingWrong,
     );
   }
+  if (globalErrors.transactionsLocked) {
+    AppToaster.show({
+      message:
+        'Transactions before 13 Dec 2021 has been locked. Hence action cannot be performed.',
+      intent: Intent.DANGER,
+      onDismiss: () => {
+        globalErrorsSet({ transactionsLocked: false });
+      },
+    });
+  }
   return null;
 }
 

src/containers/TransactionsLocking/TransactionsLockingList.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import clsx from 'classnames';
 import { Intent } from '@blueprintjs/core';
 import styled from 'styled-components';
 import * as R from 'ramda';
 
-import { Alert, ButtonLink, AppToaster, Join } from 'components';
+import { Alert, ButtonLink, AppToaster, Join, Paragraph } from 'components';
 import { TransactionsLockingProvider } from './TransactionsLockingProvider';
 import {
   TransactionLockingContent,
@@ -19,10 +18,6 @@ import {
   validateMoveToPartialLocking,
 } from './utils';
 
-function Paragraph({ className, children }) {
-  return <p className={clsx('paragraph', className)}>{children}</p>;
-}
-
 function TransactionsLockingList({
   items,
   onLock,
@@ -37,6 +32,7 @@ function TransactionsLockingList({
       module,
       formatted_module,
       description,
+      ...item
     }) => (
       <TransactionLockingContent
         name={formatted_module}
@@ -49,6 +45,11 @@ function TransactionsLockingList({
         onUnlockPartial={onUnlockPartial}
         onEditLock={onLock}
         onCancle={onCancel}
+        lockToDate={item.formatted_lock_to_date}
+        lockReason={item.lock_reason}
+        unlockReason={item.unlock_reason}
+        unlockFromDate={item.formatted_unlock_from_date}
+        unlockToDate={item.formatted_unlock_to_date}
       />
     ),
   );

src/containers/TransactionsLocking/components.js

@@ -40,8 +40,17 @@ export const TransactionLockingContent = ({
   name,
   description,
   module,
+
   isEnabled,
+  lockToDate,
+  lockReason,
+
+  // Unlock props.
   isPartialUnlock,
+  unlockToDate,
+  unlockFromDate,
+  unlockReason,
+
   onLock,
   onEditLock,
   onUnlockFull,
@@ -76,16 +85,43 @@ export const TransactionLockingContent = ({
           <TransLockingItemTitle>
             {name}
             <Hint content={description} position={Position.BOTTOM_LEFT} />
-
-            {isPartialUnlock && (
-              <Tag small={true} minimal={true} intent={Intent.PRIMARY}>
-                Partial unlocked
-              </Tag>
-            )}
           </TransLockingItemTitle>
-          <TransLockingItemDesc>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-          </TransLockingItemDesc>
+
+          <If condition={!isEnabled}>
+            <TransLockingItemDesc>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+            </TransLockingItemDesc>
+          </If>
+
+          <If condition={isEnabled}>
+            <TransLockWrap>
+              <TransLockingItemDesc>
+                Transactions of the module locked to{' '}
+                <strong>{lockToDate}</strong>.
+              </TransLockingItemDesc>
+
+              <If condition={lockReason}>
+                <TransLockingReason>
+                  <strong>Lock Reason:</strong> {lockReason}
+                </TransLockingReason>
+              </If>
+            </TransLockWrap>
+          </If>
+
+          <If condition={isPartialUnlock}>
+            <TransUnlockWrap>
+              <TransLockingItemDesc>
+                Partial unlocked from <strong>{unlockFromDate}</strong> to{' '}
+                <strong>{unlockToDate}</strong>.
+              </TransLockingItemDesc>
+
+              <If condition={unlockReason}>
+                <TransLockingReason>
+                  <strong>Unlock Reason:</strong> {unlockReason}
+                </TransLockingReason>
+              </If>
+            </TransUnlockWrap>
+          </If>
         </TransLockingContent>
 
         <TransLockingActions>
@@ -208,4 +244,31 @@ export const TransLockingContent = styled.div`
   flex: 1 1 0;
   margin-left: 20px;
   width: 100%;
+  padding-right: 10px;
+`;
+
+export const TransLockingReason = styled.div`
+  font-size: 13px;
+
+  strong {
+    color: #777;
+  }
+`;
+
+const TransUnlockWrap = styled.div`
+  padding-top: 12px;
+  border-top: 1px solid #ddd;
+  margin-top: 12px;
+
+  ${TransLockingReason} {
+    margin-top: 8px;
+  }
+  ${TransLockingItemDesc} {
+    font-size: 13px;
+  }
+`;
+const TransLockWrap = styled.div`
+  ${TransLockingReason} {
+    margin-top: 10px;
+  }
 `;

src/lang/en/index.json

@@ -1619,7 +1619,6 @@
   "unlocking_full_transactions.dialog.label": "Full unlocking transactions",
   "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 this ?"
-
-
+  "unlocking_partial_transactions.alert.message": "Are you sure you want to cancel partial unlock of this module?",
+  "yes": "Yes"
 }