re-structure to monorepo.

packages/webapp/src/containers/TransactionsLocking/TransactionsLockingAlerts.tsx

@@ -0,0 +1,19 @@
+// @ts-nocheck
+import React from 'react';
+
+const cancelUnlockingPartialAlert = React.lazy(
+  () =>
+    import(
+      '@/containers/Alerts/TransactionLocking/cancelUnlockingPartialAlert'
+    ),
+);
+
+/**
+ * Transactions alerts.
+ */
+export default [
+  {
+    name: 'cancel-unlocking-partail',
+    component: cancelUnlockingPartialAlert,
+  },
+];

packages/webapp/src/containers/TransactionsLocking/TransactionsLockingBody.tsx

@@ -0,0 +1,74 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+import {
+  TransactionsLockingList,
+  TransactionsLockingFull,
+  TransactionLockingSkeletonList,
+} from './components';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+
+import { useTransactionsLockingContext } from './TransactionsLockingProvider';
+
+/**
+ * Transactions locking body.
+ * @returns {JSX}
+ */
+function TransactionsLockingBodyJsx({
+  // #withDialogActions
+  openDialog,
+
+  // #withAlertsActions
+  openAlert,
+}) {
+  const { isTransactionLockingLoading, transactionLockingType } =
+    useTransactionsLockingContext();
+
+  // Handle locking transactions.
+  const handleLockingTransactions = (module, {}, isEnabled) => {
+    openDialog('locking-transactions', {
+      isEnabled: isEnabled,
+      module: module,
+    });
+  };
+  // Handle unlocking transactions
+  const handleUnlockTransactions = (module) => {
+    openDialog('unlocking-transactions', { module: module });
+  };
+  // Handle unlocking transactions
+  const handleUnlockingPartial = (module) => {
+    openDialog('unlocking-partial-transactions', { module: module });
+  };
+  // Handle cancel partial unlocking.
+  const handleCancelUnlockingPartail = (module) => {
+    openAlert('cancel-unlocking-partail', { module: module });
+  };
+
+  return !isTransactionLockingLoading ? (
+    transactionLockingType === 'partial' ? (
+      <TransactionsLockingList
+        onLock={handleLockingTransactions}
+        onEditLock={handleLockingTransactions}
+        onCancelLock={handleUnlockTransactions}
+        onUnlockPartial={handleUnlockingPartial}
+        onCancelUnlockPartial={handleCancelUnlockingPartail}
+      />
+    ) : (
+      <TransactionsLockingFull
+        onLock={handleLockingTransactions}
+        onCancelLock={handleUnlockTransactions}
+        onUnlockPartial={handleUnlockingPartial}
+        onCancelUnlockPartial={handleCancelUnlockingPartail}
+      />
+    )
+  ) : (
+    <TransactionLockingSkeletonList />
+  );
+}
+
+export const TransactionsLockingBody = R.compose(
+  withAlertsActions,
+  withDialogActions,
+)(TransactionsLockingBodyJsx);

packages/webapp/src/containers/TransactionsLocking/TransactionsLockingHeader.tsx

