diff options
Diffstat (limited to 'src/features/planSelection/containers')
-rw-r--r-- | src/features/planSelection/containers/PlanSelectionScreen.js | 132 |
1 files changed, 132 insertions, 0 deletions
diff --git a/src/features/planSelection/containers/PlanSelectionScreen.js b/src/features/planSelection/containers/PlanSelectionScreen.js new file mode 100644 index 000000000..cb62f45d3 --- /dev/null +++ b/src/features/planSelection/containers/PlanSelectionScreen.js | |||
@@ -0,0 +1,132 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import { observer, inject } from 'mobx-react'; | ||
3 | import PropTypes from 'prop-types'; | ||
4 | import { remote } from 'electron'; | ||
5 | import { defineMessages, intlShape } from 'react-intl'; | ||
6 | |||
7 | import FeaturesStore from '../../../stores/FeaturesStore'; | ||
8 | import UserStore from '../../../stores/UserStore'; | ||
9 | import PlanSelection from '../components/PlanSelection'; | ||
10 | import ErrorBoundary from '../../../components/util/ErrorBoundary'; | ||
11 | import { planSelectionStore, GA_CATEGORY_PLAN_SELECTION } from '..'; | ||
12 | import { gaEvent, gaPage } from '../../../lib/analytics'; | ||
13 | |||
14 | const { dialog, app } = remote; | ||
15 | |||
16 | const messages = defineMessages({ | ||
17 | dialogTitle: { | ||
18 | id: 'feature.planSelection.fullscreen.dialog.title', | ||
19 | defaultMessage: '!!!Downgrade your Franz Plan', | ||
20 | }, | ||
21 | dialogMessage: { | ||
22 | id: 'feature.planSelection.fullscreen.dialog.message', | ||
23 | 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.', | ||
24 | }, | ||
25 | dialogCTADowngrade: { | ||
26 | id: 'feature.planSelection.fullscreen.dialog.cta.downgrade', | ||
27 | defaultMessage: '!!!Downgrade to Free', | ||
28 | }, | ||
29 | dialogCTAUpgrade: { | ||
30 | id: 'feature.planSelection.fullscreen.dialog.cta.upgrade', | ||
31 | defaultMessage: '!!!Choose Personal', | ||
32 | }, | ||
33 | }); | ||
34 | |||
35 | @inject('stores', 'actions') @observer | ||
36 | class PlanSelectionScreen extends Component { | ||
37 | static contextTypes = { | ||
38 | intl: intlShape, | ||
39 | }; | ||
40 | |||
41 | upgradeAccount(planId) { | ||
42 | const { upgradeAccount } = this.props.actions.payment; | ||
43 | |||
44 | upgradeAccount({ | ||
45 | planId, | ||
46 | }); | ||
47 | } | ||
48 | |||
49 | render() { | ||
50 | if (!planSelectionStore || !planSelectionStore.isFeatureActive || !planSelectionStore.showPlanSelectionOverlay) { | ||
51 | return null; | ||
52 | } | ||
53 | |||
54 | const { intl } = this.context; | ||
55 | |||
56 | const { user, features } = this.props.stores; | ||
57 | const { plans, currency } = features.features.pricingConfig; | ||
58 | const { activateTrial } = this.props.actions.user; | ||
59 | const { downgradeAccount, hideOverlay } = this.props.actions.planSelection; | ||
60 | |||
61 | return ( | ||
62 | <ErrorBoundary> | ||
63 | <PlanSelection | ||
64 | firstname={user.data.firstname} | ||
65 | plans={plans} | ||
66 | currency={currency} | ||
67 | upgradeAccount={(planId) => { | ||
68 | if (user.data.hadSubscription) { | ||
69 | this.upgradeAccount(planId); | ||
70 | |||
71 | gaEvent(GA_CATEGORY_PLAN_SELECTION, 'SelectPlan', planId); | ||
72 | } else { | ||
73 | activateTrial({ | ||
74 | planId, | ||
75 | }); | ||
76 | } | ||
77 | }} | ||
78 | stayOnFree={() => { | ||
79 | gaPage('/select-plan/downgrade'); | ||
80 | |||
81 | const selection = dialog.showMessageBoxSync(app.mainWindow, { | ||
82 | type: 'question', | ||
83 | message: intl.formatMessage(messages.dialogTitle), | ||
84 | detail: intl.formatMessage(messages.dialogMessage, { | ||
85 | currency, | ||
86 | price: plans.personal.yearly.price, | ||
87 | }), | ||
88 | buttons: [ | ||
89 | intl.formatMessage(messages.dialogCTADowngrade), | ||
90 | intl.formatMessage(messages.dialogCTAUpgrade), | ||
91 | ], | ||
92 | }); | ||
93 | |||
94 | gaEvent(GA_CATEGORY_PLAN_SELECTION, 'SelectPlan', 'Stay on Free'); | ||
95 | |||
96 | if (selection === 0) { | ||
97 | downgradeAccount(); | ||
98 | hideOverlay(); | ||
99 | } else { | ||
100 | this.upgradeAccount(plans.personal.yearly.id); | ||
101 | |||
102 | gaEvent(GA_CATEGORY_PLAN_SELECTION, 'SelectPlan', 'Downgrade'); | ||
103 | } | ||
104 | }} | ||
105 | subscriptionExpired={user.team && user.team.state === 'expired' && !user.team.userHasDowngraded} | ||
106 | hadSubscription={user.data.hadSubscription} | ||
107 | /> | ||
108 | </ErrorBoundary> | ||
109 | ); | ||
110 | } | ||
111 | } | ||
112 | |||
113 | export default PlanSelectionScreen; | ||
114 | |||
115 | PlanSelectionScreen.wrappedComponent.propTypes = { | ||
116 | stores: PropTypes.shape({ | ||
117 | features: PropTypes.instanceOf(FeaturesStore).isRequired, | ||
118 | user: PropTypes.instanceOf(UserStore).isRequired, | ||
119 | }).isRequired, | ||
120 | actions: PropTypes.shape({ | ||
121 | payment: PropTypes.shape({ | ||
122 | upgradeAccount: PropTypes.func.isRequired, | ||
123 | }), | ||
124 | planSelection: PropTypes.shape({ | ||
125 | downgradeAccount: PropTypes.func.isRequired, | ||
126 | hideOverlay: PropTypes.func.isRequired, | ||
127 | }), | ||
128 | user: PropTypes.shape({ | ||
129 | activateTrial: PropTypes.func.isRequired, | ||
130 | }), | ||
131 | }).isRequired, | ||
132 | }; | ||