diff options
Diffstat (limited to 'src/components/ui')
-rw-r--r-- | src/components/ui/UpgradeButton/index.js | 90 |
1 files changed, 90 insertions, 0 deletions
diff --git a/src/components/ui/UpgradeButton/index.js b/src/components/ui/UpgradeButton/index.js new file mode 100644 index 000000000..4aa494e38 --- /dev/null +++ b/src/components/ui/UpgradeButton/index.js | |||
@@ -0,0 +1,90 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { inject, observer } from 'mobx-react'; | ||
4 | import { defineMessages, intlShape } from 'react-intl'; | ||
5 | import classnames from 'classnames'; | ||
6 | |||
7 | import { Button } from '@meetfranz/forms'; | ||
8 | import { gaEvent } from '../../../lib/analytics'; | ||
9 | |||
10 | import UserStore from '../../../stores/UserStore'; | ||
11 | import ActivateTrialButton from '../ActivateTrialButton'; | ||
12 | |||
13 | const messages = defineMessages({ | ||
14 | upgradeToPro: { | ||
15 | id: 'global.upgradeButton.upgradeToPro', | ||
16 | defaultMessage: '!!!Upgrade to Franz Professional', | ||
17 | }, | ||
18 | }); | ||
19 | |||
20 | @inject('stores', 'actions') @observer | ||
21 | class UpgradeButton extends Component { | ||
22 | static propTypes = { | ||
23 | // eslint-disable-next-line | ||
24 | classes: PropTypes.object.isRequired, | ||
25 | className: PropTypes.string, | ||
26 | gaEventInfo: PropTypes.shape({ | ||
27 | category: PropTypes.string.isRequired, | ||
28 | event: PropTypes.string.isRequired, | ||
29 | label: PropTypes.string, | ||
30 | }), | ||
31 | requiresPro: PropTypes.bool, | ||
32 | }; | ||
33 | |||
34 | static defaultProps = { | ||
35 | className: '', | ||
36 | gaEventInfo: null, | ||
37 | requiresPro: false, | ||
38 | } | ||
39 | |||
40 | static contextTypes = { | ||
41 | intl: intlShape, | ||
42 | }; | ||
43 | |||
44 | handleCTAClick() { | ||
45 | const { actions, gaEventInfo } = this.props; | ||
46 | |||
47 | actions.ui.openSettings({ path: 'user' }); | ||
48 | if (gaEventInfo) { | ||
49 | const { category, event } = gaEventInfo; | ||
50 | gaEvent(category, event, 'Upgrade Account'); | ||
51 | } | ||
52 | } | ||
53 | |||
54 | render() { | ||
55 | const { stores, requiresPro } = this.props; | ||
56 | const { intl } = this.context; | ||
57 | |||
58 | const { isPremium, isPersonal } = stores.user; | ||
59 | |||
60 | if (isPremium && isPersonal && requiresPro) { | ||
61 | return ( | ||
62 | <Button | ||
63 | label={intl.formatMessage(messages.upgradeToPro)} | ||
64 | onClick={this.handleCTAClick.bind(this)} | ||
65 | className={this.props.className} | ||
66 | buttonType="inverted" | ||
67 | /> | ||
68 | ); | ||
69 | } | ||
70 | |||
71 | if (!isPremium) { | ||
72 | return <ActivateTrialButton {...this.props} />; | ||
73 | } | ||
74 | |||
75 | return null; | ||
76 | } | ||
77 | } | ||
78 | |||
79 | export default UpgradeButton; | ||
80 | |||
81 | UpgradeButton.wrappedComponent.propTypes = { | ||
82 | stores: PropTypes.shape({ | ||
83 | user: PropTypes.instanceOf(UserStore).isRequired, | ||
84 | }).isRequired, | ||
85 | actions: PropTypes.shape({ | ||
86 | ui: PropTypes.shape({ | ||
87 | openSettings: PropTypes.func.isRequired, | ||
88 | }).isRequired, | ||
89 | }).isRequired, | ||
90 | }; | ||