@@ -0,0 +1,107 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import { Intent } from '@blueprintjs/core';
+
+import { useTransactionsLockingContext } from './TransactionsLockingProvider';
+import {
+  ButtonLink,
+  AppToaster,
+  Join,
+  FormattedMessage as T,
+  Alert,
+  AlertDesc,
+} from '@/components';
+import {
+  validateMoveToFullLocking,
+  validateMoveToPartialLocking,
+} from './utils';
+
+/**
+ * Transactions locking header.
+ * @returns
+ */
+export function TransactionsLockingHeader() {
+  const {
+    transactionsLocking,
+    transactionLockingType,
+    setTransactionLockingType,
+  } = useTransactionsLockingContext();
+
+  // Handle all lock link click.
+  const handleAllLockClick = () => {
+    const activeModules = validateMoveToFullLocking(
+      transactionsLocking.modules,
+    );
+    const modulesStrong = activeModules.map((module) => (
+      <strong>{module.formatted_module}</strong>
+    ));
+    if (activeModules.length > 0) {
+      AppToaster.show({
+        message: (
+          <span>
+            You should unlock <Join items={modulesStrong} sep={', '} /> modules
+            first, than you can lock all transactions at once.
+          </span>
+        ),
+        intent: Intent.DANGER,
+      });
+    } else {
+      setTransactionLockingType('all');
+    }
+  };
+
+  const handleUndividualLockClick = () => {
+    const isAllLockingActive = validateMoveToPartialLocking(
+      transactionsLocking.all,
+    );
+
+    if (isAllLockingActive) {
+      AppToaster.show({
+        message: intl.get(
+          'transactions_locking.you_should_unlock_all_transactions_at_once_before',
+        ),
+        intent: Intent.DANGER,
+      });
+    } else {
+      setTransactionLockingType('partial');
+    }
+  };
+
+  return transactionLockingType !== 'all' ? (
+    <LockAllAlert
+      title={<T id={'transactions_locking_lock_all_transactions_at_once'} />}
+      intent={Intent.PRIMARY}
+    >
+      <p>
+        <T id={'transactions_locking.callout.lock_all_at_once.desc'} />
+      </p>
+      <ButtonLink onClick={handleAllLockClick}>
+        <T id={'transactions_locking.lock_all_transactions_at_once'} />
+      </ButtonLink>
+    </LockAllAlert>
+  ) : (
+    <LockAllAlert
+      title={<T id={'transactions_locking.lock_individual_modules'} />}
+      intent={Intent.PRIMARY}
+    >
+      <p>
+        <T id={'transactions_locking.callout.lock_individual.desc'} />
+      </p>
+      <ButtonLink onClick={handleUndividualLockClick}>
+        <T id={'transactions_locking.lock_modules_individually'} />
+      </ButtonLink>
+    </LockAllAlert>
+  );
+}
+
+const LockAllAlert = styled(Alert)`
+  margin-bottom: 0;
+  margin-top: 20px;
+  background: transparent;
+
+  ${AlertDesc} {
+    color: #1f3255;
+  }
+`;

packages/webapp/src/containers/TransactionsLocking/TransactionsLockingList.tsx

