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.js147
1 files changed, 18 insertions, 129 deletions
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 68d88e218..d3d75a979 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({
@@ -30,18 +27,6 @@ const messages = defineMessages({
30 id: 'settings.account.manageSubscription.label', 27 id: 'settings.account.manageSubscription.label',
31 defaultMessage: '!!!Manage your subscription', 28 defaultMessage: '!!!Manage your subscription',
32 }, 29 },
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: { 30 accountEditButton: {
46 id: 'settings.account.account.editButton', 31 id: 'settings.account.account.editButton',
47 defaultMessage: '!!!Edit Account', 32 defaultMessage: '!!!Edit Account',
@@ -76,23 +61,10 @@ const messages = defineMessages({
76 defaultMessage: 61 defaultMessage:
77 '!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!', 62 '!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!',
78 }, 63 },
79 trial: {
80 id: 'settings.account.trial',
81 defaultMessage: '!!!Free Trial',
82 },
83 yourLicense: { 64 yourLicense: {
84 id: 'settings.account.yourLicense', 65 id: 'settings.account.yourLicense',
85 defaultMessage: '!!!Your Franz License:', 66 defaultMessage: '!!!Your Franz License:',
86 }, 67 },
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: { 68 accountUnavailable: {
97 id: 'settings.account.accountUnavailable', 69 id: 'settings.account.accountUnavailable',
98 defaultMessage: 'Account is unavailable', 70 defaultMessage: 'Account is unavailable',
@@ -107,8 +79,6 @@ const messages = defineMessages({
107class AccountDashboard extends Component { 79class AccountDashboard extends Component {
108 static propTypes = { 80 static propTypes = {
109 user: MobxPropTypes.observableObject.isRequired, 81 user: MobxPropTypes.observableObject.isRequired,
110 isPremiumOverrideUser: PropTypes.bool.isRequired,
111 isProUser: PropTypes.bool.isRequired,
112 isLoading: PropTypes.bool.isRequired, 82 isLoading: PropTypes.bool.isRequired,
113 userInfoRequestFailed: PropTypes.bool.isRequired, 83 userInfoRequestFailed: PropTypes.bool.isRequired,
114 retryUserInfoRequest: PropTypes.func.isRequired, 84 retryUserInfoRequest: PropTypes.func.isRequired,
@@ -116,10 +86,7 @@ class AccountDashboard extends Component {
116 isLoadingDeleteAccount: PropTypes.bool.isRequired, 86 isLoadingDeleteAccount: PropTypes.bool.isRequired,
117 isDeleteAccountSuccessful: PropTypes.bool.isRequired, 87 isDeleteAccountSuccessful: PropTypes.bool.isRequired,
118 openEditAccount: PropTypes.func.isRequired, 88 openEditAccount: PropTypes.func.isRequired,
119 openBilling: PropTypes.func.isRequired,
120 upgradeToPro: PropTypes.func.isRequired,
121 openInvoices: PropTypes.func.isRequired, 89 openInvoices: PropTypes.func.isRequired,
122 onCloseSubscriptionWindow: PropTypes.func.isRequired,
123 server: PropTypes.string.isRequired, 90 server: PropTypes.string.isRequired,
124 }; 91 };
125 92
@@ -130,8 +97,6 @@ class AccountDashboard extends Component {
130 render() { 97 render() {
131 const { 98 const {
132 user, 99 user,
133 isPremiumOverrideUser,
134 isProUser,
135 isLoading, 100 isLoading,
136 userInfoRequestFailed, 101 userInfoRequestFailed,
137 retryUserInfoRequest, 102 retryUserInfoRequest,
@@ -139,20 +104,11 @@ class AccountDashboard extends Component {
139 isLoadingDeleteAccount, 104 isLoadingDeleteAccount,
140 isDeleteAccountSuccessful, 105 isDeleteAccountSuccessful,
141 openEditAccount, 106 openEditAccount,
142 openBilling,
143 upgradeToPro,
144 openInvoices, 107 openInvoices,
145 onCloseSubscriptionWindow,
146 server, 108 server,
147 } = this.props; 109 } = this.props;
148 const { intl } = this.context; 110 const { intl } = this.context;
149 111
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; 112 const isUsingWithoutAccount = server === LOCAL_SERVER;
157 const isUsingFranzServer = server === LIVE_FRANZ_API; 113 const isUsingFranzServer = server === LIVE_FRANZ_API;
158 114
@@ -210,98 +166,40 @@ class AccountDashboard extends Component {
210 <div className="account__info"> 166 <div className="account__info">
211 <H1> 167 <H1>
212 <span className="username">{`${user.firstname} ${user.lastname}`}</span> 168 <span className="username">{`${user.firstname} ${user.lastname}`}</span>
213 {user.isPremium && (
214 <>
215 {' '}
216 <ProBadge />
217 </>
218 )}
219 </H1> 169 </H1>
220 <p> 170 <p>
221 {user.organization && `${user.organization}, `} 171 {user.organization && `${user.organization}, `}
222 {user.email} 172 {user.email}
223 </p> 173 </p>
224 {user.isPremium && ( 174 <div className="manage-user-links">
225 <div className="manage-user-links"> 175 <Button
226 <Button 176 label={intl.formatMessage(
227 label={intl.formatMessage( 177 messages.accountEditButton,
228 messages.accountEditButton, 178 )}
229 )} 179 className="franz-form__button--inverted"
230 className="franz-form__button--inverted" 180 onClick={openEditAccount}
231 onClick={openEditAccount} 181 />
232 /> 182 </div>
233 </div>
234 )}
235 </div> 183 </div>
236 {!user.isPremium && ( 184 <Button
237 <Button 185 label={intl.formatMessage(
238 label={intl.formatMessage( 186 messages.accountEditButton,
239 messages.accountEditButton, 187 )}
240 )} 188 className="franz-form__button--inverted"
241 className="franz-form__button--inverted" 189 onClick={openEditAccount}
242 onClick={openEditAccount} 190 />
243 />
244 )}
245 </div> 191 </div>
246 </div> 192 </div>
247 {user.isPremium && user.isSubscriptionOwner && isUsingFranzServer && ( 193 {user.isSubscriptionOwner && isUsingFranzServer && (
248 <div className="account"> 194 <div className="account">
249 <div className="account__box"> 195 <div className="account__box">
250 <H2>{intl.formatMessage(messages.yourLicense)}</H2> 196 <H2>{intl.formatMessage(messages.yourLicense)}</H2>
251 <p> 197 <p>
252 Franz 198 Franz
253 {' '}
254 {isPremiumOverrideUser ? 'Premium' : planName}
255 {user.team.isTrial && (
256 <>
257 {' – '}
258 {intl.formatMessage(messages.trial)}
259 </>
260 )}
261 </p> 199 </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"> 200 <div className="manage-user-links">
296 <Button 201 <Button
297 label={intl.formatMessage( 202 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, 203 messages.invoicesButton,
306 )} 204 )}
307 className="franz-form__button--inverted" 205 className="franz-form__button--inverted"
@@ -311,15 +209,6 @@ class AccountDashboard extends Component {
311 </div> 209 </div>
312 </div> 210 </div>
313 )} 211 )}
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 </> 212 </>
324 )} 213 )}
325 214