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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
import * as React from 'react';
import { Component, Text, View } from 'reactxp';
import { messages } from '../../shared/gettext';
import AccountExpiry from '../lib/account-expiry';
import styles from './AccountStyles';
import * as AppButton from './AppButton';
import ClipboardLabel from './ClipboardLabel';
import { Container, Layout } from './Layout';
import { BackBarItem, NavigationBar } from './NavigationBar';
import SettingsHeader, { HeaderTitle } from './SettingsHeader';
import { AccountToken } from '../../shared/daemon-rpc-types';
interface IProps {
accountToken?: AccountToken;
accountExpiry?: string;
expiryLocale: string;
isOffline: boolean;
onLogout: () => void;
onClose: () => void;
onBuyMore: () => void;
}
export default class Account extends Component<IProps> {
public render() {
return (
<Layout>
<Container>
<View style={styles.account}>
<NavigationBar>
<BackBarItem action={this.props.onClose}>
{// TRANSLATORS: Back button in navigation bar
messages.pgettext('account-nav', 'Settings')}
</BackBarItem>
</NavigationBar>
<View style={styles.account__container}>
<SettingsHeader>
<HeaderTitle>{messages.pgettext('account-view', 'Account')}</HeaderTitle>
</SettingsHeader>
<View style={styles.account__content}>
<View style={styles.account__main}>
<View style={styles.account__row}>
<Text style={styles.account__row_label}>
{messages.pgettext('account-view', 'Account ID')}
</Text>
<ClipboardLabel
style={styles.account__row_value}
value={this.props.accountToken || ''}
message={messages.pgettext('account-view', 'COPIED TO CLIPBOARD!')}
/>
</View>
<View style={styles.account__row}>
<Text style={styles.account__row_label}>
{messages.pgettext('account-view', 'Paid until')}
</Text>
<FormattedAccountExpiry
expiry={this.props.accountExpiry}
locale={this.props.expiryLocale}
/>
</View>
<View style={styles.account__footer}>
<AppButton.GreenButton
style={styles.account__buy_button}
disabled={this.props.isOffline}
onPress={this.props.onBuyMore}>
<AppButton.Label>
{messages.pgettext('account-view', 'Buy more credit')}
</AppButton.Label>
<AppButton.Icon source="icon-extLink" height={16} width={16} />
</AppButton.GreenButton>
<AppButton.RedButton onPress={this.props.onLogout}>
{messages.pgettext('account-view', 'Log out')}
</AppButton.RedButton>
</View>
</View>
</View>
</View>
</View>
</Container>
</Layout>
);
}
}
function FormattedAccountExpiry(props: { expiry?: string; locale: string }) {
if (props.expiry) {
const expiry = new AccountExpiry(props.expiry, props.locale);
if (expiry.hasExpired()) {
return (
<Text style={styles.account__out_of_time}>
{messages.pgettext('account-view', 'OUT OF TIME')}
</Text>
);
} else {
return <Text style={styles.account__row_value}>{expiry.formattedDate()}</Text>;
}
} else {
return (
<Text style={styles.account__row_value}>
{messages.pgettext('account-view', 'Currently unavailable')}
</Text>
);
}
}
|
