Qr Invoice modal

7 years ago · 630bcca3fb
5 changed files with 303 additions and 2 deletions
--- a/react/src/components/dashboard/invoiceModal/invoiceModal.js
+++ b/react/src/components/dashboard/invoiceModal/invoiceModal.js
@ -0,0 +1,214 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { connect } from 'react-redux';
+import Store from '../../../store';
+import { translate } from '../../../translate/translate';
+import BodyEnd from '../bodyBottom/bodyBottom';
+import {
+  InvoiceModalRender,
+  InvoiceModalButtonRender,
+} from './invoiceModal.render';
+
+class InvoiceModal extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      modalIsOpen: false,
+      content: '',
+      amount: 0,
+      addressSelectorOpen: false,
+    };
+    this.openModal = this.openModal.bind(this);
+    this.closeModal = this.closeModal.bind(this);
+    this.updateInput = this.updateInput.bind(this);
+    this.renderAddressList = this.renderAddressList.bind(this);
+    this.openDropMenu = this.openDropMenu.bind(this);
+  }
+
+  openModal() {
+    this.setState({
+      modalIsOpen: true
+    });
+  }
+
+  updateInput(e) {
+    console.log(e.target.value);
+    this.setState({
+      [e.target.name]: e.target.value,
+      content: e.target.value,
+    });
+  }
+
+  closeModal() {
+    this.setState({
+      modalIsOpen: false,
+    });
+  }
+
+  openDropMenu() {
+    this.setState(Object.assign({}, this.state, {
+      addressSelectorOpen: !this.state.addressSelectorOpen,
+    }));
+  }
+
+  renderAddressByType(type) {
+    const _addresses = this.props.ActiveCoin.addresses;
+
+    if (_addresses &&
+        _addresses[type] &&
+        _addresses[type].length) {
+      if (this.state.sendApiType) {
+        const mainAddress = this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin];
+        const mainAddressAmount = this.renderAddressAmount(mainAddress);
+
+        return(
+          <li
+            key={ mainAddress }
+            className={ mainAddressAmount <= 0 ? 'hide' : '' }>
+            <a onClick={ () => this.updateAddressSelection(mainAddress, type, mainAddressAmount) }>
+              <i className={ 'icon fa-eye' + (type === 'public' ? '' : '-slash') }></i>&nbsp;&nbsp;
+              <span className="text">
+                [ { mainAddressAmount } { this.props.ActiveCoin.coin } ]&nbsp;&nbsp;
+                { mainAddress }
+              </span>
+              <span className="glyphicon glyphicon-ok check-mark"></span>
+            </a>
+          </li>
+        );
+      } else {
+        let items = [];
+        const _addresses = this.props.ActiveCoin.addresses;
+        const _cache = this.props.ActiveCoin.cache;
+        const _coin = this.props.ActiveCoin.coin;
+
+        for (let i = 0; i < _addresses[type].length; i++) {
+          const address = _addresses[type][i].address;
+          let _amount = address.amount;
+
+          if (this.props.ActiveCoin.mode === 'basilisk' &&
+              _cache) {
+            _amount = _cache[_coin][address] && _cache[_coin][address].getbalance.data && _cache[_coin][address].getbalance.data.balance ? _cache[_coin][address].getbalance.data.balance : 'N/A';
+          }
+
+          if (_amount !== 'N/A') {
+            items.push(
+              <li
+                key={ address }
+                className={ _amount <= 0 ? 'hide' : '' }>
+                <a onClick={ () => this.updateAddressSelection(address, type, _amount) }>
+                  <i className={ 'icon fa-eye' + (type === 'public' ? '' : '-slash') }></i>&nbsp;&nbsp;
+                  <span className="text">[ { _amount } { _coin } ]  { address }</span>
+                  <span className="glyphicon glyphicon-ok check-mark"></span>
+                </a>
+              </li>
+            );
+          }
+        }
+
+        return items;
+      }
+    } else {
+      return null;
+    }
+  }
+
+  renderSelectorCurrentLabel() {
+    if (this.state.sendFrom) {
+      let _amount;
+      const _cache = this.props.ActiveCoin.cache;
+      const _coin = this.props.ActiveCoin.coin;
+      const _sendFrom = this.state.sendFrom;
+
+      if (this.state.sendFromAmount === 0 &&
+          this.props.ActiveCoin.mode === 'basilisk' &&
+          _cache) {
+        _amount = _cache[_coin][_sendFrom].getbalance.data && _cache[_coin][_sendFrom].getbalance.data.balance ? _cache[_coin][_sendFrom].getbalance.data.balance : 'N/A';
+      } else {
+        _amount = this.state.sendFromAmount;
+      }
+
+      return (
+        <span>
+          <i className={ 'icon fa-eye' + (this.state.addressType === 'public' ? '' : '-slash') }></i>&nbsp;&nbsp;
+          <span className="text">[ { _amount } { _coin } ]  { _sendFrom }</span>
+        </span>
+      );
+    } else if (this.state.sendApiType) {
+      const mainAddress = this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin];
+      const mainAddressAmount = this.renderAddressAmount(mainAddress);
+
+      return (
+        <span>
+          <i className={ 'icon fa-eye' + (this.state.addressType === 'public' ? '' : '-slash') }></i>&nbsp;&nbsp;
+          <span className="text">[ { mainAddressAmount } { this.props.ActiveCoin.coin } ]  { mainAddress }</span>
+        </span>
+      );
+    } else {
+      return (
+        <span>{ translate('SEND.SELECT_T_OR_Z_ADDR') }</span>
+      );
+    }
+  }
+
+  renderAddressList() {
+    return (
+      <div className={ `btn-group bootstrap-select form-control form-material showkmdwalletaddrs show-tick ${(this.state.addressSelectorOpen ? 'open' : '')}` }>
+        <button
+          type="button"
+          className="btn dropdown-toggle btn-info"
+          title={ `${translate('SEND.SELECT_T_OR_Z_ADDR')}` }
+          onClick={ this.openDropMenu }>
+          <span className="filter-option pull-left">
+            { this.renderSelectorCurrentLabel() }&nbsp;&nbsp;
+          </span>
+          <span className="bs-caret">
+            <span className="caret"></span>
+          </span>
+        </button>
+        <div className="dropdown-menu open">
+          <ul className="dropdown-menu inner">
+            <li className="selected">
+              <a>
+                <span className="text">{ translate('SEND.SELECT_T_OR_Z_ADDR') }</span>
+                <span className="glyphicon glyphicon-ok check-mark"></span>
+              </a>
+            </li>
+            { this.renderAddressByType('public') }
+          </ul>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    if (this.state.modalIsOpen) {
+      return <BodyEnd>{ InvoiceModalRender.call(this) }</BodyEnd>
+    } else {
+      return InvoiceModalButtonRender.call(this);
+    }
+    
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    ActiveCoin: {
+      coin: state.ActiveCoin.coin,
+      mode: state.ActiveCoin.mode,
+      send: state.ActiveCoin.send,
+      receive: state.ActiveCoin.receive,
+      balance: state.ActiveCoin.balance,
+      cache: state.ActiveCoin.cache,
+      activeAddress: state.ActiveCoin.activeAddress,
+      lastSendToResponse: state.ActiveCoin.lastSendToResponse,
+      addresses: state.ActiveCoin.addresses,
+    },
+    Dashboard: {
+      activeHandle: state.Dashboard.activeHandle,
+    }
+
+  };
+ 
+};
+
+export default connect(mapStateToProps)(InvoiceModal);
--- a/react/src/components/dashboard/invoiceModal/invoiceModal.render.js
+++ b/react/src/components/dashboard/invoiceModal/invoiceModal.render.js
@ -0,0 +1,77 @@
+import React from 'react';
+import { translate } from '../../../translate/translate';
+import QRCode from 'qrcode.react';
+
+export const InvoiceModalRender = function () {
+  return (
+    <span>
+      <div
+        className={ 'modal modal-3d-sign ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }
+        id="QRModal">
+        <div className="modal-dialog modal-center modal-lg">
+          <div className="modal-content">
+            <div className="modal-header bg-orange-a400 wallet-send-header">
+              <button
+                type="button"
+                className="close white"
+                onClick={ this.closeModal }>
+                <span>×</span>
+              </button>
+              <h4 className="modal-title white text-left">{ translate('INDEX.SCAN_QR_CODE') }</h4>
+            </div>
+            <div className="modal-body">
+              <div className="animsition vertical-align fade-in">
+                <div className="page-content">
+                  <div className="row">
+                    <div className="col-lg-8 form-group form-material vertical-align-middle">
+                      <label
+                      className="control-label"
+                      htmlFor="edexcoinSendFrom">
+                        { translate('INDEX.RECEIVE') }
+                      </label>
+                      { this.renderAddressList() }
+                      <label
+                      className="control-label margin-top-20"
+                      htmlFor="edexcoinAmount">
+                        { this.props.ActiveCoin.coin }
+                      </label>
+                      <input
+                      type="number"
+                      min="0"
+                      className="form-control"
+                      id="edexcoinAmount"
+                      name="amount"
+                      placeholder="0.001"
+                      autoComplete="off"
+                      value={ this.state.amount }
+                      onChange={ this.updateInput } />
+                    </div>
+                    <div className="col-lg-4">
+                      <QRCode
+                        value={ this.state.content }
+                        size={ 198 } />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className={ 'modal-backdrop ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }></div>
+    </span>
+  );
+};
+
+export const InvoiceModalButtonRender = function () {
+  return (
+    <span>
+      <button type="button" 
+        className="btn btn-success waves-effect waves-light margin-right-10"
+        onClick={ this.openModal }>
+          <i className="icon fa-file-text-o"></i>
+          { translate('INDEX.CREATE_INVOICE') }
+      </button>
+    </span>
+  );
+};
--- a/react/src/components/dashboard/receiveCoin/receiveCoin.js
+++ b/react/src/components/dashboard/receiveCoin/receiveCoin.js
@ -99,11 +99,17 @@ class ReceiveCoin extends React.Component {
  }

  renderAddressActions(address, type) {
+    let qrContent = {
+      qrAddress: address, 
+      qrAmount: address.amount, 
+      qrCoin: this.props.coin,
+    };
+    console.log(qrContent);
    if (this.isBasiliskMode()) {
      return AddressActionsBasiliskModeRender.call(this, address);
    }

-    return AddressActionsNonBasiliskModeRender.call(this, address, type);
+    return AddressActionsNonBasiliskModeRender.call(this, address, type, qrContent);
  }

  hasNoAmount(address) {
--- a/react/src/components/dashboard/receiveCoin/receiveCoin.render.js
+++ b/react/src/components/dashboard/receiveCoin/receiveCoin.render.js
@ -1,6 +1,7 @@
 import React from 'react';
 import { translate } from '../../../translate/translate';
 import QRModal from '../qrModal/qrModal';
+import InvoiceModal from '../invoiceModal/invoiceModal';

 export const AddressActionsBasiliskModeRender = function(address) {
  return (
@ -31,7 +32,7 @@ export const AddressActionsBasiliskModeRender = function(address) {
  );
 };

-export const AddressActionsNonBasiliskModeRender = function(address, type) {
+export const AddressActionsNonBasiliskModeRender = function(address, type,qrContent) {
  return (
    <td>
      <span className={ 'label label-' + (type === 'public' ? 'default' : 'dark') }>
@ -69,6 +70,7 @@ export const _ReceiveCoinTableRender = function() {
          <label className="switch">
            <input
              type="checkbox"
+              value="on"
              checked={ this.state.hideZeroAddresses } />
            <div
              className="slider"
@ -139,6 +141,7 @@ export const ReceiveCoinRender = function() {
                  <header className="panel-heading">
                    { this.isNativeMode() &&
                      <div className="panel-actions">
+                        <InvoiceModal />
                        <div
                          className={ 'dropdown' + (this.state.openDropMenu ? ' open' : '') }
                          onClick={ this.openDropMenu }>
--- a/react/src/translate/en.js
+++ b/react/src/translate/en.js
@ -307,6 +307,7 @@ export const _lang = {
      'TOGGLE_ZERO_ADDRESSES': 'Toggle empty addresses',
      'NEXT_PAGE': 'Next Page',
      'PREVIOUS_PAGE': 'Previous Page',
+      'CREATE_INVOICE': 'Create Invoice',
    },
    'ATOMIC': {
      'RAW_OUTPUT': 'Raw Output',