@@ -0,0 +1,43 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+
+import { Paragraph, FormattedMessage as T } from '@/components';
+import { TransactionsLockingProvider } from './TransactionsLockingProvider';
+import { TransactionsLockingHeader } from './TransactionsLockingHeader';
+import { TransactionsLockingBody } from './TransactionsLockingBody';
+
+/**
+ * Transactions locking list.
+ */
+export default function TransactionsLockingListPage() {
+  return (
+    <TransactionsLockingProvider>
+      <TransactionsLocking>
+        <TransactionsLockingParagraph>
+          <TransLockingDesc>
+            <T id={'transactions_locking.long_description'} />
+          </TransLockingDesc>
+          <TransactionsLockingHeader />
+        </TransactionsLockingParagraph>
+
+        <TransactionsLockingBody />
+      </TransactionsLocking>
+    </TransactionsLockingProvider>
+  );
+}
+
+const TransactionsLocking = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 32px 40px;
+  min-width: 800px;
+  max-width: 900px;
+  width: 75%;
+`;
+
+const TransactionsLockingParagraph = styled(Paragraph)`
+  margin-bottom: 25px;
+`;
+
+const TransLockingDesc = styled.p``;

packages/webapp/src/containers/TransactionsLocking/TransactionsLockingPage.tsx

@@ -0,0 +1,13 @@
+// @ts-nocheck
+import React from 'react';
+
+import { TransactionsLockingProvider } from './TransactionsLockingProvider';
+import TransactionsLockingList from './TransactionsLockingList';
+
+export default function TransactionsLockingPage() {
+  return (
+    <TransactionsLockingProvider>
+      <TransactionsLockingList />
+    </TransactionsLockingProvider>
+  );
+}

packages/webapp/src/containers/TransactionsLocking/TransactionsLockingProvider.tsx

@@ -0,0 +1,51 @@
+// @ts-nocheck
+import React from 'react';
+import { DashboardInsider } from '@/components/Dashboard';
+import { useTransactionsLocking } from '@/hooks/query';
+import { useWatchImmediate } from '@/hooks/utils/useWatch';
+
+const TransactionsLockingContext = React.createContext();
+
+/**
+ * Transactions locking data provider.
+ */
+function TransactionsLockingProvider({ ...props }) {
+  // Fetch transaction locking modules list.
+  const {
+    data: transactionsLocking,
+    isFetching: isTransactionLockingFetching,
+    isLoading: isTransactionLockingLoading,
+  } = useTransactionsLocking();
+
+  // Transactions locking type.
+  const [transactionLockingType, setTransactionLockingType] =
+    React.useState('partial');
+
+  // Locking type controlled from response.
+  useWatchImmediate(() => {
+    if (transactionsLocking.locking_type) {
+      setTransactionLockingType(transactionsLocking.locking_type);
+    }
+  }, transactionsLocking.locking_type);
+
+  // Provider
+  const provider = {
+    transactionsLocking,
+    isTransactionLockingFetching,
+    isTransactionLockingLoading,
+
+    transactionLockingType,
+    setTransactionLockingType,
+  };
+
+  return (
+    <DashboardInsider>
+      <TransactionsLockingContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useTransactionsLockingContext = () =>
+  React.useContext(TransactionsLockingContext);
+
+export { TransactionsLockingProvider, useTransactionsLockingContext };

packages/webapp/src/containers/TransactionsLocking/components.tsx

@@ -0,0 +1,421 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import intl from 'react-intl-universal';
+import {
+  Button,
+  Position,
+  MenuItem,
+  Menu,
+  Intent,
+  Divider,
+  Classes,
+} from '@blueprintjs/core';
+import { Popover2 } from '@blueprintjs/popover2';
+
+import { Hint, Icon, If, FormattedMessage as T } from '@/components';
+import { useTransactionsLockingContext } from './TransactionsLockingProvider';
+import { safeInvoke } from '@/utils';
+
+/**
+ * Transaction locking module item.
+ * @returns {React.JSX}
+ */
+export function TransactionsLockingItemModule({ module, ...rest }) {
+  return (
+    <TransactionLockingContent
+      name={module.formatted_module}
+      module={module.module}
+      description={module.description}
+      isEnabled={module.is_enabled}
+      isPartialUnlock={module.is_partial_unlock}
+      lockToDate={module.formatted_lock_to_date}
+      lockReason={module.lock_reason}
+      unlockReason={module.unlock_reason}
+      unlockFromDate={module.formatted_unlock_from_date}
+      unlockToDate={module.formatted_unlock_to_date}
+      {...rest}
+    />
+  );
+}
+
+/**
+ * Transactions locking items modules list.
+ * @returns {React.JSX}
+ */
+export function TransactionsLockingList({ ...rest }) {
+  const {
+    transactionsLocking: { modules },
+  } = useTransactionsLockingContext();
+
+  return modules.map((module) => (
+    <TransactionsLockingItemModule module={module} {...rest} />
+  ));
+}
+
+/**
+ * Transactions locking full module item.
+ * @returns {React.JSX}
+ */
+export function TransactionsLockingFull({ ...rest }) {
+  const {
+    transactionsLocking: { all },
+  } = useTransactionsLockingContext();
+
+  return <TransactionsLockingItemModule module={all} {...rest} />;
+}
+
+/**
+ * Transactions locking skeleton list.
+ * @returns {React.JSX}
+ */
+export function TransactionLockingSkeletonList() {
+  return (
+    <>
+      <TransactionLockingItemSkeleton />
+      <TransactionLockingItemSkeleton />
+      <TransactionLockingItemSkeleton />
+    </>
+  );
+}
+
+/**
+ * Transactions locking skeleton item.
+ * @returns {React.JSX}
+ */
+export const TransactionLockingItemSkeleton = ({}) => {
+  return (
+    <TransactionLockingWrapp>
+      <TransLockingInner>
+        <TransLockingIcon>
+          <Icon icon="lock" iconSize={24} />
+        </TransLockingIcon>
+
+        <TransLockingContent>
+          <TransLockingItemTitle className={Classes.SKELETON}>
+            XXXX
+          </TransLockingItemTitle>
+
+          <TransLockingItemDesc className={Classes.SKELETON}>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+          </TransLockingItemDesc>
+        </TransLockingContent>
+      </TransLockingInner>
+    </TransactionLockingWrapp>
+  );
+};
+
+const TransactionsLockingItemContext = React.createContext();
+
+const useTransactionsLockingItemContext = () =>
+  React.useContext(TransactionsLockingItemContext);
+
+/**
+ * Transactions locking item.
+ * @returns {React.JSX}
+ */
+export const TransactionLockingContent = (props) => {
+  const {
+    name,
+    description,
+    module,
+
+    isEnabled,
+    lockToDate,
+    lockReason,
+
+    // Unlock props.
+    isPartialUnlock,
+    unlockToDate,
+    unlockFromDate,
+    unlockReason,
+
+    onLock,
+    onCancelLock,
+    onEditLock,
+    onUnlockPartial,
+    onCancelUnlockPartial,
+  } = props;
+
+  return (
+    <TransactionsLockingItemContext.Provider value={props}>
+      <TransactionLockingWrapp isEnabled={isEnabled}>
+        <TransLockingInner>
+          <TransLockingIcon>
+            <Icon icon="lock" iconSize={24} />
+          </TransLockingIcon>
+
+          <TransactionsLockingItemContent />
+          <TransactionsLockingItemActions />
+        </TransLockingInner>
+      </TransactionLockingWrapp>
+    </TransactionsLockingItemContext.Provider>
+  );
+};
+
+/**
+ * Transactions locking item content.
+ */
+function TransactionsLockingItemContent() {
+  const {
+    name,
+    description,
+
+    isEnabled,
+    lockToDate,
+    lockReason,
+
+    // Unlock props.
+    isPartialUnlock,
+    unlockToDate,
+    unlockFromDate,
+    unlockReason,
+  } = useTransactionsLockingItemContext();
+
+  return (
+    <TransLockingContent>
+      <TransLockingItemTitle>
+        {name}
+        <Hint content={description} position={Position.BOTTOM_LEFT} />
+      </TransLockingItemTitle>
+
+      <If condition={!isEnabled}>
+        <TransLockingItemDesc>
+          <T id={'transactions_locking.lock_item.no_lock'} />
+        </TransLockingItemDesc>
+      </If>
+
+      <If condition={isEnabled}>
+        <TransLockWrap>
+          <TransLockingItemDesc>
+            {intl.formatHTMLMessage(
+              { id: 'transactions_locking.of_the_module_locked_to' },
+              {
+                value: lockToDate,
+              },
+            )}
+          </TransLockingItemDesc>
+
+          <If condition={lockReason}>
+            <TransLockingReason>
+              {intl.formatHTMLMessage(
+                { id: 'transactions_locking.lock_reason' },
+                { value: lockReason },
+              )}
+            </TransLockingReason>
+          </If>
+        </TransLockWrap>
+      </If>
+
+      <If condition={isPartialUnlock}>
+        <TransUnlockWrap>
+          <TransLockingItemDesc>
+            {intl.formatHTMLMessage(
+              { id: 'transactions_locking.partial_unlocked_from' },
+              {
+                fromDate: unlockFromDate,
+                toDate: unlockToDate,
+              },
+            )}
+          </TransLockingItemDesc>
+
+          <If condition={unlockReason}>
+            <TransLockingReason>
+              {intl.formatHTMLMessage(
+                { id: 'transactions_locking.unlock_reason' },
+                { value: unlockReason },
+              )}
+            </TransLockingReason>
+          </If>
+        </TransUnlockWrap>
+      </If>
+    </TransLockingContent>
+  );
+}
+
+/**
+ * Transactions locking item actions.
+ */
+function TransactionsLockingItemActions() {
+  const {
+    module,
+    isEnabled,
+
+    // Unlock props.
+    isPartialUnlock,
+
+    onLock,
+    onCancelLock,
+    onEditLock,
+    onUnlockPartial,
+    onCancelUnlockPartial,
+  } = useTransactionsLockingItemContext();
+
+  const handleLockClick = (event) => {
+    safeInvoke(onLock, module, event);
+  };
+  const handleEditBtn = (event) => {
+    safeInvoke(onEditLock, module, isEnabled, event);
+  };
+  const handleUnlockPartial = (event) => {
+    safeInvoke(onUnlockPartial, module, event);
+  };
+
+  const handleUnlockFull = (event) => {
+    safeInvoke(onCancelLock, module, event);
+  };
+  const handleCancelPartialUnlock = (event) => {
+    safeInvoke(onCancelUnlockPartial, module, event);
+  };
+
+  return (
+    <TransLockingActions>
+      <If condition={!isEnabled}>
+        <Button
+          small={true}
+          minimal={true}
+          intent={Intent.PRIMARY}
+          onClick={handleLockClick}
+        >
+          <T id={'transactions_locking.lock'} />
+        </Button>
+      </If>
+
+      <If condition={isEnabled}>
+        <Button
+          small={true}
+          minimal={true}
+          intent={Intent.PRIMARY}
+          onClick={handleEditBtn}
+        >
+          <T id={'edit'} />
+        </Button>
+        <Divider />
+        <Popover2
+          content={
+            <Menu>
+              <MenuItem
+                text={<T id={'transactions_locking.full_unlock'} />}
+                onClick={handleUnlockFull}
+              />
+
+              <If condition={!isPartialUnlock}>
+                <MenuItem
+                  text={<T id={'transactions_locking.paetial_unlock'} />}
+                  onClick={handleUnlockPartial}
+                />
+              </If>
+              <If condition={isPartialUnlock}>
+                <MenuItem
+                  text={<T id={'transactions_locking.cancel_partial_unlock'} />}
+                  onClick={handleCancelPartialUnlock}
+                />
+              </If>
+            </Menu>
+          }
+          placement={'bottom-start'}
+          minimal={true}
+        >
+          <Button small={true} minimal={true} intent={Intent.PRIMARY}>
+            <T id={'transactions_locking.unlock'} />
+          </Button>
+        </Popover2>
+      </If>
+    </TransLockingActions>
+  );
+}
+
+const TransactionLockingWrapp = styled.div`
+  display: flex;
+  align-items: center;
+  border-radius: 6px;
+  border: 1px solid #c4d2d7;
+  padding: 16px 18px;
+  margin-bottom: 25px;
+  background: #fff;
+  box-shadow: 0 4px 20px -5px rgb(0 8 36 / 5%);
+
+  ${(props) =>
+    props.isEnabled &&
+    `
+    border-color: #fc8483; 
+
+    ${TransLockingIcon} {
+      color: #ef6d6d;
+    }
+  `}
+`;
+
+const TransLockingInner = styled.div`
+  display: flex;
+  align-items: center;
+  flex: 1 1 0;
+`;
+
+const TransLockingItemTitle = styled.h1`
+  font-size: 18px;
+  margin: 0 0 8px;
+  line-height: 1;
+  font-weight: 600;
+`;
+const TransLockingItemDesc = styled.p`
+  margin-bottom: 0;
+  opacity: 0.9;
+`;
+
+const TransLockingIcon = styled.div`
+  border: 1px solid #d2dde2;
+  height: 45px;
+  width: 45px;
+  text-align: center;
+  line-height: 45px;
+  border-radius: 8px;
+  color: #93a1ba;
+
+  .bp3-icon {
+    position: relative;
+    top: 1px;
+  }
+`;
+
+export const TransLockingActions = styled.div`
+  display: flex;
+
+  .bp3-divider {
+    margin: 2px;
+  }
+`;
+
+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: 10px;
+  border-top: 1px solid #ddd;
+  margin-top: 10px;
+
+  ${TransLockingReason} {
+    margin-top: 8px;
+  }
+  ${TransLockingItemDesc} {
+    font-size: 13px;
+  }
+`;
+
+const TransLockWrap = styled.div`
+  ${TransLockingReason} {
+    margin-top: 10px;
+  }
+`;

packages/webapp/src/containers/TransactionsLocking/utils.tsx

@@ -0,0 +1,31 @@
+// @ts-nocheck
+export const validateMoveToPartialLocking = (all) => {
+  return all.is_enabled;
+};
+
+export const validateMoveToFullLocking = (modules) => {
+  return modules.filter((module) => module.is_enabled);
+};
+
+export const transformItem = (item) => {
+  return {
+    name: item.formatted_module,
+    module: item.module,
+    description: item.description,
+    isEnabled: item.is_enabled,
+    isPartialUnlock: item.is_partial_unlock,
+    lockToDate: item.formatted_lock_to_date,
+    lockReason: item.lock_reason,
+    unlockFromDate: item.formatted_unlock_from_date,
+    unlockToDate: item.formatted_unlock_to_date,
+    unlockReason: item.unlock_reason,
+    partialUnlockReason: item.partial_unlock_reason,
+  };
+};
+
+export const transformList = (res) => {
+  return {
+    all: transformItem(res.all),
+    modules: res.modules.map((module) => transformItem(module)),
+  };
+};