blob: 4ec57aaf1ed63d59d69032587396e7058f62dd4e (
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
86
|
// @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>
);
}
}
|
