Merge pull request #46 from dexlab-io/fix/payment-page-modal

Implemented payment page as modal

package.json

@@ -40,6 +40,7 @@
     "react-helmet": "^5.2.0",
     "react-i18next": "^9.0.10",
     "react-point": "^3.0.1",
+    "react-responsive-modal": "^3.6.0",
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.3",
     "react-select": "^2.3.0",

src/App.js

@@ -8,7 +8,7 @@ import './localization'; // load i18n
 import apolloClient from './utils/apolloClient';
 import theme, { GlobalStyle } from './theme'; // load custom theme
 import EthereumHDWallet from './class/ethereum/EthereumHDWallet';
-import { Error404, Dashboard, Payment, Test } from './pages';
+import { Error404, Dashboard, Test } from './pages';
 
 const posAddress = '0xd18a54f89603Fe4301b29EF6a8ab11b9Ba24f139';
 
@@ -32,8 +32,6 @@ class App extends Component {
             <BrowserRouter>
               <Switch>
                 <Route path="/" exact component={Dashboard} />
-                <Route path="/payment/:id?" component={Payment} />
-                <Route path="/pos" exact component={Dashboard} />
                 <Route path="/test" exact component={Test} />
                 <Route component={Error404} />
               </Switch>

src/class/WatcherTx.js

@@ -115,7 +115,7 @@ export default class WatcherTx {
     const web3 = this.getWeb3Http();
     const currentBlock = await web3.eth.getBlockNumber();
 
-    console.log(currentBlock, this.pollingOn);
+    // console.log(currentBlock, this.pollingOn);
 
     if (currentBlock > this.lastBlockChecked) {
       const block = await web3.eth.getBlock(currentBlock);

src/pages/404/index.js

@@ -7,7 +7,12 @@ const Error404 = () => {
   return (
     <Layout>
       <Seo title="POS" description="POS System" />
-      <h2 className="title">404</h2>
+      <div className="section">
+        <div className="container">
+          <h2 className="title">404</h2>
+          <p>The page you are looking for, could not be found.</p>
+        </div>
+      </div>
     </Layout>
   );
 };

src/pages/Dashboard/desktop.view.js

@@ -7,6 +7,7 @@ import NumberInput from './components/Keypad/NumberInput';
 import GenerateBillBtn from './components/GenerateBillBtn';
 import Keypad from './components/Keypad';
 import RecentPayments from './components/RecentPayments';
+import Payment from '../Payment';
 
 const Section = styled.div`
   border-top: ${props => `1px solid ${props.theme.borderColor}`};
@@ -29,7 +30,7 @@ const LeftSide = styled.div`
 `;
 
 export default function() {
-  const { activeTab, totalAmount } = this.state;
+  const { activeTab, totalAmount, paymentModalOpen } = this.state;
 
   return (
     <Layout>
@@ -54,6 +55,11 @@ export default function() {
           </div>
         </div>
       </Section>
+      <Payment
+        isModalOpen={paymentModalOpen}
+        onCloseModal={this.onClosePaymentModal}
+        total={totalAmount}
+      />
     </Layout>
   );
 }

src/pages/Dashboard/index.js

@@ -13,7 +13,8 @@ class Dashboard extends Component {
     this.state = {
       isMobile: checkWindowSize(),
       activeTab: 'numberPad',
-      totalAmount: 0
+      totalAmount: 0,
+      paymentModalOpen: false
     };
   }
 
@@ -25,11 +26,16 @@ class Dashboard extends Component {
   }
 
   handlePay = () => {
-    const { totalAmount } = this.state;
-    const { history } = this.props;
+    // const { totalAmount } = this.state;
+    // const { history } = this.props;
 
-    console.log('totalAmount', totalAmount);
-    history.push('/payment', { total: totalAmount });
+    // console.log('totalAmount', totalAmount);
+    // history.push('/payment', { total: totalAmount });
+    this.setState({ paymentModalOpen: true });
+  };
+
+  onClosePaymentModal = () => {
+    this.setState({ paymentModalOpen: false });
   };
 
   render() {

src/pages/Payment/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { withNamespaces } from 'react-i18next';
+import Modal from 'react-responsive-modal';
 
 import WatcherTx from '../../class/WatcherTx';
 import { checkWindowSize } from '../../utils/helpers';
@@ -24,8 +25,8 @@ class Payment extends React.Component {
   };
 
   async componentDidMount() {
-    const { location } = this.props;
-    const valueFiat = location.state.total;
+    const { total } = this.props;
+    const valueFiat = total;
 
     // on screen resize
     checkWindowSize(false, isMobile => {
@@ -122,10 +123,32 @@ class Payment extends React.Component {
     // status = 'detected';
 
     const { isMobile } = this.state;
-
-    return isMobile
-      ? MobileView.call(this, this.props, this.state, this.title, this.status)
-      : DesktopView.call(this, this.props, this.state, this.title, this.status);
+    const { isModalOpen, onCloseModal } = this.props;
+
+    return (
+      <Modal
+        open={isModalOpen}
+        onClose={onCloseModal}
+        center
+        styles={{ modal: { maxWidth: 'initial' } }}
+      >
+        {isMobile
+          ? MobileView.call(
+              this,
+              this.props,
+              this.state,
+              this.title,
+              this.status
+            )
+          : DesktopView.call(
+              this,
+              this.props,
+              this.state,
+              this.title,
+              this.status
+            )}
+      </Modal>
+    );
   }
 }
 

yarn.lock

@@ -1217,12 +1217,6 @@ apollo-client@^2.4.12:
     tslib "^1.9.3"
     zen-observable "^0.8.0"
 
-apollo-link-context@^1.0.12:
-  version "1.0.12"
-  resolved "https://registry.yarnpkg.com/apollo-link-context/-/apollo-link-context-1.0.12.tgz#02d72e621a3b75239d4419a9bfd38d8bd9bb0d3f"
-  dependencies:
-    apollo-link "^1.2.6"
-
 apollo-link-dedup@^1.0.0:
   version "1.0.13"
   resolved "https://registry.yarnpkg.com/apollo-link-dedup/-/apollo-link-dedup-1.0.13.tgz#bb22957e18b6125ae8bfb46cab6bda8d33ba8046"
@@ -1242,13 +1236,6 @@ apollo-link-http-common@^0.2.8:
   dependencies:
     apollo-link "^1.2.6"
 
-apollo-link-http@^1.5.9:
-  version "1.5.9"
-  resolved "https://registry.yarnpkg.com/apollo-link-http/-/apollo-link-http-1.5.9.tgz#9046f5640a94c8a8b508a39e0f2c628b781baecc"
-  dependencies:
-    apollo-link "^1.2.6"
-    apollo-link-http-common "^0.2.8"
-
 apollo-link-state@^0.4.2:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/apollo-link-state/-/apollo-link-state-0.4.2.tgz#ac00e9be9b0ca89eae0be6ba31fe904b80bbe2e8"
@@ -2715,7 +2702,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.5:
+classnames@^2.2.5, classnames@^2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
 
@@ -4779,6 +4766,19 @@ fn-name@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/fn-name/-/fn-name-2.0.1.tgz#5214d7537a4d06a4a301c0cc262feb84188002e7"
 
+focus-trap-react@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/focus-trap-react/-/focus-trap-react-4.0.1.tgz#3cffd39341df3b2f546a4a2fe94cfdea66154683"
+  dependencies:
+    focus-trap "^3.0.0"
+
+focus-trap@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-3.0.0.tgz#4d2ee044ae66bf7eb6ebc6c93bd7a1039481d7dc"
+  dependencies:
+    tabbable "^3.1.0"
+    xtend "^4.0.1"
+
 follow-redirects@^1.0.0, follow-redirects@^1.2.5:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.6.1.tgz#514973c44b5757368bad8bddfe52f81f015c94cb"
@@ -7578,6 +7578,10 @@ no-case@^2.2.0:
   dependencies:
     lower-case "^1.1.1"
 
+no-scroll@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/no-scroll/-/no-scroll-2.1.1.tgz#f37e08cb159b75a5bdbfc0a87cd9223e120e6e27"
+
 node-fetch@^1.0.1, node-fetch@~1.7.1:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
@@ -9225,13 +9229,31 @@ react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
 
+react-minimalist-portal@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/react-minimalist-portal/-/react-minimalist-portal-2.3.1.tgz#4853e3f48a74a32c1b8767601887cdf7941eeba3"
+  dependencies:
+    prop-types "^15.6.1"
+
 react-point@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/react-point/-/react-point-3.0.1.tgz#4f067261170420d13e0d6f6bec88e391ea6114ed"
   dependencies:
     invariant "^2.2.1"
     prop-types "^15.5.6"
 
+react-responsive-modal@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/react-responsive-modal/-/react-responsive-modal-3.6.0.tgz#fb983977f165742a6382ab28ba7442194ef37b39"
+  dependencies:
+    classnames "^2.2.6"
+    focus-trap-react "^4.0.1"
+    no-scroll "^2.1.1"
+    prop-types "^15.6.2"
+    react-lifecycles-compat "^3.0.4"
+    react-minimalist-portal "^2.3.1"
+    react-transition-group "^2.4.0"
+
 react-router-dom@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"
@@ -9328,7 +9350,7 @@ react-side-effect@^1.1.0:
     exenv "^1.2.1"
     shallowequal "^1.0.1"
 
-react-transition-group@^2.2.1:
+react-transition-group@^2.2.1, react-transition-group@^2.4.0:
   version "2.5.3"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.5.3.tgz#26de363cab19e5c88ae5dbae105c706cf953bb92"
   dependencies:
@@ -10636,6 +10658,10 @@ synchronous-promise@^2.0.5:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.6.tgz#de76e0ea2b3558c1e673942e47e714a930fa64aa"
 
+tabbable@^3.1.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-3.1.2.tgz#f2d16cccd01f400e38635c7181adfe0ad965a4a2"
+
 table@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/table/-/table-4.0.3.tgz#00b5e2b602f1794b9acaf9ca908a76386a7813bc"