diff options
Diffstat (limited to 'src/components/ui/ActivateTrialButton/index.js')
-rw-r--r-- | src/components/ui/ActivateTrialButton/index.js | 125 |
1 files changed, 125 insertions, 0 deletions
diff --git a/src/components/ui/ActivateTrialButton/index.js b/src/components/ui/ActivateTrialButton/index.js new file mode 100644 index 000000000..e0637da90 --- /dev/null +++ b/src/components/ui/ActivateTrialButton/index.js | |||
@@ -0,0 +1,125 @@ | |||
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 | |||
12 | const messages = defineMessages({ | ||
13 | action: { | ||
14 | id: 'feature.delayApp.upgrade.action', | ||
15 | defaultMessage: '!!!Get a Franz Supporter License', | ||
16 | }, | ||
17 | actionTrial: { | ||
18 | id: 'feature.delayApp.trial.action', | ||
19 | defaultMessage: '!!!Yes, I want the free 14 day trial of Franz Professional', | ||
20 | }, | ||
21 | shortAction: { | ||
22 | id: 'feature.delayApp.upgrade.actionShort', | ||
23 | defaultMessage: '!!!Upgrade account', | ||
24 | }, | ||
25 | shortActionTrial: { | ||
26 | id: 'feature.delayApp.trial.actionShort', | ||
27 | defaultMessage: '!!!Activate the free Franz Professional trial', | ||
28 | }, | ||
29 | noStringsAttachedHeadline: { | ||
30 | id: 'pricing.trial.terms.headline', | ||
31 | defaultMessage: '!!!No strings attached', | ||
32 | }, | ||
33 | noCreditCard: { | ||
34 | id: 'pricing.trial.terms.noCreditCard', | ||
35 | defaultMessage: '!!!No credit card required', | ||
36 | }, | ||
37 | automaticTrialEnd: { | ||
38 | id: 'pricing.trial.terms.automaticTrialEnd', | ||
39 | defaultMessage: '!!!Your free trial ends automatically after 14 days', | ||
40 | }, | ||
41 | }); | ||
42 | |||
43 | @inject('stores', 'actions') @observer | ||
44 | class ActivateTrialButton extends Component { | ||
45 | static propTypes = { | ||
46 | className: PropTypes.string, | ||
47 | short: PropTypes.bool, | ||
48 | gaEventInfo: PropTypes.shape({ | ||
49 | category: PropTypes.string.isRequired, | ||
50 | event: PropTypes.string.isRequired, | ||
51 | label: PropTypes.string, | ||
52 | }), | ||
53 | }; | ||
54 | |||
55 | static defaultProps = { | ||
56 | className: '', | ||
57 | short: false, | ||
58 | gaEventInfo: null, | ||
59 | } | ||
60 | |||
61 | static contextTypes = { | ||
62 | intl: intlShape, | ||
63 | }; | ||
64 | |||
65 | handleCTAClick() { | ||
66 | const { actions, stores, gaEventInfo } = this.props; | ||
67 | const { hadSubscription } = stores.user.data; | ||
68 | // const { defaultTrialPlan } = stores.features.features; | ||
69 | |||
70 | let label = ''; | ||
71 | if (!hadSubscription) { | ||
72 | // actions.user.activateTrial({ planId: defaultTrialPlan }); | ||
73 | |||
74 | label = 'Start Trial'; | ||
75 | } else { | ||
76 | label = 'Upgrade Account'; | ||
77 | } | ||
78 | |||
79 | actions.ui.openSettings({ path: 'user' }); | ||
80 | |||
81 | if (gaEventInfo) { | ||
82 | const { category, event } = gaEventInfo; | ||
83 | gaEvent(category, event, label); | ||
84 | } | ||
85 | } | ||
86 | |||
87 | render() { | ||
88 | const { stores, className, short } = this.props; | ||
89 | const { intl } = this.context; | ||
90 | |||
91 | const { hadSubscription } = stores.user.data; | ||
92 | |||
93 | let label; | ||
94 | if (hadSubscription) { | ||
95 | label = short ? messages.shortAction : messages.action; | ||
96 | } else { | ||
97 | label = short ? messages.shortActionTrial : messages.actionTrial; | ||
98 | } | ||
99 | |||
100 | return ( | ||
101 | <Button | ||
102 | label={intl.formatMessage(label)} | ||
103 | className={classnames({ | ||
104 | [className]: className, | ||
105 | })} | ||
106 | buttonType="inverted" | ||
107 | onClick={this.handleCTAClick.bind(this)} | ||
108 | busy={stores.user.activateTrialRequest.isExecuting} | ||
109 | /> | ||
110 | ); | ||
111 | } | ||
112 | } | ||
113 | |||
114 | export default ActivateTrialButton; | ||
115 | |||
116 | ActivateTrialButton.wrappedComponent.propTypes = { | ||
117 | stores: PropTypes.shape({ | ||
118 | user: PropTypes.instanceOf(UserStore).isRequired, | ||
119 | }).isRequired, | ||
120 | actions: PropTypes.shape({ | ||
121 | ui: PropTypes.shape({ | ||
122 | openSettings: PropTypes.func.isRequired, | ||
123 | }).isRequired, | ||
124 | }).isRequired, | ||
125 | }; | ||