diff options
Diffstat (limited to 'src/components/settings/account/AccountDashboard.js')
-rw-r--r-- | src/components/settings/account/AccountDashboard.js | 199 |
1 files changed, 64 insertions, 135 deletions
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js index 9c9543749..3f6964b6b 100644 --- a/src/components/settings/account/AccountDashboard.js +++ b/src/components/settings/account/AccountDashboard.js | |||
@@ -3,12 +3,11 @@ 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 moment from 'moment'; | 6 | import { ProBadge } from '@meetfranz/ui'; |
7 | 7 | ||
8 | import Loader from '../../ui/Loader'; | 8 | import Loader from '../../ui/Loader'; |
9 | import Button from '../../ui/Button'; | 9 | import Button from '../../ui/Button'; |
10 | import Infobox from '../../ui/Infobox'; | 10 | import Infobox from '../../ui/Infobox'; |
11 | import Link from '../../ui/Link'; | ||
12 | import SubscriptionForm from '../../../containers/subscription/SubscriptionFormScreen'; | 11 | import SubscriptionForm from '../../../containers/subscription/SubscriptionFormScreen'; |
13 | 12 | ||
14 | const messages = defineMessages({ | 13 | const messages = defineMessages({ |
@@ -24,10 +23,6 @@ const messages = defineMessages({ | |||
24 | id: 'settings.account.headlineUpgrade', | 23 | id: 'settings.account.headlineUpgrade', |
25 | defaultMessage: '!!!Upgrade your Account', | 24 | defaultMessage: '!!!Upgrade your Account', |
26 | }, | 25 | }, |
27 | headlineInvoices: { | ||
28 | id: 'settings.account.headlineInvoices', | ||
29 | defaultMessage: '!!Invoices', | ||
30 | }, | ||
31 | headlineDangerZone: { | 26 | headlineDangerZone: { |
32 | id: 'settings.account.headlineDangerZone', | 27 | id: 'settings.account.headlineDangerZone', |
33 | defaultMessage: '!!Danger Zone', | 28 | defaultMessage: '!!Danger Zone', |
@@ -44,14 +39,14 @@ const messages = defineMessages({ | |||
44 | id: 'settings.account.accountType.premium', | 39 | id: 'settings.account.accountType.premium', |
45 | defaultMessage: '!!!Premium Supporter Account', | 40 | defaultMessage: '!!!Premium Supporter Account', |
46 | }, | 41 | }, |
47 | accountTypeEnterprise: { | ||
48 | id: 'settings.account.accountType.enterprise', | ||
49 | defaultMessage: '!!!Enterprise Account', | ||
50 | }, | ||
51 | accountEditButton: { | 42 | accountEditButton: { |
52 | id: 'settings.account.account.editButton', | 43 | id: 'settings.account.account.editButton', |
53 | defaultMessage: '!!!Edit Account', | 44 | defaultMessage: '!!!Edit Account', |
54 | }, | 45 | }, |
46 | invoicesButton: { | ||
47 | id: 'settings.account.headlineInvoices', | ||
48 | defaultMessage: '!!Invoices', | ||
49 | }, | ||
55 | invoiceDownload: { | 50 | invoiceDownload: { |
56 | id: 'settings.account.invoiceDownload', | 51 | id: 'settings.account.invoiceDownload', |
57 | defaultMessage: '!!!Download', | 52 | defaultMessage: '!!!Download', |
@@ -81,19 +76,17 @@ const messages = defineMessages({ | |||
81 | export default @observer class AccountDashboard extends Component { | 76 | export default @observer class AccountDashboard extends Component { |
82 | static propTypes = { | 77 | static propTypes = { |
83 | user: MobxPropTypes.observableObject.isRequired, | 78 | user: MobxPropTypes.observableObject.isRequired, |
84 | orders: MobxPropTypes.arrayOrObservableArray.isRequired, | ||
85 | isLoading: PropTypes.bool.isRequired, | 79 | isLoading: PropTypes.bool.isRequired, |
86 | isLoadingOrdersInfo: PropTypes.bool.isRequired, | ||
87 | isLoadingPlans: PropTypes.bool.isRequired, | 80 | isLoadingPlans: PropTypes.bool.isRequired, |
88 | isCreatingPaymentDashboardUrl: PropTypes.bool.isRequired, | ||
89 | userInfoRequestFailed: PropTypes.bool.isRequired, | 81 | userInfoRequestFailed: PropTypes.bool.isRequired, |
90 | retryUserInfoRequest: PropTypes.func.isRequired, | 82 | retryUserInfoRequest: PropTypes.func.isRequired, |
91 | openDashboard: PropTypes.func.isRequired, | ||
92 | openExternalUrl: PropTypes.func.isRequired, | ||
93 | onCloseSubscriptionWindow: PropTypes.func.isRequired, | 83 | onCloseSubscriptionWindow: PropTypes.func.isRequired, |
94 | deleteAccount: PropTypes.func.isRequired, | 84 | deleteAccount: PropTypes.func.isRequired, |
95 | isLoadingDeleteAccount: PropTypes.bool.isRequired, | 85 | isLoadingDeleteAccount: PropTypes.bool.isRequired, |
96 | isDeleteAccountSuccessful: PropTypes.bool.isRequired, | 86 | isDeleteAccountSuccessful: PropTypes.bool.isRequired, |
87 | openEditAccount: PropTypes.func.isRequired, | ||
88 | openBilling: PropTypes.func.isRequired, | ||
89 | openInvoices: PropTypes.func.isRequired, | ||
97 | }; | 90 | }; |
98 | 91 | ||
99 | static contextTypes = { | 92 | static contextTypes = { |
@@ -103,12 +96,7 @@ export default @observer class AccountDashboard extends Component { | |||
103 | render() { | 96 | render() { |
104 | const { | 97 | const { |
105 | user, | 98 | user, |
106 | orders, | ||
107 | isLoading, | 99 | isLoading, |
108 | isCreatingPaymentDashboardUrl, | ||
109 | openDashboard, | ||
110 | openExternalUrl, | ||
111 | isLoadingOrdersInfo, | ||
112 | isLoadingPlans, | 100 | isLoadingPlans, |
113 | userInfoRequestFailed, | 101 | userInfoRequestFailed, |
114 | retryUserInfoRequest, | 102 | retryUserInfoRequest, |
@@ -116,6 +104,9 @@ export default @observer class AccountDashboard extends Component { | |||
116 | deleteAccount, | 104 | deleteAccount, |
117 | isLoadingDeleteAccount, | 105 | isLoadingDeleteAccount, |
118 | isDeleteAccountSuccessful, | 106 | isDeleteAccountSuccessful, |
107 | openEditAccount, | ||
108 | openBilling, | ||
109 | openInvoices, | ||
119 | } = this.props; | 110 | } = this.props; |
120 | const { intl } = this.context; | 111 | const { intl } = this.context; |
121 | 112 | ||
@@ -153,116 +144,56 @@ export default @observer class AccountDashboard extends Component { | |||
153 | src="./assets/images/logo.svg" | 144 | src="./assets/images/logo.svg" |
154 | alt="" | 145 | alt="" |
155 | /> | 146 | /> |
156 | {user.isPremium && ( | ||
157 | <span | ||
158 | className="account__avatar-premium emoji" | ||
159 | data-tip="Premium Supporter Account" | ||
160 | > | ||
161 | <img src="./assets/images/emoji/star.png" alt="" /> | ||
162 | </span> | ||
163 | )} | ||
164 | </div> | 147 | </div> |
165 | <div className="account__info"> | 148 | <div className="account__info"> |
166 | <h2> | 149 | <h2> |
167 | {`${user.firstname} ${user.lastname}`} | 150 | <span className="username">{`${user.firstname} ${user.lastname}`}</span> |
151 | {user.isPremium && ( | ||
152 | <> | ||
153 | {' '} | ||
154 | <ProBadge /> | ||
155 | <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span> | ||
156 | </> | ||
157 | )} | ||
168 | </h2> | 158 | </h2> |
169 | {user.organization && `${user.organization}, `} | 159 | {user.organization && `${user.organization}, `} |
170 | {user.email} | 160 | {user.email} |
171 | <br /> | ||
172 | {!user.isEnterprise && !user.isPremium && ( | ||
173 | <span className="badge badge">{intl.formatMessage(messages.accountTypeBasic)}</span> | ||
174 | )} | ||
175 | {user.isPremium && ( | 161 | {user.isPremium && ( |
176 | <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span> | 162 | <div className="manage-user-links"> |
177 | )} | 163 | <Button |
178 | {user.isEnterprise && ( | 164 | label={intl.formatMessage(messages.accountEditButton)} |
179 | <span className="badge badge--success">{intl.formatMessage(messages.accountTypeEnterprise)}</span> | 165 | className="franz-form__button--inverted" |
166 | onClick={openEditAccount} | ||
167 | /> | ||
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> | ||
180 | )} | 183 | )} |
181 | </div> | 184 | </div> |
182 | <Link to="/settings/user/edit" className="button"> | 185 | {!user.isPremium && ( |
183 | {intl.formatMessage(messages.accountEditButton)} | 186 | <Button |
184 | </Link> | 187 | label={intl.formatMessage(messages.accountEditButton)} |
185 | {user.emailValidated} | 188 | className="franz-form__button--inverted" |
186 | </div> | 189 | onClick={openEditAccount} |
187 | </div> | 190 | /> |
188 | )} | ||
189 | |||
190 | {user.isSubscriptionOwner && ( | ||
191 | isLoadingOrdersInfo ? ( | ||
192 | <Loader /> | ||
193 | ) : ( | ||
194 | <div className="account franz-form"> | ||
195 | {orders.length > 0 && ( | ||
196 | <Fragment> | ||
197 | <div className="account__box"> | ||
198 | <h2>{intl.formatMessage(messages.headlineSubscription)}</h2> | ||
199 | <div className="account__subscription"> | ||
200 | {orders[0].name} | ||
201 | <span className="badge">{orders[0].price}</span> | ||
202 | <Button | ||
203 | label={intl.formatMessage(messages.manageSubscriptionButtonLabel)} | ||
204 | className="account__subscription-button franz-form__button--inverted" | ||
205 | loaded={!isCreatingPaymentDashboardUrl} | ||
206 | onClick={() => openDashboard()} | ||
207 | /> | ||
208 | </div> | ||
209 | </div> | ||
210 | <div className="account__box"> | ||
211 | <h2>{intl.formatMessage(messages.headlineInvoices)}</h2> | ||
212 | <table className="invoices"> | ||
213 | <tbody> | ||
214 | {orders.map(order => ( | ||
215 | <tr key={order.id}> | ||
216 | <td className="invoices__date"> | ||
217 | {moment(order.date).format('DD.MM.YYYY')} | ||
218 | </td> | ||
219 | <td className="invoices__action"> | ||
220 | <button | ||
221 | type="button" | ||
222 | onClick={() => openExternalUrl(order.invoiceUrl)} | ||
223 | > | ||
224 | {intl.formatMessage(messages.invoiceDownload)} | ||
225 | </button> | ||
226 | </td> | ||
227 | </tr> | ||
228 | ))} | ||
229 | </tbody> | ||
230 | </table> | ||
231 | </div> | ||
232 | </Fragment> | ||
233 | )} | 191 | )} |
234 | </div> | 192 | </div> |
235 | ) | ||
236 | )} | ||
237 | |||
238 | {user.isEnterprise && ( | ||
239 | <div className="account"> | ||
240 | <div className="account__box"> | ||
241 | <h2>{user.company.name}</h2> | ||
242 | <p> | ||
243 | Technical contact: | ||
244 | <Link | ||
245 | className="link" | ||
246 | target="_blank" | ||
247 | to={`mailto:${user.company.contact.technical}?subject=Franz`} | ||
248 | > | ||
249 | {user.company.contact.technical} | ||
250 | </Link> | ||
251 | <br /> | ||
252 | General contact: | ||
253 | <Link | ||
254 | className="link" | ||
255 | target="_blank" | ||
256 | to={`mailto:${user.company.contact.default}?subject=Franz`} | ||
257 | > | ||
258 | {user.company.contact.default} | ||
259 | </Link> | ||
260 | </p> | ||
261 | </div> | ||
262 | </div> | 193 | </div> |
263 | )} | 194 | )} |
264 | 195 | ||
265 | {!user.isEnterprise && !user.isPremium && ( | 196 | {!user.isPremium && ( |
266 | isLoadingPlans ? ( | 197 | isLoadingPlans ? ( |
267 | <Loader /> | 198 | <Loader /> |
268 | ) : ( | 199 | ) : ( |
@@ -277,27 +208,25 @@ export default @observer class AccountDashboard extends Component { | |||
277 | ) | 208 | ) |
278 | )} | 209 | )} |
279 | 210 | ||
280 | {!user.isEnterprise && ( | 211 | <div className="account franz-form"> |
281 | <div className="account franz-form"> | 212 | <div className="account__box"> |
282 | <div className="account__box"> | 213 | <h2>{intl.formatMessage(messages.headlineDangerZone)}</h2> |
283 | <h2>{intl.formatMessage(messages.headlineDangerZone)}</h2> | 214 | {!isDeleteAccountSuccessful && ( |
284 | {!isDeleteAccountSuccessful && ( | 215 | <div className="account__subscription"> |
285 | <div className="account__subscription"> | 216 | <p>{intl.formatMessage(messages.deleteInfo)}</p> |
286 | <p>{intl.formatMessage(messages.deleteInfo)}</p> | 217 | <Button |
287 | <Button | 218 | label={intl.formatMessage(messages.deleteAccount)} |
288 | label={intl.formatMessage(messages.deleteAccount)} | 219 | buttonType="danger" |
289 | buttonType="danger" | 220 | onClick={() => deleteAccount()} |
290 | onClick={() => deleteAccount()} | 221 | loaded={!isLoadingDeleteAccount} |
291 | loaded={!isLoadingDeleteAccount} | 222 | /> |
292 | /> | ||
293 | </div> | ||
294 | )} | ||
295 | {isDeleteAccountSuccessful && ( | ||
296 | <p>{intl.formatMessage(messages.deleteEmailSent)}</p> | ||
297 | )} | ||
298 | </div> | 223 | </div> |
224 | )} | ||
225 | {isDeleteAccountSuccessful && ( | ||
226 | <p>{intl.formatMessage(messages.deleteEmailSent)}</p> | ||
227 | )} | ||
299 | </div> | 228 | </div> |
300 | )} | 229 | </div> |
301 | </Fragment> | 230 | </Fragment> |
302 | )} | 231 | )} |
303 | </div> | 232 | </div> |