blob: b4eef86712ba47460bce717d2d95265ccf3573d6 (
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
|
// @flow
import moment from 'moment';
import React from 'react';
import { Component, Text, View } from 'reactxp';
import { Button, RedButton, GreenButton, Label } from './styled';
import { Layout, Container } from './Layout';
import styles from './AccountStyles';
import Img from './Img';
import { formatAccount } from '../lib/formatters';
import type { AccountReduxState } from '../redux/account/reducers';
export type AccountProps = {
account: AccountReduxState,
onLogout: () => void,
onClose: () => void,
onBuyMore: () => void,
};
export default class Account extends Component {
props: AccountProps;
render() {
const expiry = moment(this.props.account.expiry);
const formattedAccountToken = formatAccount(this.props.account.accountToken || '');
const formattedExpiry = expiry.format('hA, D MMMM YYYY').toUpperCase();
const isOutOfTime = expiry.isSameOrBefore(moment());
return (
<Layout>
<Container>
<View style={styles.account}>
<Button
style={styles.account__close}
onPress={this.props.onClose}
testName="account__close">
<Img height={24} width={24} style={styles.account__close_icon} source="icon-back" />
<Text style={styles.account__close_title}>Settings</Text>
</Button>
<View style={styles.account__container}>
<View style={styles.account__header}>
<Text style={styles.account__title}>Account</Text>
</View>
<View style={styles.account__content}>
<View style={styles.account__main}>
<View style={styles.account__row}>
<Text style={styles.account__row_label}>Account ID</Text>
<Text style={styles.account__row_value}>{formattedAccountToken}</Text>
</View>
<View style={styles.account__row}>
<Text style={styles.account__row_label}>Paid until</Text>
{isOutOfTime ? (
<Text style={styles.account__out_of_time} testName="account__out_of_time">
OUT OF TIME
</Text>
) : (
<Text style={styles.account__row_value}>{formattedExpiry}</Text>
)}
</View>
<View style={styles.account__footer}>
<GreenButton
onPress={this.props.onBuyMore}
text="Buy more credit"
icon="icon-extLink"
testName="account__buymore">
<Label>Buy more credit</Label>
<Img source="icon-extLink" height={16} width={16} />
</GreenButton>
<RedButton onPress={this.props.onLogout} testName="account__logout">
Log out
</RedButton>
</View>
</View>
</View>
</View>
</View>
</Container>
</Layout>
);
}
}
|
