Payments.jsx

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './Payments.sass';

import { Button, Dialog, FontIcon, Link } from 'react-toolbox';

import CurrencyInput from 'react-currency-input';
const MAX_PROFIT = 1000;

class HostSignupPayments extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      profit: this.props.charger.profit,
      activeDialog: false
    };
  }

  handleProfitChange(value) {
    // Convert $1.00 to an integer representing profit in cents
    const profit = (parseInt(parseFloat(value.slice(1)) * 100) || 0);
    if (profit < MAX_PROFIT) {
      this.setState({ profit: profit });
    } else {
      this.setState({ profit: this.state.profit });
    }
  }

  handleDialogToggle() {
    this.setState({ activeDialog: !this.state.activeDialog });
  }

  handleSubmit(e) {
    e.preventDefault();
    const data = {
      id: this.props.charger.id,
      profit: this.state.profit
    };

    this.props.onSubmit(data, this.props.charger.address);
  }


  renderControls() {
    if (this.props.updateControls) {
      return (
        <div className="align--center space--both-2">
          <Button
            onClick={this.handleSubmit.bind(this)}
            label="Save"
            accent
            raised
          />
          <div className="align-items-vertically-center">
            <Link onClick={ this.props.onPrevious }><FontIcon value="keyboard_arrow_left" /> Previous</Link>
          </div>
        </div>
      );
    } else {
      return(
        <div styleName="nav-buttons">
          <Button onClick={this.props.onPrevious} label="Back" accent raised />
          <Button onClick={this.handleSubmit.bind(this)} label="Finish" accent raised />
        </div>
      );
    }
  }

  render() {
    let actions = [
      { label: 'OK', onClick: this.handleDialogToggle.bind(this) }
    ];


    return (
      <div>
        <form>
          <div styleName="profit">
            <div>Profit / hr:</div>
            <CurrencyInput prefix="$" value={this.state.profit} onChange={this.handleProfitChange.bind(this)}/>
          </div>

          <div styleName="information">
            <div className="align--center">Pricing Guidelines:</div>
            <div styleName="pricing-info">
              <small>
                <div>$ = 0.00-0.50</div>
                <div>$$ = 0.51-1.50/hr</div>
                <div>$$$ = 1.51+</div>
              </small>
            </div>
            <p>
              <small>
                <em>This markup is in <u>addition</u> to your estimated electricity costs</em>
              </small>
            </p>

            <div styleName="dialogToggle" onClick={this.handleDialogToggle.bind(this)}>
              <Button raised label="Smart Pricing Information" />
            </div>
            <Dialog
              actions={actions}
              active={this.state.activeDialog}
              onEscKeyDown={this.handleDialogToggle.bind(this)}
              onOverlayClick={this.handleDialogToggle.bind(this)}
            >
              <h2>Smart Pricing Information</h2>
              <p>
                Although we do NOT directly meter electricity, we calculate the
                estimated cost of each transaction based on our Smart Pricing
                proprietary algorithm. It takes into account your unique
                electricity rates and the actual electricity consumption of any
                vehicle during a reservation period. You will always be
                reimbursed for 100% of your estimated electricity cost, plus
                the hourly profit you choose. This way you don't have to think
                about how much to charge throughout the day and how much to
                charge for different types of vehicles.
              </p>
            </Dialog>

            <p>
              <strong>Payout Method</strong>
              <div>
                <em>
                  For LA pilot, team will send weekly checks to Host&#39;s listed
                  address. For questions or concerns contact us at
                  <a href='mailto:founders@evmatch.com.'>founders@evmatch.com</a>
                </em>
              </div>
            </p>
          </div>
        </form>

        { this.renderControls() }
      </div>
    );
  }
}
export default CSSModules(HostSignupPayments, styles);