diff options
| -rw-r--r-- | app/components/Account.js | 47 |
1 files changed, 22 insertions, 25 deletions
diff --git a/app/components/Account.js b/app/components/Account.js index 7aaec4f2e6..e817baa280 100644 --- a/app/components/Account.js +++ b/app/components/Account.js @@ -1,43 +1,40 @@ +// @flow import moment from 'moment'; import React, { Component } from 'react'; -import PropTypes from 'prop-types'; import { If, Then, Else } from 'react-if'; import { Layout, Container, Header } from './Layout'; import { formatAccount } from '../lib/formatters'; import ExternalLinkSVG from '../assets/images/icon-extLink.svg'; -export default class Account extends Component { - - static propTypes = { - onLogout: PropTypes.func.isRequired, - onClose: PropTypes.func.isRequired, - onExternalLink: PropTypes.func.isRequired - } +import type { UserReduxState } from '../reducers/user'; - onClose() { - this.props.onClose(); - } +export type AccountProps = { + user: UserReduxState; + onLogout: () => void; + onClose: () => void; + onExternalLink: (type: string) => void; +}; - onExternalLink(type) { - this.props.onExternalLink(type); - } +export default class Account extends Component { + props: AccountProps; - onLogout() { - this.props.onLogout(); - } + onBuyMore = () => this.props.onExternalLink('purchase'); + onClose = () => this.props.onClose(); + onLogout = () => this.props.onLogout(); - render() { - let paidUntil = moment(this.props.user.paidUntil); - let formattedAccountId = formatAccount(this.props.user.account); - let formattedPaidUntil = paidUntil.format('hA, D MMMM YYYY').toUpperCase(); - let isOutOfTime = paidUntil.isSameOrBefore(moment()); + render(): React.Element<*> { + const user = this.props.user; + const paidUntil = moment(user.paidUntil); + const formattedAccountId = formatAccount(user.account || ''); + const formattedPaidUntil = paidUntil.format('hA, D MMMM YYYY').toUpperCase(); + const isOutOfTime = paidUntil.isSameOrBefore(moment()); return ( <Layout> <Header hidden={ true } style={ 'defaultDark' } /> <Container> <div className="account"> - <div className="account__close" onClick={ ::this.onClose }> + <div className="account__close" onClick={ this.onClose }> <img className="account__close-icon" src="./assets/images/icon-back.svg" /> <span className="account__close-title">Settings</span> </div> @@ -68,11 +65,11 @@ export default class Account extends Component { </div> <div className="account__footer"> - <button className="button button--positive" onClick={ this.onExternalLink.bind(this, 'purchase') }> + <button className="button button--positive" onClick={ this.onBuyMore }> <span className="button-label">Buy more time</span> <ExternalLinkSVG className="button-icon button-icon--16" /> </button> - <button className="button button--negative" onClick={ ::this.onLogout }>Logout</button> + <button className="button button--negative" onClick={ this.onLogout }>Logout</button> </div> </div> |