diff options
Diffstat (limited to 'src/components/settings/account/AccountDashboard.js')
-rw-r--r-- | src/components/settings/account/AccountDashboard.js | 197 |
1 files changed, 126 insertions, 71 deletions
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js index 3f6964b6b..900a83a78 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,36 @@ 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 | export default @observer class AccountDashboard extends Component { |
77 | static propTypes = { | 97 | static propTypes = { |
78 | user: MobxPropTypes.observableObject.isRequired, | 98 | user: MobxPropTypes.observableObject.isRequired, |
79 | isLoading: PropTypes.bool.isRequired, | 99 | isLoading: PropTypes.bool.isRequired, |
80 | isLoadingPlans: PropTypes.bool.isRequired, | ||
81 | userInfoRequestFailed: PropTypes.bool.isRequired, | 100 | userInfoRequestFailed: PropTypes.bool.isRequired, |
82 | retryUserInfoRequest: PropTypes.func.isRequired, | 101 | retryUserInfoRequest: PropTypes.func.isRequired, |
83 | onCloseSubscriptionWindow: PropTypes.func.isRequired, | ||
84 | deleteAccount: PropTypes.func.isRequired, | 102 | deleteAccount: PropTypes.func.isRequired, |
85 | isLoadingDeleteAccount: PropTypes.bool.isRequired, | 103 | isLoadingDeleteAccount: PropTypes.bool.isRequired, |
86 | isDeleteAccountSuccessful: PropTypes.bool.isRequired, | 104 | isDeleteAccountSuccessful: PropTypes.bool.isRequired, |
87 | openEditAccount: PropTypes.func.isRequired, | 105 | openEditAccount: PropTypes.func.isRequired, |
88 | openBilling: PropTypes.func.isRequired, | 106 | openBilling: PropTypes.func.isRequired, |
107 | upgradeToPro: PropTypes.func.isRequired, | ||
89 | openInvoices: PropTypes.func.isRequired, | 108 | openInvoices: PropTypes.func.isRequired, |
90 | }; | 109 | }; |
91 | 110 | ||
@@ -97,19 +116,24 @@ export default @observer class AccountDashboard extends Component { | |||
97 | const { | 116 | const { |
98 | user, | 117 | user, |
99 | isLoading, | 118 | isLoading, |
100 | isLoadingPlans, | ||
101 | userInfoRequestFailed, | 119 | userInfoRequestFailed, |
102 | retryUserInfoRequest, | 120 | retryUserInfoRequest, |
103 | onCloseSubscriptionWindow, | ||
104 | deleteAccount, | 121 | deleteAccount, |
105 | isLoadingDeleteAccount, | 122 | isLoadingDeleteAccount, |
106 | isDeleteAccountSuccessful, | 123 | isDeleteAccountSuccessful, |
107 | openEditAccount, | 124 | openEditAccount, |
108 | openBilling, | 125 | openBilling, |
126 | upgradeToPro, | ||
109 | openInvoices, | 127 | openInvoices, |
110 | } = this.props; | 128 | } = this.props; |
111 | const { intl } = this.context; | 129 | const { intl } = this.context; |
112 | 130 | ||
131 | let planName = ''; | ||
132 | |||
133 | if (user.team && user.team.plan) { | ||
134 | planName = i18nPlanName(user.team.plan, intl); | ||
135 | } | ||
136 | |||
113 | return ( | 137 | return ( |
114 | <div className="settings__main"> | 138 | <div className="settings__main"> |
115 | <div className="settings__header"> | 139 | <div className="settings__header"> |
@@ -135,82 +159,113 @@ export default @observer class AccountDashboard extends Component { | |||
135 | )} | 159 | )} |
136 | 160 | ||
137 | {!userInfoRequestFailed && ( | 161 | {!userInfoRequestFailed && ( |
138 | <Fragment> | 162 | <> |
139 | {!isLoading && ( | 163 | {!isLoading && ( |
140 | <div className="account"> | 164 | <> |
141 | <div className="account__box account__box--flex"> | 165 | <div className="account"> |
142 | <div className="account__avatar"> | 166 | <div className="account__box account__box--flex"> |
143 | <img | 167 | <div className="account__avatar"> |
144 | src="./assets/images/logo.svg" | 168 | <img |
145 | alt="" | 169 | src="./assets/images/logo.svg" |
146 | /> | 170 | alt="" |
147 | </div> | 171 | /> |
148 | <div className="account__info"> | 172 | </div> |
149 | <h2> | 173 | <div className="account__info"> |
150 | <span className="username">{`${user.firstname} ${user.lastname}`}</span> | 174 | <H1> |
175 | <span className="username">{`${user.firstname} ${user.lastname}`}</span> | ||
176 | {user.isPremium && ( | ||
177 | <> | ||
178 | {' '} | ||
179 | <ProBadge /> | ||
180 | </> | ||
181 | )} | ||
182 | </H1> | ||
183 | <p> | ||
184 | {user.organization && `${user.organization}, `} | ||
185 | {user.email} | ||
186 | </p> | ||
151 | {user.isPremium && ( | 187 | {user.isPremium && ( |
188 | <div className="manage-user-links"> | ||
189 | <Button | ||
190 | label={intl.formatMessage(messages.accountEditButton)} | ||
191 | className="franz-form__button--inverted" | ||
192 | onClick={openEditAccount} | ||
193 | /> | ||
194 | </div> | ||
195 | )} | ||
196 | </div> | ||
197 | {!user.isPremium && ( | ||
198 | <Button | ||
199 | label={intl.formatMessage(messages.accountEditButton)} | ||
200 | className="franz-form__button--inverted" | ||
201 | onClick={openEditAccount} | ||
202 | /> | ||
203 | )} | ||
204 | </div> | ||
205 | </div> | ||
206 | {user.isPremium && user.isSubscriptionOwner && ( | ||
207 | <div className="account"> | ||
208 | <div className="account__box"> | ||
209 | <H2> | ||
210 | {intl.formatMessage(messages.yourLicense)} | ||
211 | </H2> | ||
212 | <p> | ||
213 | {planName} | ||
214 | {user.team.isTrial && ( | ||
215 | <> | ||
216 | {' – '} | ||
217 | {intl.formatMessage(messages.trial)} | ||
218 | </> | ||
219 | )} | ||
220 | </p> | ||
221 | {user.team.isTrial && ( | ||
152 | <> | 222 | <> |
153 | {' '} | 223 | <br /> |
154 | <ProBadge /> | 224 | <p> |
155 | <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span> | 225 | {intl.formatMessage(messages.trialEndsIn, { |
226 | duration: moment.duration(moment().diff(user.team.trialEnd)).humanize(), | ||
227 | })} | ||
228 | </p> | ||
229 | <p> | ||
230 | {intl.formatMessage(messages.trialUpdateBillingInformation, { | ||
231 | license: planName, | ||
232 | })} | ||
233 | </p> | ||
156 | </> | 234 | </> |
157 | )} | 235 | )} |
158 | </h2> | ||
159 | {user.organization && `${user.organization}, `} | ||
160 | {user.email} | ||
161 | {user.isPremium && ( | ||
162 | <div className="manage-user-links"> | 236 | <div className="manage-user-links"> |
163 | <Button | 237 | <Button |
164 | label={intl.formatMessage(messages.accountEditButton)} | 238 | label={intl.formatMessage(messages.upgradeAccountToPro)} |
239 | className="franz-form__button--primary" | ||
240 | onClick={upgradeToPro} | ||
241 | /> | ||
242 | <Button | ||
243 | label={intl.formatMessage(messages.manageSubscriptionButtonLabel)} | ||
165 | className="franz-form__button--inverted" | 244 | className="franz-form__button--inverted" |
166 | onClick={openEditAccount} | 245 | onClick={openBilling} |
246 | /> | ||
247 | <Button | ||
248 | label={intl.formatMessage(messages.invoicesButton)} | ||
249 | className="franz-form__button--inverted" | ||
250 | onClick={openInvoices} | ||
167 | /> | 251 | /> |
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> | 252 | </div> |
183 | )} | 253 | </div> |
184 | </div> | 254 | </div> |
185 | {!user.isPremium && ( | 255 | )} |
186 | <Button | 256 | {!user.isPremium && ( |
187 | label={intl.formatMessage(messages.accountEditButton)} | 257 | <div className="account franz-form"> |
188 | className="franz-form__button--inverted" | 258 | <div className="account__box"> |
189 | onClick={openEditAccount} | 259 | <SubscriptionForm /> |
190 | /> | 260 | </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> | 261 | </div> |
207 | </div> | 262 | )} |
208 | ) | 263 | </> |
209 | )} | 264 | )} |
210 | 265 | ||
211 | <div className="account franz-form"> | 266 | <div className="account franz-form"> |
212 | <div className="account__box"> | 267 | <div className="account__box"> |
213 | <h2>{intl.formatMessage(messages.headlineDangerZone)}</h2> | 268 | <H2>{intl.formatMessage(messages.headlineDangerZone)}</H2> |
214 | {!isDeleteAccountSuccessful && ( | 269 | {!isDeleteAccountSuccessful && ( |
215 | <div className="account__subscription"> | 270 | <div className="account__subscription"> |
216 | <p>{intl.formatMessage(messages.deleteInfo)}</p> | 271 | <p>{intl.formatMessage(messages.deleteInfo)}</p> |
@@ -227,7 +282,7 @@ export default @observer class AccountDashboard extends Component { | |||
227 | )} | 282 | )} |
228 | </div> | 283 | </div> |
229 | </div> | 284 | </div> |
230 | </Fragment> | 285 | </> |
231 | )} | 286 | )} |
232 | </div> | 287 | </div> |
233 | <ReactTooltip place="right" type="dark" effect="solid" /> | 288 | <ReactTooltip place="right" type="dark" effect="solid" /> |