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
110
111
112
113
114
|
import * as React from 'react';
import { formatDate, hasExpired } from '../../shared/account-expiry';
import { messages } from '../../shared/gettext';
import {
AccountContainer,
AccountFooter,
AccountOutOfTime,
AccountRow,
AccountRowLabel,
AccountRowValue,
StyledBuyCreditButton,
StyledContainer,
StyledRedeemVoucherButton,
} from './AccountStyles';
import AccountTokenLabel from './AccountTokenLabel';
import * as AppButton from './AppButton';
import { Layout } from './Layout';
import { ModalContainer } from './Modal';
import { BackBarItem, NavigationBar, NavigationItems } 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: () => Promise<void>;
}
export default class Account extends React.Component<IProps> {
public render() {
return (
<ModalContainer>
<Layout>
<StyledContainer>
<NavigationBar>
<NavigationItems>
<BackBarItem action={this.props.onClose}>
{
// TRANSLATORS: Back button in navigation bar
messages.pgettext('navigation-bar', 'Settings')
}
</BackBarItem>
</NavigationItems>
</NavigationBar>
<AccountContainer>
<SettingsHeader>
<HeaderTitle>{messages.pgettext('account-view', 'Account')}</HeaderTitle>
</SettingsHeader>
<AccountRow>
<AccountRowLabel>
{messages.pgettext('account-view', 'Account number')}
</AccountRowLabel>
<AccountRowValue
as={AccountTokenLabel}
accountToken={this.props.accountToken || ''}
/>
</AccountRow>
<AccountRow>
<AccountRowLabel>{messages.pgettext('account-view', 'Paid until')}</AccountRowLabel>
<FormattedAccountExpiry
expiry={this.props.accountExpiry}
locale={this.props.expiryLocale}
/>
</AccountRow>
<AccountFooter>
<AppButton.BlockingButton
disabled={this.props.isOffline}
onClick={this.props.onBuyMore}>
<StyledBuyCreditButton>
<AppButton.Label>{messages.gettext('Buy more credit')}</AppButton.Label>
<AppButton.Icon source="icon-extLink" height={16} width={16} />
</StyledBuyCreditButton>
</AppButton.BlockingButton>
<StyledRedeemVoucherButton />
<AppButton.RedButton onClick={this.props.onLogout}>
{messages.pgettext('account-view', 'Log out')}
</AppButton.RedButton>
</AccountFooter>
</AccountContainer>
</StyledContainer>
</Layout>
</ModalContainer>
);
}
}
function FormattedAccountExpiry(props: { expiry?: string; locale: string }) {
if (props.expiry) {
if (hasExpired(props.expiry)) {
return (
<AccountOutOfTime>{messages.pgettext('account-view', 'OUT OF TIME')}</AccountOutOfTime>
);
} else {
return <AccountRowValue>{formatDate(props.expiry, props.locale)}</AccountRowValue>;
}
} else {
return (
<AccountRowValue>
{messages.pgettext('account-view', 'Currently unavailable')}
</AccountRowValue>
);
}
}
|
