diff options
Diffstat (limited to 'src/components/settings/account/AccountDashboard.js')
-rw-r--r-- | src/components/settings/account/AccountDashboard.js | 114 |
1 files changed, 74 insertions, 40 deletions
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js index 0366dc1ee..079d50380 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, H2, H1, H3, | ||
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: { |
@@ -20,8 +24,8 @@ const messages = defineMessages({ | |||
20 | defaultMessage: '!!!Your Subscription', | 24 | defaultMessage: '!!!Your Subscription', |
21 | }, | 25 | }, |
22 | headlineUpgrade: { | 26 | headlineUpgrade: { |
23 | id: 'settings.account.headlineUpgrade', | 27 | id: 'settings.account.headlineTrialUpgrade', |
24 | defaultMessage: '!!!Upgrade your Account', | 28 | defaultMessage: '!!!Get the free 14 day Franz Professional Trial', |
25 | }, | 29 | }, |
26 | headlineDangerZone: { | 30 | headlineDangerZone: { |
27 | id: 'settings.account.headlineDangerZone', | 31 | id: 'settings.account.headlineDangerZone', |
@@ -71,6 +75,22 @@ 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 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 { |
@@ -110,6 +130,13 @@ export default @observer class AccountDashboard extends Component { | |||
110 | } = this.props; | 130 | } = this.props; |
111 | const { intl } = this.context; | 131 | const { intl } = this.context; |
112 | 132 | ||
133 | let planName = ''; | ||
134 | |||
135 | if (user.team && user.team.plan) { | ||
136 | planName = i18nPlanName(user.team.plan, intl); | ||
137 | console.log(planName); | ||
138 | } | ||
139 | |||
113 | return ( | 140 | return ( |
114 | <div className="settings__main"> | 141 | <div className="settings__main"> |
115 | <div className="settings__header"> | 142 | <div className="settings__header"> |
@@ -147,7 +174,7 @@ export default @observer class AccountDashboard extends Component { | |||
147 | /> | 174 | /> |
148 | </div> | 175 | </div> |
149 | <div className="account__info"> | 176 | <div className="account__info"> |
150 | <h2> | 177 | <H1> |
151 | <span className="username">{`${user.firstname} ${user.lastname}`}</span> | 178 | <span className="username">{`${user.firstname} ${user.lastname}`}</span> |
152 | {user.isPremium && ( | 179 | {user.isPremium && ( |
153 | <> | 180 | <> |
@@ -156,7 +183,7 @@ export default @observer class AccountDashboard extends Component { | |||
156 | {/* <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span> */} | 183 | {/* <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span> */} |
157 | </> | 184 | </> |
158 | )} | 185 | )} |
159 | </h2> | 186 | </H1> |
160 | <p> | 187 | <p> |
161 | {user.organization && `${user.organization}, `} | 188 | {user.organization && `${user.organization}, `} |
162 | {user.email} | 189 | {user.email} |
@@ -197,54 +224,61 @@ export default @observer class AccountDashboard extends Component { | |||
197 | {user.isSubscriptionOwner && ( | 224 | {user.isSubscriptionOwner && ( |
198 | <div className="account"> | 225 | <div className="account"> |
199 | <div className="account__box"> | 226 | <div className="account__box"> |
200 | <h2> | 227 | <H2> |
201 | Your license: {user.team.plan} | 228 | {intl.formatMessage(messages.yourLicense)} |
202 | </h2> | 229 | </H2> |
230 | <H3> | ||
231 | {planName} | ||
232 | {user.team.isTrial && ( | ||
233 | <> | ||
234 | {' – '} | ||
235 | {intl.formatMessage(messages.trial)} | ||
236 | </> | ||
237 | )} | ||
238 | </H3> | ||
203 | {user.team.isTrial && ( | 239 | {user.team.isTrial && ( |
204 | <> | 240 | <> |
205 | <p> | 241 | <p> |
206 | Trial ends in 14 days | 242 | {intl.formatMessage(messages.trialEndsIn, { |
243 | duration: moment.duration(moment().diff(user.team.trialEnd)).humanize(), | ||
244 | })} | ||
245 | </p> | ||
246 | <p> | ||
247 | {intl.formatMessage(messages.trialUpdateBillingInformation, { | ||
248 | license: planName, | ||
249 | })} | ||
207 | </p> | 250 | </p> |
208 | </> | 251 | </> |
209 | )} | 252 | )} |
210 | {user.isPremium && ( | 253 | <div className="manage-user-links"> |
211 | <div className="manage-user-links"> | 254 | <Button |
212 | <Button | 255 | label={intl.formatMessage(messages.manageSubscriptionButtonLabel)} |
213 | label={intl.formatMessage(messages.manageSubscriptionButtonLabel)} | 256 | className="franz-form__button--inverted" |
214 | className="franz-form__button--inverted" | 257 | onClick={openBilling} |
215 | onClick={openBilling} | 258 | /> |
216 | /> | 259 | <Button |
217 | <Button | 260 | label={intl.formatMessage(messages.invoicesButton)} |
218 | label={intl.formatMessage(messages.invoicesButton)} | 261 | className="franz-form__button--inverted" |
219 | className="franz-form__button--inverted" | 262 | onClick={openInvoices} |
220 | onClick={openInvoices} | 263 | /> |
221 | /> | 264 | </div> |
222 | </div> | ||
223 | )} | ||
224 | </div> | 265 | </div> |
225 | </div> | 266 | </div> |
226 | )} | 267 | )} |
227 | </> | 268 | {!user.isPremium && ( |
228 | )} | 269 | <div className="account franz-form"> |
229 | 270 | <div className="account__box"> | |
230 | {!user.isPremium && ( | 271 | <H2>{intl.formatMessage(messages.headlineUpgrade)}</H2> |
231 | isLoadingPlans ? ( | 272 | <SubscriptionForm /> |
232 | <Loader /> | 273 | </div> |
233 | ) : ( | ||
234 | <div className="account franz-form"> | ||
235 | <div className="account__box"> | ||
236 | <h2>{intl.formatMessage(messages.headlineUpgrade)}</h2> | ||
237 | <SubscriptionForm | ||
238 | onCloseWindow={onCloseSubscriptionWindow} | ||
239 | /> | ||
240 | </div> | 274 | </div> |
241 | </div> | 275 | )} |
242 | ) | 276 | </> |
243 | )} | 277 | )} |
244 | 278 | ||
245 | <div className="account franz-form"> | 279 | <div className="account franz-form"> |
246 | <div className="account__box"> | 280 | <div className="account__box"> |
247 | <h2>{intl.formatMessage(messages.headlineDangerZone)}</h2> | 281 | <H2>{intl.formatMessage(messages.headlineDangerZone)}</H2> |
248 | {!isDeleteAccountSuccessful && ( | 282 | {!isDeleteAccountSuccessful && ( |
249 | <div className="account__subscription"> | 283 | <div className="account__subscription"> |
250 | <p>{intl.formatMessage(messages.deleteInfo)}</p> | 284 | <p>{intl.formatMessage(messages.deleteInfo)}</p> |