blob: 06947be7f2e4099f9bdd7e40494c42aa05c45b94 (
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
|
// @flow
import moment from 'moment';
import React, { Component } 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';
import type { AccountReduxState } from '../redux/account/reducers';
export type AccountProps = {
account: AccountReduxState;
onLogout: () => void;
onClose: () => void;
onExternalLink: (type: string) => void;
};
export default class Account extends Component {
props: AccountProps;
onBuyMore = () => this.props.onExternalLink('purchase');
onClose = () => this.props.onClose();
onLogout = () => this.props.onLogout();
render(): React.Element<*> {
const paidUntil = moment(this.props.account.paidUntil);
const formattedAccountId = formatAccount(this.props.account.accountNumber || '');
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 }>
<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.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>
</div>
</div>
</div>
</div>
</div>
</Container>
</Layout>
);
}
}
|
