feat: Transactions locking.

src/containers/TransactionsLocking/TransactionsLockingList.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { TransactionsLockingProvider } from './TransactionsLockingProvider';
+import { TransactionLockingContent } from './components';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { compose } from 'utils';
+
+/**
+ * Transactions locking list.
+ */
+function TransactionsLockingList({
+  // #withDialogActions
+  openDialog,
+}) {
+  // Handle switch transactions locking.
+  const handleSwitchTransactionsLocking = () => {
+    openDialog('transactions-locking', {});
+  };
+
+  const DataTest = [
+    {
+      name: 'sales',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do',
+    },
+    {
+      name: 'purchases',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do',
+    },
+    {
+      name: 'financial',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do',
+    },
+  ];
+
+  return (
+    <TransactionsLockingProvider>
+      <TransactionsLocking>
+        <TransactionsLockingParagraph>
+          <h2>Transaction Locking</h2>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br />
+            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+          Lock All Transactions At Once.
+          <Link to={'/'}> {''}Lock All Transactions At Once. </Link>
+        </TransactionsLockingParagraph>
+
+        {DataTest.map(({ name, description }) => (
+          <TransactionLockingContent
+            name={name}
+            description={description}
+            onSwitch={handleSwitchTransactionsLocking}
+          />
+        ))}
+      </TransactionsLocking>
+    </TransactionsLockingProvider>
+  );
+}
+export default compose(withDialogActions)(TransactionsLockingList);
+
+const TransactionsLocking = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 22px 32px;
+`;
+
+const TransactionsLockingParagraph = styled.div`
+  line-height: 1.5rem;
+  font-size: 16px;
+  h2 {
+    margin-bottom: 12px;
+  }
+`;

src/containers/TransactionsLocking/TransactionsLockingProvider.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+
+const TransactionsLockingContext = React.createContext();
+
+/**
+ * Transactions locking data provider.
+ */
+function TransactionsLockingProvider({ ...props }) {
+  // Provider
+  const provider = {};
+
+  return (
+    <DashboardInsider
+    // loading={}
+    >
+      <TransactionsLockingContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useTransactionsLockingContext = () =>
+  React.useContext(TransactionsLockingContext);
+
+export { TransactionsLockingProvider, useTransactionsLockingContext };

src/containers/TransactionsLocking/components.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from 'styled-components';
+import {  Switch, FormGroup, Intent } from '@blueprintjs/core';
+import { Icon,  FormattedMessage as T } from 'components';
+
+export const TransactionLockingContent = ({ name, description, onSwitch }) => (
+  <TransactionLockingWrapp>
+    <TransactionsLockingcontent>
+      <Icon icon="info-circle" iconSize={22} />
+
+      <div className="block">
+        <h3>
+          <T id={name} />
+        </h3>
+
+        <p>{description}</p>
+      </div>
+      <FormGroup>
+        <Switch
+          large={true}
+          defaultChecked={false}
+          minimal={true}
+          className="ml2"
+          onChange={onSwitch}
+        />
+      </FormGroup>
+    </TransactionsLockingcontent>
+  </TransactionLockingWrapp>
+);
+
+const TransactionLockingWrapp = styled.div`
+  display: flex;
+  align-items: center;
+  border-radius: 6px;
+  border: 1px solid #d2dce2;
+  max-width: 610px;
+  padding: 22px 15px;
+  margin-top: 25px;
+
+  div.block {
+    flex: 1 1 0;
+    margin-left: 20px;
+    width: 100%;
+  }
+`;
+
+const TransactionsLockingcontent = styled.div`
+  display: flex;
+  align-items: center;
+  flex: 1 1 0;
+`;