diff options
Diffstat (limited to 'src/components/settings/account')
-rw-r--r-- | src/components/settings/account/AccountDashboard.js | 286 |
1 files changed, 286 insertions, 0 deletions
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js new file mode 100644 index 000000000..75dbdef49 --- /dev/null +++ b/src/components/settings/account/AccountDashboard.js | |||
@@ -0,0 +1,286 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | ||
4 | import { defineMessages, intlShape, FormattedMessage } from 'react-intl'; | ||
5 | import ReactTooltip from 'react-tooltip'; | ||
6 | import moment from 'moment'; | ||
7 | |||
8 | import Loader from '../../ui/Loader'; | ||
9 | import Button from '../../ui/Button'; | ||
10 | import Infobox from '../../ui/Infobox'; | ||
11 | import Link from '../../ui/Link'; | ||
12 | import SubscriptionForm from '../../../containers/ui/SubscriptionFormScreen'; | ||
13 | |||
14 | const messages = defineMessages({ | ||
15 | headline: { | ||
16 | id: 'settings.account.headline', | ||
17 | defaultMessage: '!!!Account', | ||
18 | }, | ||
19 | headlineSubscription: { | ||
20 | id: 'settings.account.headlineSubscription', | ||
21 | defaultMessage: '!!!Your Subscription', | ||
22 | }, | ||
23 | headlineUpgrade: { | ||
24 | id: 'settings.account.headlineUpgrade', | ||
25 | defaultMessage: '!!!Upgrade your Account', | ||
26 | }, | ||
27 | headlineInvoices: { | ||
28 | id: 'settings.account.headlineInvoices', | ||
29 | defaultMessage: '!!Invoices', | ||
30 | }, | ||
31 | manageSubscriptionButtonLabel: { | ||
32 | id: 'settings.account.manageSubscription.label', | ||
33 | defaultMessage: '!!!Manage your subscription', | ||
34 | }, | ||
35 | accountTypeBasic: { | ||
36 | id: 'settings.account.accountType.basic', | ||
37 | defaultMessage: '!!!Basic Account', | ||
38 | }, | ||
39 | accountTypePremium: { | ||
40 | id: 'settings.account.accountType.premium', | ||
41 | defaultMessage: '!!!Premium Supporter Account', | ||
42 | }, | ||
43 | accountEditButton: { | ||
44 | id: 'settings.account.account.editButton', | ||
45 | defaultMessage: '!!!Edit Account', | ||
46 | }, | ||
47 | invoiceDownload: { | ||
48 | id: 'settings.account.invoiceDownload', | ||
49 | defaultMessage: '!!!Download', | ||
50 | }, | ||
51 | userInfoRequestFailed: { | ||
52 | id: 'settings.account.userInfoRequestFailed', | ||
53 | defaultMessage: '!!!Could not load user information', | ||
54 | }, | ||
55 | tryReloadUserInfoRequest: { | ||
56 | id: 'settings.account.tryReloadUserInfoRequest', | ||
57 | defaultMessage: '!!!Try again', | ||
58 | }, | ||
59 | miningActive: { | ||
60 | id: 'settings.account.mining.active', | ||
61 | defaultMessage: '!!!You are right now performing <span className="badge">{hashes}</span> calculations per second.', | ||
62 | }, | ||
63 | miningThankYou: { | ||
64 | id: 'settings.account.mining.thankyou', | ||
65 | defaultMessage: '!!!Thank you for supporting Franz with your processing power.', | ||
66 | }, | ||
67 | miningMoreInfo: { | ||
68 | id: 'settings.account.mining.moreInformation', | ||
69 | defaultMessage: '!!!Get more information', | ||
70 | }, | ||
71 | cancelMining: { | ||
72 | id: 'settings.account.mining.cancel', | ||
73 | defaultMessage: '!!!Cancel mining', | ||
74 | }, | ||
75 | }); | ||
76 | |||
77 | @observer | ||
78 | export default class AccountDashboard extends Component { | ||
79 | static propTypes = { | ||
80 | user: MobxPropTypes.observableObject.isRequired, | ||
81 | orders: MobxPropTypes.arrayOrObservableArray.isRequired, | ||
82 | hashrate: PropTypes.number.isRequired, | ||
83 | isLoading: PropTypes.bool.isRequired, | ||
84 | isLoadingOrdersInfo: PropTypes.bool.isRequired, | ||
85 | isLoadingPlans: PropTypes.bool.isRequired, | ||
86 | isCreatingPaymentDashboardUrl: PropTypes.bool.isRequired, | ||
87 | userInfoRequestFailed: PropTypes.bool.isRequired, | ||
88 | retryUserInfoRequest: PropTypes.func.isRequired, | ||
89 | openDashboard: PropTypes.func.isRequired, | ||
90 | openExternalUrl: PropTypes.func.isRequired, | ||
91 | onCloseSubscriptionWindow: PropTypes.func.isRequired, | ||
92 | stopMiner: PropTypes.func.isRequired, | ||
93 | }; | ||
94 | |||
95 | static contextTypes = { | ||
96 | intl: intlShape, | ||
97 | }; | ||
98 | |||
99 | render() { | ||
100 | const { | ||
101 | user, | ||
102 | orders, | ||
103 | hashrate, | ||
104 | isLoading, | ||
105 | isCreatingPaymentDashboardUrl, | ||
106 | openDashboard, | ||
107 | openExternalUrl, | ||
108 | isLoadingOrdersInfo, | ||
109 | isLoadingPlans, | ||
110 | userInfoRequestFailed, | ||
111 | retryUserInfoRequest, | ||
112 | onCloseSubscriptionWindow, | ||
113 | stopMiner, | ||
114 | } = this.props; | ||
115 | const { intl } = this.context; | ||
116 | |||
117 | return ( | ||
118 | <div className="settings__main"> | ||
119 | <div className="settings__header"> | ||
120 | <span className="settings__header-item"> | ||
121 | {intl.formatMessage(messages.headline)} | ||
122 | </span> | ||
123 | </div> | ||
124 | <div className="settings__body"> | ||
125 | {isLoading && ( | ||
126 | <Loader /> | ||
127 | )} | ||
128 | |||
129 | {!isLoading && userInfoRequestFailed && ( | ||
130 | <div> | ||
131 | <Infobox | ||
132 | icon="alert" | ||
133 | type="danger" | ||
134 | ctaLabel={intl.formatMessage(messages.tryReloadUserInfoRequest)} | ||
135 | ctaLoading={isLoading} | ||
136 | ctaOnClick={retryUserInfoRequest} | ||
137 | > | ||
138 | {intl.formatMessage(messages.userInfoRequestFailed)} | ||
139 | </Infobox> | ||
140 | </div> | ||
141 | )} | ||
142 | |||
143 | {!userInfoRequestFailed && ( | ||
144 | <div> | ||
145 | {!isLoading && ( | ||
146 | <div className="account"> | ||
147 | <div className="account__box account__box--flex"> | ||
148 | <div className="account__avatar"> | ||
149 | <img | ||
150 | src="./assets/images/logo.svg" | ||
151 | alt="" | ||
152 | /> | ||
153 | {user.isPremium && ( | ||
154 | <span | ||
155 | className="account__avatar-premium emoji" | ||
156 | data-tip="Premium Supporter Account" | ||
157 | > | ||
158 | <img src="./assets/images/emoji/star.png" alt="" /> | ||
159 | </span> | ||
160 | )} | ||
161 | </div> | ||
162 | <div className="account__info"> | ||
163 | <h2> | ||
164 | {`${user.firstname} ${user.lastname}`} | ||
165 | </h2> | ||
166 | {user.organization && `${user.organization}, `} | ||
167 | {user.email}<br /> | ||
168 | {!user.isPremium && ( | ||
169 | <span className="badge badge">{intl.formatMessage(messages.accountTypeBasic)}</span> | ||
170 | )} | ||
171 | {user.isPremium && ( | ||
172 | <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span> | ||
173 | )} | ||
174 | </div> | ||
175 | <Link to="/settings/user/edit" className="button"> | ||
176 | {intl.formatMessage(messages.accountEditButton)} | ||
177 | </Link> | ||
178 | |||
179 | {user.emailValidated} | ||
180 | </div> | ||
181 | </div> | ||
182 | )} | ||
183 | |||
184 | {user.isSubscriptionOwner && ( | ||
185 | isLoadingOrdersInfo ? ( | ||
186 | <Loader /> | ||
187 | ) : ( | ||
188 | <div className="account franz-form"> | ||
189 | {orders.length > 0 && ( | ||
190 | <div> | ||
191 | <div className="account__box"> | ||
192 | <h2>{intl.formatMessage(messages.headlineSubscription)}</h2> | ||
193 | <div className="account__subscription"> | ||
194 | {orders[0].name} | ||
195 | <span className="badge">{orders[0].price}</span> | ||
196 | <Button | ||
197 | label={intl.formatMessage(messages.manageSubscriptionButtonLabel)} | ||
198 | className="account__subscription-button franz-form__button--inverted" | ||
199 | loaded={!isCreatingPaymentDashboardUrl} | ||
200 | onClick={() => openDashboard()} | ||
201 | /> | ||
202 | </div> | ||
203 | </div> | ||
204 | <div className="account__box account__box--last"> | ||
205 | <h2>{intl.formatMessage(messages.headlineInvoices)}</h2> | ||
206 | <table className="invoices"> | ||
207 | <tbody> | ||
208 | {orders.map(order => ( | ||
209 | <tr key={order.id}> | ||
210 | <td className="invoices__date"> | ||
211 | {moment(order.date).format('DD.MM.YYYY')} | ||
212 | </td> | ||
213 | <td className="invoices__action"> | ||
214 | <button | ||
215 | onClick={() => openExternalUrl(order.invoiceUrl)} | ||
216 | > | ||
217 | {intl.formatMessage(messages.invoiceDownload)} | ||
218 | </button> | ||
219 | </td> | ||
220 | </tr> | ||
221 | ))} | ||
222 | </tbody> | ||
223 | </table> | ||
224 | </div> | ||
225 | </div> | ||
226 | )} | ||
227 | </div> | ||
228 | ) | ||
229 | )} | ||
230 | |||
231 | {user.isMiner && ( | ||
232 | <div className="account franz-form"> | ||
233 | <div className="account__box"> | ||
234 | <h2>{intl.formatMessage(messages.headlineSubscription)}</h2> | ||
235 | <div className="account__subscription"> | ||
236 | <div> | ||
237 | <p>{intl.formatMessage(messages.miningThankYou)}</p> | ||
238 | <FormattedMessage | ||
239 | {...messages.miningActive} | ||
240 | values={{ | ||
241 | hashes: <span className="badge">{hashrate.toFixed(2)}</span>, | ||
242 | }} | ||
243 | tagName="p" | ||
244 | /> | ||
245 | <p> | ||
246 | <Link | ||
247 | to="http://meetfranz.com/mining" | ||
248 | target="_blank" | ||
249 | className="link" | ||
250 | > | ||
251 | {intl.formatMessage(messages.miningMoreInfo)} | ||
252 | </Link> | ||
253 | </p> | ||
254 | </div> | ||
255 | <Button | ||
256 | label={intl.formatMessage(messages.cancelMining)} | ||
257 | className="account__subscription-button franz-form__button--inverted" | ||
258 | onClick={() => stopMiner()} | ||
259 | /> | ||
260 | </div> | ||
261 | </div> | ||
262 | </div> | ||
263 | )} | ||
264 | |||
265 | {!user.isPremium && !user.isMiner && ( | ||
266 | isLoadingPlans ? ( | ||
267 | <Loader /> | ||
268 | ) : ( | ||
269 | <div className="account franz-form"> | ||
270 | <div className="account__box account__box--last"> | ||
271 | <h2>{intl.formatMessage(messages.headlineUpgrade)}</h2> | ||
272 | <SubscriptionForm | ||
273 | onCloseWindow={onCloseSubscriptionWindow} | ||
274 | /> | ||
275 | </div> | ||
276 | </div> | ||
277 | ) | ||
278 | )} | ||
279 | </div> | ||
280 | )} | ||
281 | </div> | ||
282 | <ReactTooltip place="right" type="dark" effect="solid" /> | ||
283 | </div> | ||
284 | ); | ||
285 | } | ||
286 | } | ||