New tab, routing and navigation (dexlab-io#78)

Created a new tab in desktop mode called "Tip", where the Tip
component will be displayed in a modal, just like the Payment
modal. Also, created routing so that it is possible to navigate to
/address/:id/tip and make this modal open, both from desktop and from
mobile. Finally, added a "lastTab" state entry so the dapp knows which
tab to open once it is closed by a user. Created a dummy QR code
inside the Tip modal.

src/components/Header.js

@@ -130,6 +130,13 @@ const Header = props => {
                     >
                       Recent Transactions
                     </MenuItem>
+                    <MenuItem
+                      className={`navbar-item ${activeNavItem ===
+                        'tip' && 'is-active'}`}
+                      onClick={() => onNavItemClick('tip')}
+                    >
+                      Tip
+                    </MenuItem>
                   </div>
                 </div>
               </Nav>

src/pages/Dashboard/components/Tip.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import Modal from 'react-responsive-modal';
+import QrCode from '../../Payment/components/QrCode';
+
+class Tip extends Component {
+  render() {
+    return (
+      <Modal open={true} onClose={this.props.onClose}>
+        <QrCode valueCrypto="0" />
+      </Modal>
+    );
+  };
+};
+
+export default Tip;

src/pages/Dashboard/desktop.view.js

@@ -6,6 +6,7 @@ import GenerateBillBtn from './components/GenerateBillBtn';
 import Keypad from './components/Keypad';
 import RecentPayments from './components/RecentPayments';
 import ProductItems from './components/ProductItems';
+import Tip from './components/Tip';
 
 const Section = styled.div`
   grid-area: content;
@@ -61,6 +62,9 @@ export default function() {
                   }
                 />
               )}
+              {activeTab === 'tip' && (
+                <Tip onClose={this.onCloseTip} />
+              )}
             </RightSide>
             <LeftSide>
               <NumberWrapper>

src/pages/Dashboard/index.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { withRouter } from 'react-router-dom';
+import { withRouter, matchPath } from 'react-router-dom';
 
 import { checkWindowSize } from '../../utils/helpers';
 import { store } from '../../store';
@@ -15,14 +15,25 @@ class Dashboard extends Component {
 
     this.state = {
       isMobile: checkWindowSize(),
-      activeTab: 'numberPad',
+      activeTab: this.getActiveTab(),
+      lastTab: 'numberPad',
       totalAmount: '0',
       paymentModalOpen: false,
       setupModalOpen: false,
       pos: { address: null }
     };
   }
 
+  getActiveTab() {
+    const match = matchPath(window.location.pathname, {
+      path: '/address/:id/:activeTab'
+    });
+    if(match && match.params.activeTab === 'tip') {
+      return 'tip';
+    }
+    else return 'numberPad';
+  }
+
   componentDidMount() {
     // on screen resize
     checkWindowSize(false, isMobile => {
@@ -62,7 +73,11 @@ class Dashboard extends Component {
     ) {
       this.setState({ totalAmount: '0' });
     }
-    this.setState({ activeTab });
+    this.setState({ activeTab, lastTab: currentTab });
+  };
+
+  onCloseTip = () => {
+    this.handleNavItemChange(this.state.lastTab);
   };
 
   render() {

src/pages/Dashboard/mobile.view.js

@@ -6,6 +6,7 @@ import GenerateBillBtn from './components/GenerateBillBtn';
 import NumberInput from './components/Keypad/NumberInput';
 import Keypad from './components/Keypad';
 import RecentPayments from './components/RecentPayments';
+import Tip from './components/Tip';
 
 const Section = styled.div`
   padding: 0.5rem 1.5rem;
@@ -35,6 +36,7 @@ export default function() {
               </React.Fragment>
             )}
             {activeTab === 'recentPayments' && <RecentPayments />}
+            {activeTab === 'tip' && <Tip onClose={this.onCloseTip} />}
           </div>
         ) : (
           <div>Pos address is empty</div>