blob: 7f4747ec4b5b7a408bec068ed13ced1ac52adf40 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
import moment from 'moment';
import React, { Component, PropTypes } from 'react';
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
}
onClose() {
this.props.onClose();
}
onExternalLink(type) {
this.props.onExternalLink(type);
}
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());
return (
<Layout>
<Header hidden={ true } style={ Header.Style.defaultDark } />
<Container>
<div className="account">
<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>
<div className="account__container">
<div className="account__header">
<h2 className="account__title">Account</h2>
</div>
<div className="account__content">
<div className="account__main">
<div className="account__row">
<div className="account__row-label">Account ID</div>
<div className="account__row-value">{ formattedAccountId }</div>
</div>
<div className="account__row">
<div className="account__row-label">Paid until</div>
<If condition={ isOutOfTime }>
<Then>
<div className="account__row-value account__row-value--error">OUT OF TIME</div>
</Then>
<Else>
<div className="account__row-value">{ formattedPaidUntil }</div>
</Else>
</If>
</div>
<div className="account__footer">
<button className="button button--positive" onClick={ this.onExternalLink.bind(this, 'purchase') }>
<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>
</div>
</div>
</div>
</div>
</div>
</Container>
</Layout>
);
}
}
|
