Created
February 24, 2017 20:46
-
-
Save adkron/c037c221fc46110f3b4417792cdeed03 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment