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