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