diff options
Diffstat (limited to 'src/components/settings/account')
-rw-r--r-- | src/components/settings/account/AccountDashboard.js | 208 |
1 files changed, 136 insertions, 72 deletions
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js index 4b7637637..f588449f4 100644 --- a/src/components/settings/account/AccountDashboard.js +++ b/src/components/settings/account/AccountDashboard.js | |||
@@ -1,14 +1,18 @@ | |||
1 | import React, { Component, Fragment } from 'react'; | 1 | import React, { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | 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 } from '@meetfranz/ui'; | 6 | import { |
7 | ProBadge, H1, H2, | ||
8 | } from '@meetfranz/ui'; | ||
9 | import moment from 'moment'; | ||
7 | 10 | ||
8 | import Loader from '../../ui/Loader'; | 11 | import Loader from '../../ui/Loader'; |
9 | import Button from '../../ui/Button'; | 12 | import Button from '../../ui/Button'; |
10 | import Infobox from '../../ui/Infobox'; | 13 | import Infobox from '../../ui/Infobox'; |
11 | import SubscriptionForm from '../../../containers/subscription/SubscriptionFormScreen'; | 14 | import SubscriptionForm from '../../../containers/subscription/SubscriptionFormScreen'; |
15 | import { i18nPlanName } from '../../../helpers/plan-helpers'; | ||
12 | 16 | ||
13 | const messages = defineMessages({ | 17 | const messages = defineMessages({ |
14 | headline: { | 18 | headline: { |
@@ -19,10 +23,6 @@ const messages = defineMessages({ | |||
19 | id: 'settings.account.headlineSubscription', | 23 | id: 'settings.account.headlineSubscription', |
20 | defaultMessage: '!!!Your Subscription', | 24 | defaultMessage: '!!!Your Subscription', |
21 | }, | 25 | }, |
22 | headlineUpgrade: { | ||
23 | id: 'settings.account.headlineUpgrade', | ||
24 | defaultMessage: '!!!Upgrade your Account', | ||
25 | }, | ||
26 | headlineDangerZone: { | 26 | headlineDangerZone: { |
27 | id: 'settings.account.headlineDangerZone', | 27 | id: 'settings.account.headlineDangerZone', |
28 | defaultMessage: '!!Danger Zone', | 28 | defaultMessage: '!!Danger Zone', |
@@ -31,6 +31,10 @@ const messages = defineMessages({ | |||
31 | id: 'settings.account.manageSubscription.label', | 31 | id: 'settings.account.manageSubscription.label', |
32 | defaultMessage: '!!!Manage your subscription', | 32 | defaultMessage: '!!!Manage your subscription', |
33 | }, | 33 | }, |
34 | upgradeAccountToPro: { | ||
35 | id: 'settings.account.upgradeToPro.label', | ||
36 | defaultMessage: '!!!Upgrade to Franz Professional', | ||
37 | }, | ||
34 | accountTypeBasic: { | 38 | accountTypeBasic: { |
35 | id: 'settings.account.accountType.basic', | 39 | id: 'settings.account.accountType.basic', |
36 | defaultMessage: '!!!Basic Account', | 40 | defaultMessage: '!!!Basic Account', |
@@ -71,21 +75,39 @@ const messages = defineMessages({ | |||
71 | id: 'settings.account.deleteEmailSent', | 75 | id: 'settings.account.deleteEmailSent', |
72 | defaultMessage: '!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!', | 76 | defaultMessage: '!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!', |
73 | }, | 77 | }, |
78 | trial: { | ||
79 | id: 'settings.account.trial', | ||
80 | defaultMessage: '!!!Free Trial', | ||
81 | }, | ||
82 | yourLicense: { | ||
83 | id: 'settings.account.yourLicense', | ||
84 | defaultMessage: '!!!Your Franz License:', | ||
85 | }, | ||
86 | trialEndsIn: { | ||
87 | id: 'settings.account.trialEndsIn', | ||
88 | defaultMessage: '!!!Your free trial ends in {duration}.', | ||
89 | }, | ||
90 | trialUpdateBillingInformation: { | ||
91 | id: 'settings.account.trialUpdateBillingInfo', | ||
92 | defaultMessage: '!!!Please update your billing info to continue using {license} after your trial period.', | ||
93 | }, | ||
74 | }); | 94 | }); |
75 | 95 | ||
76 | export default @observer class AccountDashboard extends Component { | 96 | @observer |
97 | class AccountDashboard extends Component { | ||
77 | static propTypes = { | 98 | static propTypes = { |
78 | user: MobxPropTypes.observableObject.isRequired, | 99 | user: MobxPropTypes.observableObject.isRequired, |
100 | isPremiumOverrideUser: PropTypes.bool.isRequired, | ||
101 | isProUser: PropTypes.bool.isRequired, | ||
79 | isLoading: PropTypes.bool.isRequired, | 102 | isLoading: PropTypes.bool.isRequired, |
80 | isLoadingPlans: PropTypes.bool.isRequired, | ||
81 | userInfoRequestFailed: PropTypes.bool.isRequired, | 103 | userInfoRequestFailed: PropTypes.bool.isRequired, |
82 | retryUserInfoRequest: PropTypes.func.isRequired, | 104 | retryUserInfoRequest: PropTypes.func.isRequired, |
83 | onCloseSubscriptionWindow: PropTypes.func.isRequired, | ||
84 | deleteAccount: PropTypes.func.isRequired, | 105 | deleteAccount: PropTypes.func.isRequired, |
85 | isLoadingDeleteAccount: PropTypes.bool.isRequired, | 106 | isLoadingDeleteAccount: PropTypes.bool.isRequired, |
86 | isDeleteAccountSuccessful: PropTypes.bool.isRequired, | 107 | isDeleteAccountSuccessful: PropTypes.bool.isRequired, |
87 | openEditAccount: PropTypes.func.isRequired, | 108 | openEditAccount: PropTypes.func.isRequired, |
88 | openBilling: PropTypes.func.isRequired, | 109 | openBilling: PropTypes.func.isRequired, |
110 | upgradeToPro: PropTypes.func.isRequired, | ||
89 | openInvoices: PropTypes.func.isRequired, | 111 | openInvoices: PropTypes.func.isRequired, |
90 | }; | 112 | }; |
91 | 113 | ||
@@ -96,20 +118,27 @@ export default @observer class AccountDashboard extends Component { | |||
96 | render() { | 118 | render() { |
97 | const { | 119 | const { |
98 | user, | 120 | user, |
121 | isPremiumOverrideUser, | ||
122 | isProUser, | ||
99 | isLoading, | 123 | isLoading, |
100 | isLoadingPlans, | ||
101 | userInfoRequestFailed, | 124 | userInfoRequestFailed, |
102 | retryUserInfoRequest, | 125 | retryUserInfoRequest, |
103 | onCloseSubscriptionWindow, | ||
104 | deleteAccount, | 126 | deleteAccount, |
105 | isLoadingDeleteAccount, | 127 | isLoadingDeleteAccount, |
106 | isDeleteAccountSuccessful, | 128 | isDeleteAccountSuccessful, |
107 | openEditAccount, | 129 | openEditAccount, |
108 | openBilling, | 130 | openBilling, |
131 | upgradeToPro, | ||
109 | openInvoices, | 132 | openInvoices, |
110 | } = this.props; | 133 | } = this.props; |
111 | const { intl } = this.context; | 134 | const { intl } = this.context; |
112 | 135 | ||
136 | let planName = ''; | ||
137 | |||
138 | if (user.team && user.team.plan) { | ||
139 | planName = i18nPlanName(user.team.plan, intl); | ||
140 | } | ||
141 | |||
113 | return ( | 142 | return ( |
114 | <div className="settings__main"> | 143 | <div className="settings__main"> |
115 | <div className="settings__header"> | 144 | <div className="settings__header"> |
@@ -135,82 +164,115 @@ export default @observer class AccountDashboard extends Component { | |||
135 | )} | 164 | )} |
136 | 165 | ||
137 | {!userInfoRequestFailed && ( | 166 | {!userInfoRequestFailed && ( |
138 | <Fragment> | 167 | <> |
139 | {!isLoading && ( | 168 | {!isLoading && ( |
140 | <div className="account"> | 169 | <> |
141 | <div className="account__box account__box--flex"> | 170 | <div className="account"> |
142 | <div className="account__avatar"> | 171 | <div className="account__box account__box--flex"> |
143 | <img | 172 | <div className="account__avatar"> |
144 | src="./assets/images/logo.svg" | 173 | <img |
145 | alt="" | 174 | src="./assets/images/logo.svg" |
146 | /> | 175 | alt="" |
147 | </div> | 176 | /> |
148 | <div className="account__info"> | 177 | </div> |
149 | <h2> | 178 | <div className="account__info"> |
150 | <span className="username">{`${user.firstname} ${user.lastname}`}</span> | 179 | <H1> |
180 | <span className="username">{`${user.firstname} ${user.lastname}`}</span> | ||
181 | {user.isPremium && ( | ||
182 | <> | ||
183 | {' '} | ||
184 | <ProBadge /> | ||
185 | </> | ||
186 | )} | ||
187 | </H1> | ||
188 | <p> | ||
189 | {user.organization && `${user.organization}, `} | ||
190 | {user.email} | ||
191 | </p> | ||
151 | {user.isPremium && ( | 192 | {user.isPremium && ( |
193 | <div className="manage-user-links"> | ||
194 | <Button | ||
195 | label={intl.formatMessage(messages.accountEditButton)} | ||
196 | className="franz-form__button--inverted" | ||
197 | onClick={openEditAccount} | ||
198 | /> | ||
199 | </div> | ||
200 | )} | ||
201 | </div> | ||
202 | {!user.isPremium && ( | ||
203 | <Button | ||
204 | label={intl.formatMessage(messages.accountEditButton)} | ||
205 | className="franz-form__button--inverted" | ||
206 | onClick={openEditAccount} | ||
207 | /> | ||
208 | )} | ||
209 | </div> | ||
210 | </div> | ||
211 | {user.isPremium && user.isSubscriptionOwner && ( | ||
212 | <div className="account"> | ||
213 | <div className="account__box"> | ||
214 | <H2> | ||
215 | {intl.formatMessage(messages.yourLicense)} | ||
216 | </H2> | ||
217 | <p> | ||
218 | {isPremiumOverrideUser ? 'Franz Premium' : planName} | ||
219 | {user.team.isTrial && ( | ||
220 | <> | ||
221 | {' – '} | ||
222 | {intl.formatMessage(messages.trial)} | ||
223 | </> | ||
224 | )} | ||
225 | </p> | ||
226 | {user.team.isTrial && ( | ||
152 | <> | 227 | <> |
153 | {' '} | 228 | <br /> |
154 | <ProBadge /> | 229 | <p> |
155 | <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span> | 230 | {intl.formatMessage(messages.trialEndsIn, { |
231 | duration: moment.duration(moment().diff(user.team.trialEnd)).humanize(), | ||
232 | })} | ||
233 | </p> | ||
234 | <p> | ||
235 | {intl.formatMessage(messages.trialUpdateBillingInformation, { | ||
236 | license: planName, | ||
237 | })} | ||
238 | </p> | ||
156 | </> | 239 | </> |
157 | )} | 240 | )} |
158 | </h2> | ||
159 | {user.organization && `${user.organization}, `} | ||
160 | {user.email} | ||
161 | {user.isPremium && ( | ||
162 | <div className="manage-user-links"> | 241 | <div className="manage-user-links"> |
242 | {!isProUser && ( | ||
243 | <Button | ||
244 | label={intl.formatMessage(messages.upgradeAccountToPro)} | ||
245 | className="franz-form__button--primary" | ||
246 | onClick={upgradeToPro} | ||
247 | /> | ||
248 | )} | ||
163 | <Button | 249 | <Button |
164 | label={intl.formatMessage(messages.accountEditButton)} | 250 | label={intl.formatMessage(messages.manageSubscriptionButtonLabel)} |
165 | className="franz-form__button--inverted" | 251 | className="franz-form__button--inverted" |
166 | onClick={openEditAccount} | 252 | onClick={openBilling} |
253 | /> | ||
254 | <Button | ||
255 | label={intl.formatMessage(messages.invoicesButton)} | ||
256 | className="franz-form__button--inverted" | ||
257 | onClick={openInvoices} | ||
167 | /> | 258 | /> |
168 | {user.isSubscriptionOwner && ( | ||
169 | <> | ||
170 | <Button | ||
171 | label={intl.formatMessage(messages.manageSubscriptionButtonLabel)} | ||
172 | className="franz-form__button--inverted" | ||
173 | onClick={openBilling} | ||
174 | /> | ||
175 | <Button | ||
176 | label={intl.formatMessage(messages.invoicesButton)} | ||
177 | className="franz-form__button--inverted" | ||
178 | onClick={openInvoices} | ||
179 | /> | ||
180 | </> | ||
181 | )} | ||
182 | </div> | 259 | </div> |
183 | )} | 260 | </div> |
184 | </div> | 261 | </div> |
185 | {!user.isPremium && ( | 262 | )} |
186 | <Button | 263 | {!user.isPremium && ( |
187 | label={intl.formatMessage(messages.accountEditButton)} | 264 | <div className="account franz-form"> |
188 | className="franz-form__button--inverted" | 265 | <div className="account__box"> |
189 | onClick={openEditAccount} | 266 | <SubscriptionForm /> |
190 | /> | 267 | </div> |
191 | )} | ||
192 | </div> | ||
193 | </div> | ||
194 | )} | ||
195 | |||
196 | {!user.isPremium && ( | ||
197 | isLoadingPlans ? ( | ||
198 | <Loader /> | ||
199 | ) : ( | ||
200 | <div className="account franz-form"> | ||
201 | <div className="account__box"> | ||
202 | <h2>{intl.formatMessage(messages.headlineUpgrade)}</h2> | ||
203 | <SubscriptionForm | ||
204 | onCloseWindow={onCloseSubscriptionWindow} | ||
205 | /> | ||
206 | </div> | 268 | </div> |
207 | </div> | 269 | )} |
208 | ) | 270 | </> |
209 | )} | 271 | )} |
210 | 272 | ||
211 | <div className="account franz-form"> | 273 | <div className="account franz-form"> |
212 | <div className="account__box"> | 274 | <div className="account__box"> |
213 | <h2>{intl.formatMessage(messages.headlineDangerZone)}</h2> | 275 | <H2>{intl.formatMessage(messages.headlineDangerZone)}</H2> |
214 | {!isDeleteAccountSuccessful && ( | 276 | {!isDeleteAccountSuccessful && ( |
215 | <div className="account__subscription"> | 277 | <div className="account__subscription"> |
216 | <p>{intl.formatMessage(messages.deleteInfo)}</p> | 278 | <p>{intl.formatMessage(messages.deleteInfo)}</p> |
@@ -227,7 +289,7 @@ export default @observer class AccountDashboard extends Component { | |||
227 | )} | 289 | )} |
228 | </div> | 290 | </div> |
229 | </div> | 291 | </div> |
230 | </Fragment> | 292 | </> |
231 | )} | 293 | )} |
232 | </div> | 294 | </div> |
233 | <ReactTooltip place="right" type="dark" effect="solid" /> | 295 | <ReactTooltip place="right" type="dark" effect="solid" /> |
@@ -235,3 +297,5 @@ export default @observer class AccountDashboard extends Component { | |||
235 | ); | 297 | ); |
236 | } | 298 | } |
237 | } | 299 | } |
300 | |||
301 | export default AccountDashboard; | ||