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
|
import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import PropTypes from 'prop-types';
import { dialog, app } from '@electron/remote';
import { defineMessages, intlShape } from 'react-intl';
import FeaturesStore from '../../../stores/FeaturesStore';
import UserStore from '../../../stores/UserStore';
import PlanSelection from '../components/PlanSelection';
import ErrorBoundary from '../../../components/util/ErrorBoundary';
import { planSelectionStore } from '..';
const messages = defineMessages({
dialogTitle: {
id: 'feature.planSelection.fullscreen.dialog.title',
defaultMessage: '!!!Downgrade your Franz Plan',
},
dialogMessage: {
id: 'feature.planSelection.fullscreen.dialog.message',
defaultMessage: '!!!You\'re about to downgrade to our Free account. Are you sure? Click here instead to get more services and functionality for just {currency}{price} a month.',
},
dialogCTADowngrade: {
id: 'feature.planSelection.fullscreen.dialog.cta.downgrade',
defaultMessage: '!!!Downgrade to Free',
},
dialogCTAUpgrade: {
id: 'feature.planSelection.fullscreen.dialog.cta.upgrade',
defaultMessage: '!!!Choose Personal',
},
});
@inject('stores', 'actions') @observer
class PlanSelectionScreen extends Component {
static contextTypes = {
intl: intlShape,
};
upgradeAccount(planId) {
const { upgradeAccount } = this.props.actions.payment;
upgradeAccount({
planId,
});
}
render() {
if (!planSelectionStore || !planSelectionStore.isFeatureActive || !planSelectionStore.showPlanSelectionOverlay) {
return null;
}
const { intl } = this.context;
const { user, features } = this.props.stores;
const { isPersonalPlanAvailable, pricingConfig } = features.features;
const { plans, currency } = pricingConfig;
const { activateTrial } = this.props.actions.user;
const { downgradeAccount, hideOverlay } = this.props.actions.planSelection;
return (
<ErrorBoundary>
<PlanSelection
firstname={user.data.firstname}
plans={plans}
currency={currency}
upgradeAccount={(planId) => {
if (user.data.hadSubscription) {
this.upgradeAccount(planId);
} else {
activateTrial({
planId,
});
}
}}
stayOnFree={() => {
const selection = dialog.showMessageBoxSync(app.mainWindow, {
type: 'question',
message: intl.formatMessage(messages.dialogTitle),
detail: intl.formatMessage(messages.dialogMessage, {
currency,
price: plans.personal.yearly.price,
}),
buttons: [
intl.formatMessage(messages.dialogCTADowngrade),
intl.formatMessage(messages.dialogCTAUpgrade),
],
});
if (selection === 0) {
downgradeAccount();
hideOverlay();
} else {
this.upgradeAccount(plans.personal.yearly.id);
}
}}
subscriptionExpired={user.team && user.team.state === 'expired' && !user.team.userHasDowngraded}
hadSubscription={user.data.hadSubscription}
isPersonalPlanAvailable={isPersonalPlanAvailable}
/>
</ErrorBoundary>
);
}
}
export default PlanSelectionScreen;
PlanSelectionScreen.wrappedComponent.propTypes = {
stores: PropTypes.shape({
features: PropTypes.instanceOf(FeaturesStore).isRequired,
user: PropTypes.instanceOf(UserStore).isRequired,
}).isRequired,
actions: PropTypes.shape({
payment: PropTypes.shape({
upgradeAccount: PropTypes.func.isRequired,
}),
planSelection: PropTypes.shape({
downgradeAccount: PropTypes.func.isRequired,
hideOverlay: PropTypes.func.isRequired,
}),
user: PropTypes.shape({
activateTrial: PropTypes.func.isRequired,
}),
}).isRequired,
};
|
