diff options
Diffstat (limited to 'src/components/settings/account/AccountDashboard.js')
-rw-r--r-- | src/components/settings/account/AccountDashboard.js | 198 |
1 files changed, 133 insertions, 65 deletions
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js index 3f6964b6b..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"> |
@@ -135,82 +162,123 @@ export default @observer class AccountDashboard extends Component { | |||
135 | )} | 162 | )} |
136 | 163 | ||
137 | {!userInfoRequestFailed && ( | 164 | {!userInfoRequestFailed && ( |
138 | <Fragment> | 165 | <> |
139 | {!isLoading && ( | 166 | {!isLoading && ( |
140 | <div className="account"> | 167 | <> |
141 | <div className="account__box account__box--flex"> | 168 | <div className="account"> |
142 | <div className="account__avatar"> | 169 | <div className="account__box account__box--flex"> |
143 | <img | 170 | <div className="account__avatar"> |
144 | src="./assets/images/logo.svg" | 171 | <img |
145 | alt="" | 172 | src="./assets/images/logo.svg" |
146 | /> | 173 | alt="" |
147 | </div> | 174 | /> |
148 | <div className="account__info"> | 175 | </div> |
149 | <h2> | 176 | <div className="account__info"> |
150 | <span className="username">{`${user.firstname} ${user.lastname}`}</span> | 177 | <H1> |
178 | <span className="username">{`${user.firstname} ${user.lastname}`}</span> | ||
179 | {user.isPremium && ( | ||
180 | <> | ||
181 | {' '} | ||
182 | <ProBadge /> | ||
183 | {/* <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span> */} | ||
184 | </> | ||
185 | )} | ||
186 | </H1> | ||
187 | <p> | ||
188 | {user.organization && `${user.organization}, `} | ||
189 | {user.email} | ||
190 | </p> | ||
151 | {user.isPremium && ( | 191 | {user.isPremium && ( |
192 | <div className="manage-user-links"> | ||
193 | <Button | ||
194 | label={intl.formatMessage(messages.accountEditButton)} | ||
195 | className="franz-form__button--inverted" | ||
196 | onClick={openEditAccount} | ||
197 | /> | ||
198 | {/* {user.isSubscriptionOwner && ( | ||
199 | <> | ||
200 | <Button | ||
201 | label={intl.formatMessage(messages.manageSubscriptionButtonLabel)} | ||
202 | className="franz-form__button--inverted" | ||
203 | onClick={openBilling} | ||
204 | /> | ||
205 | <Button | ||
206 | label={intl.formatMessage(messages.invoicesButton)} | ||
207 | className="franz-form__button--inverted" | ||
208 | onClick={openInvoices} | ||
209 | /> | ||
210 | </> | ||
211 | )} */} | ||
212 | </div> | ||
213 | )} | ||
214 | </div> | ||
215 | {!user.isPremium && ( | ||
216 | <Button | ||
217 | label={intl.formatMessage(messages.accountEditButton)} | ||
218 | className="franz-form__button--inverted" | ||
219 | onClick={openEditAccount} | ||
220 | /> | ||
221 | )} | ||
222 | </div> | ||
223 | </div> | ||
224 | {user.isSubscriptionOwner && ( | ||
225 | <div className="account"> | ||
226 | <div className="account__box"> | ||
227 | <H2> | ||
228 | {intl.formatMessage(messages.yourLicense)} | ||
229 | </H2> | ||
230 | <H3> | ||
231 | {planName} | ||
232 | {user.team.isTrial && ( | ||
233 | <> | ||
234 | {' – '} | ||
235 | {intl.formatMessage(messages.trial)} | ||
236 | </> | ||
237 | )} | ||
238 | </H3> | ||
239 | {user.team.isTrial && ( | ||
152 | <> | 240 | <> |
153 | {' '} | 241 | <p> |
154 | <ProBadge /> | 242 | {intl.formatMessage(messages.trialEndsIn, { |
155 | <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span> | 243 | duration: moment.duration(moment().diff(user.team.trialEnd)).humanize(), |
244 | })} | ||
245 | </p> | ||
246 | <p> | ||
247 | {intl.formatMessage(messages.trialUpdateBillingInformation, { | ||
248 | license: planName, | ||
249 | })} | ||
250 | </p> | ||
156 | </> | 251 | </> |
157 | )} | 252 | )} |
158 | </h2> | ||
159 | {user.organization && `${user.organization}, `} | ||
160 | {user.email} | ||
161 | {user.isPremium && ( | ||
162 | <div className="manage-user-links"> | 253 | <div className="manage-user-links"> |
163 | <Button | 254 | <Button |
164 | label={intl.formatMessage(messages.accountEditButton)} | 255 | label={intl.formatMessage(messages.manageSubscriptionButtonLabel)} |
165 | className="franz-form__button--inverted" | 256 | className="franz-form__button--inverted" |
166 | onClick={openEditAccount} | 257 | onClick={openBilling} |
258 | /> | ||
259 | <Button | ||
260 | label={intl.formatMessage(messages.invoicesButton)} | ||
261 | className="franz-form__button--inverted" | ||
262 | onClick={openInvoices} | ||
167 | /> | 263 | /> |
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> | 264 | </div> |
183 | )} | 265 | </div> |
184 | </div> | 266 | </div> |
185 | {!user.isPremium && ( | 267 | )} |
186 | <Button | 268 | {!user.isPremium && ( |
187 | label={intl.formatMessage(messages.accountEditButton)} | 269 | <div className="account franz-form"> |
188 | className="franz-form__button--inverted" | 270 | <div className="account__box"> |
189 | onClick={openEditAccount} | 271 | <H2>{intl.formatMessage(messages.headlineUpgrade)}</H2> |
190 | /> | 272 | <SubscriptionForm /> |
191 | )} | 273 | </div> |
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> | 274 | </div> |
207 | </div> | 275 | )} |
208 | ) | 276 | </> |
209 | )} | 277 | )} |
210 | 278 | ||
211 | <div className="account franz-form"> | 279 | <div className="account franz-form"> |
212 | <div className="account__box"> | 280 | <div className="account__box"> |
213 | <h2>{intl.formatMessage(messages.headlineDangerZone)}</h2> | 281 | <H2>{intl.formatMessage(messages.headlineDangerZone)}</H2> |
214 | {!isDeleteAccountSuccessful && ( | 282 | {!isDeleteAccountSuccessful && ( |
215 | <div className="account__subscription"> | 283 | <div className="account__subscription"> |
216 | <p>{intl.formatMessage(messages.deleteInfo)}</p> | 284 | <p>{intl.formatMessage(messages.deleteInfo)}</p> |
@@ -227,7 +295,7 @@ export default @observer class AccountDashboard extends Component { | |||
227 | )} | 295 | )} |
228 | </div> | 296 | </div> |
229 | </div> | 297 | </div> |
230 | </Fragment> | 298 | </> |
231 | )} | 299 | )} |
232 | </div> | 300 | </div> |
233 | <ReactTooltip place="right" type="dark" effect="solid" /> | 301 | <ReactTooltip place="right" type="dark" effect="solid" /> |