diff options
Diffstat (limited to 'src/components/settings/account')
-rw-r--r-- | src/components/settings/account/AccountDashboard.js | 159 |
1 files changed, 18 insertions, 141 deletions
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js index 68d88e218..ef7748343 100644 --- a/src/components/settings/account/AccountDashboard.js +++ b/src/components/settings/account/AccountDashboard.js | |||
@@ -3,14 +3,11 @@ import PropTypes from 'prop-types'; | |||
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | 3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, intlShape } from 'react-intl'; |
5 | import ReactTooltip from 'react-tooltip'; | 5 | import ReactTooltip from 'react-tooltip'; |
6 | import { ProBadge, H1, H2 } from '@meetfranz/ui'; | 6 | import { H1, H2 } from '@meetfranz/ui'; |
7 | import moment from 'moment'; | ||
8 | 7 | ||
9 | import Loader from '../../ui/Loader'; | 8 | import Loader from '../../ui/Loader'; |
10 | import Button from '../../ui/Button'; | 9 | import Button from '../../ui/Button'; |
11 | import Infobox from '../../ui/Infobox'; | 10 | import Infobox from '../../ui/Infobox'; |
12 | import SubscriptionForm from '../../../containers/subscription/SubscriptionFormScreen'; | ||
13 | import { i18nPlanName } from '../../../helpers/plan-helpers'; | ||
14 | import { LOCAL_SERVER, LIVE_FRANZ_API } from '../../../config'; | 11 | import { LOCAL_SERVER, LIVE_FRANZ_API } from '../../../config'; |
15 | 12 | ||
16 | const messages = defineMessages({ | 13 | const messages = defineMessages({ |
@@ -18,30 +15,10 @@ const messages = defineMessages({ | |||
18 | id: 'settings.account.headline', | 15 | id: 'settings.account.headline', |
19 | defaultMessage: '!!!Account', | 16 | defaultMessage: '!!!Account', |
20 | }, | 17 | }, |
21 | headlineSubscription: { | ||
22 | id: 'settings.account.headlineSubscription', | ||
23 | defaultMessage: '!!!Your Subscription', | ||
24 | }, | ||
25 | headlineDangerZone: { | 18 | headlineDangerZone: { |
26 | id: 'settings.account.headlineDangerZone', | 19 | id: 'settings.account.headlineDangerZone', |
27 | defaultMessage: '!!Danger Zone', | 20 | defaultMessage: '!!Danger Zone', |
28 | }, | 21 | }, |
29 | manageSubscriptionButtonLabel: { | ||
30 | id: 'settings.account.manageSubscription.label', | ||
31 | defaultMessage: '!!!Manage your subscription', | ||
32 | }, | ||
33 | upgradeAccountToPro: { | ||
34 | id: 'settings.account.upgradeToPro.label', | ||
35 | defaultMessage: '!!!Upgrade to Franz Professional', | ||
36 | }, | ||
37 | accountTypeBasic: { | ||
38 | id: 'settings.account.accountType.basic', | ||
39 | defaultMessage: '!!!Basic Account', | ||
40 | }, | ||
41 | accountTypePremium: { | ||
42 | id: 'settings.account.accountType.premium', | ||
43 | defaultMessage: '!!!Premium Supporter Account', | ||
44 | }, | ||
45 | accountEditButton: { | 22 | accountEditButton: { |
46 | id: 'settings.account.account.editButton', | 23 | id: 'settings.account.account.editButton', |
47 | defaultMessage: '!!!Edit Account', | 24 | defaultMessage: '!!!Edit Account', |
@@ -50,10 +27,6 @@ const messages = defineMessages({ | |||
50 | id: 'settings.account.headlineInvoices', | 27 | id: 'settings.account.headlineInvoices', |
51 | defaultMessage: '!!Invoices', | 28 | defaultMessage: '!!Invoices', |
52 | }, | 29 | }, |
53 | invoiceDownload: { | ||
54 | id: 'settings.account.invoiceDownload', | ||
55 | defaultMessage: '!!!Download', | ||
56 | }, | ||
57 | userInfoRequestFailed: { | 30 | userInfoRequestFailed: { |
58 | id: 'settings.account.userInfoRequestFailed', | 31 | id: 'settings.account.userInfoRequestFailed', |
59 | defaultMessage: '!!!Could not load user information', | 32 | defaultMessage: '!!!Could not load user information', |
@@ -76,23 +49,10 @@ const messages = defineMessages({ | |||
76 | defaultMessage: | 49 | defaultMessage: |
77 | '!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!', | 50 | '!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!', |
78 | }, | 51 | }, |
79 | trial: { | ||
80 | id: 'settings.account.trial', | ||
81 | defaultMessage: '!!!Free Trial', | ||
82 | }, | ||
83 | yourLicense: { | 52 | yourLicense: { |
84 | id: 'settings.account.yourLicense', | 53 | id: 'settings.account.yourLicense', |
85 | defaultMessage: '!!!Your Franz License:', | 54 | defaultMessage: '!!!Your Franz License:', |
86 | }, | 55 | }, |
87 | trialEndsIn: { | ||
88 | id: 'settings.account.trialEndsIn', | ||
89 | defaultMessage: '!!!Your free trial ends in {duration}.', | ||
90 | }, | ||
91 | trialUpdateBillingInformation: { | ||
92 | id: 'settings.account.trialUpdateBillingInfo', | ||
93 | defaultMessage: | ||
94 | '!!!Please update your billing info to continue using {license} after your trial period.', | ||
95 | }, | ||
96 | accountUnavailable: { | 56 | accountUnavailable: { |
97 | id: 'settings.account.accountUnavailable', | 57 | id: 'settings.account.accountUnavailable', |
98 | defaultMessage: 'Account is unavailable', | 58 | defaultMessage: 'Account is unavailable', |
@@ -107,8 +67,6 @@ const messages = defineMessages({ | |||
107 | class AccountDashboard extends Component { | 67 | class AccountDashboard extends Component { |
108 | static propTypes = { | 68 | static propTypes = { |
109 | user: MobxPropTypes.observableObject.isRequired, | 69 | user: MobxPropTypes.observableObject.isRequired, |
110 | isPremiumOverrideUser: PropTypes.bool.isRequired, | ||
111 | isProUser: PropTypes.bool.isRequired, | ||
112 | isLoading: PropTypes.bool.isRequired, | 70 | isLoading: PropTypes.bool.isRequired, |
113 | userInfoRequestFailed: PropTypes.bool.isRequired, | 71 | userInfoRequestFailed: PropTypes.bool.isRequired, |
114 | retryUserInfoRequest: PropTypes.func.isRequired, | 72 | retryUserInfoRequest: PropTypes.func.isRequired, |
@@ -116,10 +74,7 @@ class AccountDashboard extends Component { | |||
116 | isLoadingDeleteAccount: PropTypes.bool.isRequired, | 74 | isLoadingDeleteAccount: PropTypes.bool.isRequired, |
117 | isDeleteAccountSuccessful: PropTypes.bool.isRequired, | 75 | isDeleteAccountSuccessful: PropTypes.bool.isRequired, |
118 | openEditAccount: PropTypes.func.isRequired, | 76 | openEditAccount: PropTypes.func.isRequired, |
119 | openBilling: PropTypes.func.isRequired, | ||
120 | upgradeToPro: PropTypes.func.isRequired, | ||
121 | openInvoices: PropTypes.func.isRequired, | 77 | openInvoices: PropTypes.func.isRequired, |
122 | onCloseSubscriptionWindow: PropTypes.func.isRequired, | ||
123 | server: PropTypes.string.isRequired, | 78 | server: PropTypes.string.isRequired, |
124 | }; | 79 | }; |
125 | 80 | ||
@@ -130,8 +85,6 @@ class AccountDashboard extends Component { | |||
130 | render() { | 85 | render() { |
131 | const { | 86 | const { |
132 | user, | 87 | user, |
133 | isPremiumOverrideUser, | ||
134 | isProUser, | ||
135 | isLoading, | 88 | isLoading, |
136 | userInfoRequestFailed, | 89 | userInfoRequestFailed, |
137 | retryUserInfoRequest, | 90 | retryUserInfoRequest, |
@@ -139,20 +92,11 @@ class AccountDashboard extends Component { | |||
139 | isLoadingDeleteAccount, | 92 | isLoadingDeleteAccount, |
140 | isDeleteAccountSuccessful, | 93 | isDeleteAccountSuccessful, |
141 | openEditAccount, | 94 | openEditAccount, |
142 | openBilling, | ||
143 | upgradeToPro, | ||
144 | openInvoices, | 95 | openInvoices, |
145 | onCloseSubscriptionWindow, | ||
146 | server, | 96 | server, |
147 | } = this.props; | 97 | } = this.props; |
148 | const { intl } = this.context; | 98 | const { intl } = this.context; |
149 | 99 | ||
150 | let planName = ''; | ||
151 | |||
152 | if (user.team && user.team.plan) { | ||
153 | planName = i18nPlanName(user.team.plan, intl); | ||
154 | } | ||
155 | |||
156 | const isUsingWithoutAccount = server === LOCAL_SERVER; | 100 | const isUsingWithoutAccount = server === LOCAL_SERVER; |
157 | const isUsingFranzServer = server === LIVE_FRANZ_API; | 101 | const isUsingFranzServer = server === LIVE_FRANZ_API; |
158 | 102 | ||
@@ -210,98 +154,40 @@ class AccountDashboard extends Component { | |||
210 | <div className="account__info"> | 154 | <div className="account__info"> |
211 | <H1> | 155 | <H1> |
212 | <span className="username">{`${user.firstname} ${user.lastname}`}</span> | 156 | <span className="username">{`${user.firstname} ${user.lastname}`}</span> |
213 | {user.isPremium && ( | ||
214 | <> | ||
215 | {' '} | ||
216 | <ProBadge /> | ||
217 | </> | ||
218 | )} | ||
219 | </H1> | 157 | </H1> |
220 | <p> | 158 | <p> |
221 | {user.organization && `${user.organization}, `} | 159 | {user.organization && `${user.organization}, `} |
222 | {user.email} | 160 | {user.email} |
223 | </p> | 161 | </p> |
224 | {user.isPremium && ( | 162 | <div className="manage-user-links"> |
225 | <div className="manage-user-links"> | 163 | <Button |
226 | <Button | 164 | label={intl.formatMessage( |
227 | label={intl.formatMessage( | 165 | messages.accountEditButton, |
228 | messages.accountEditButton, | 166 | )} |
229 | )} | 167 | className="franz-form__button--inverted" |
230 | className="franz-form__button--inverted" | 168 | onClick={openEditAccount} |
231 | onClick={openEditAccount} | 169 | /> |
232 | /> | 170 | </div> |
233 | </div> | ||
234 | )} | ||
235 | </div> | 171 | </div> |
236 | {!user.isPremium && ( | 172 | <Button |
237 | <Button | 173 | label={intl.formatMessage( |
238 | label={intl.formatMessage( | 174 | messages.accountEditButton, |
239 | messages.accountEditButton, | 175 | )} |
240 | )} | 176 | className="franz-form__button--inverted" |
241 | className="franz-form__button--inverted" | 177 | onClick={openEditAccount} |
242 | onClick={openEditAccount} | 178 | /> |
243 | /> | ||
244 | )} | ||
245 | </div> | 179 | </div> |
246 | </div> | 180 | </div> |
247 | {user.isPremium && user.isSubscriptionOwner && isUsingFranzServer && ( | 181 | {user.isSubscriptionOwner && isUsingFranzServer && ( |
248 | <div className="account"> | 182 | <div className="account"> |
249 | <div className="account__box"> | 183 | <div className="account__box"> |
250 | <H2>{intl.formatMessage(messages.yourLicense)}</H2> | 184 | <H2>{intl.formatMessage(messages.yourLicense)}</H2> |
251 | <p> | 185 | <p> |
252 | Franz | 186 | Franz |
253 | {' '} | ||
254 | {isPremiumOverrideUser ? 'Premium' : planName} | ||
255 | {user.team.isTrial && ( | ||
256 | <> | ||
257 | {' – '} | ||
258 | {intl.formatMessage(messages.trial)} | ||
259 | </> | ||
260 | )} | ||
261 | </p> | 187 | </p> |
262 | {user.team.isTrial && ( | ||
263 | <> | ||
264 | <br /> | ||
265 | <p> | ||
266 | {intl.formatMessage(messages.trialEndsIn, { | ||
267 | duration: moment | ||
268 | .duration( | ||
269 | moment().diff(user.team.trialEnd), | ||
270 | ) | ||
271 | .humanize(), | ||
272 | })} | ||
273 | </p> | ||
274 | <p> | ||
275 | {intl.formatMessage( | ||
276 | messages.trialUpdateBillingInformation, | ||
277 | { | ||
278 | license: planName, | ||
279 | }, | ||
280 | )} | ||
281 | </p> | ||
282 | </> | ||
283 | )} | ||
284 | {!isProUser && ( | ||
285 | <div className="manage-user-links"> | ||
286 | <Button | ||
287 | label={intl.formatMessage( | ||
288 | messages.upgradeAccountToPro, | ||
289 | )} | ||
290 | className="franz-form__button--primary" | ||
291 | onClick={upgradeToPro} | ||
292 | /> | ||
293 | </div> | ||
294 | )} | ||
295 | <div className="manage-user-links"> | 188 | <div className="manage-user-links"> |
296 | <Button | 189 | <Button |
297 | label={intl.formatMessage( | 190 | label={intl.formatMessage( |
298 | messages.manageSubscriptionButtonLabel, | ||
299 | )} | ||
300 | className="franz-form__button--inverted" | ||
301 | onClick={openBilling} | ||
302 | /> | ||
303 | <Button | ||
304 | label={intl.formatMessage( | ||
305 | messages.invoicesButton, | 191 | messages.invoicesButton, |
306 | )} | 192 | )} |
307 | className="franz-form__button--inverted" | 193 | className="franz-form__button--inverted" |
@@ -311,15 +197,6 @@ class AccountDashboard extends Component { | |||
311 | </div> | 197 | </div> |
312 | </div> | 198 | </div> |
313 | )} | 199 | )} |
314 | {!user.isPremium && ( | ||
315 | <div className="account franz-form"> | ||
316 | <div className="account__box"> | ||
317 | <SubscriptionForm | ||
318 | onCloseWindow={onCloseSubscriptionWindow} | ||
319 | /> | ||
320 | </div> | ||
321 | </div> | ||
322 | )} | ||
323 | </> | 200 | </> |
324 | )} | 201 | )} |
325 | 202 | ||