aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/settings/account/AccountDashboard.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/settings/account/AccountDashboard.js')
-rw-r--r--src/components/settings/account/AccountDashboard.js159
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';
3import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; 3import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
4import { defineMessages, intlShape } from 'react-intl'; 4import { defineMessages, intlShape } from 'react-intl';
5import ReactTooltip from 'react-tooltip'; 5import ReactTooltip from 'react-tooltip';
6import { ProBadge, H1, H2 } from '@meetfranz/ui'; 6import { H1, H2 } from '@meetfranz/ui';
7import moment from 'moment';
8 7
9import Loader from '../../ui/Loader'; 8import Loader from '../../ui/Loader';
10import Button from '../../ui/Button'; 9import Button from '../../ui/Button';
11import Infobox from '../../ui/Infobox'; 10import Infobox from '../../ui/Infobox';
12import SubscriptionForm from '../../../containers/subscription/SubscriptionFormScreen';
13import { i18nPlanName } from '../../../helpers/plan-helpers';
14import { LOCAL_SERVER, LIVE_FRANZ_API } from '../../../config'; 11import { LOCAL_SERVER, LIVE_FRANZ_API } from '../../../config';
15 12
16const messages = defineMessages({ 13const 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({
107class AccountDashboard extends Component { 67class 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