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.js198
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 @@
1import React, { Component, Fragment } from 'react'; 1import React, { Component } from 'react';
2import PropTypes from 'prop-types'; 2import 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 } from '@meetfranz/ui'; 6import {
7 ProBadge, H2, H1, H3,
8} from '@meetfranz/ui';
9import moment from 'moment';
7 10
8import Loader from '../../ui/Loader'; 11import Loader from '../../ui/Loader';
9import Button from '../../ui/Button'; 12import Button from '../../ui/Button';
10import Infobox from '../../ui/Infobox'; 13import Infobox from '../../ui/Infobox';
11import SubscriptionForm from '../../../containers/subscription/SubscriptionFormScreen'; 14import SubscriptionForm from '../../../containers/subscription/SubscriptionFormScreen';
15import { i18nPlanName } from '../../../helpers/plan-helpers';
12 16
13const messages = defineMessages({ 17const 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
76export default @observer class AccountDashboard extends Component { 96export 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" />
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2024-09-10 15:04:08 +0000