diff options
Diffstat (limited to 'src/features/planSelection')
-rw-r--r-- | src/features/planSelection/components/PlanSelection.js | 123 | ||||
-rw-r--r-- | src/features/planSelection/containers/PlanSelectionScreen.js | 13 |
2 files changed, 77 insertions, 59 deletions
diff --git a/src/features/planSelection/components/PlanSelection.js b/src/features/planSelection/components/PlanSelection.js index d26cc08a2..9cd592083 100644 --- a/src/features/planSelection/components/PlanSelection.js +++ b/src/features/planSelection/components/PlanSelection.js | |||
@@ -11,6 +11,7 @@ import PlanItem from './PlanItem'; | |||
11 | import { i18nPlanName } from '../../../helpers/plan-helpers'; | 11 | import { i18nPlanName } from '../../../helpers/plan-helpers'; |
12 | import { PLANS } from '../../../config'; | 12 | import { PLANS } from '../../../config'; |
13 | import { FeatureList } from '../../../components/ui/FeatureList'; | 13 | import { FeatureList } from '../../../components/ui/FeatureList'; |
14 | import Appear from '../../../components/ui/effects/Appear'; | ||
14 | 15 | ||
15 | const messages = defineMessages({ | 16 | const messages = defineMessages({ |
16 | welcome: { | 17 | welcome: { |
@@ -132,6 +133,10 @@ const styles = theme => ({ | |||
132 | display: 'block', | 133 | display: 'block', |
133 | color: `${theme.styleTypes.primary.contrast} !important`, | 134 | color: `${theme.styleTypes.primary.contrast} !important`, |
134 | }, | 135 | }, |
136 | scrollContainer: { | ||
137 | border: '1px solid red', | ||
138 | overflow: 'scroll-x', | ||
139 | }, | ||
135 | }); | 140 | }); |
136 | 141 | ||
137 | @injectSheet(styles) @observer | 142 | @injectSheet(styles) @observer |
@@ -166,67 +171,69 @@ class PlanSelection extends Component { | |||
166 | const { intl } = this.context; | 171 | const { intl } = this.context; |
167 | 172 | ||
168 | return ( | 173 | return ( |
169 | <div | 174 | <Appear> |
170 | className={classes.root} | 175 | <div |
171 | > | 176 | className={classes.root} |
172 | <div className={classes.container}> | 177 | > |
173 | <div className={classes.bigIcon}> | 178 | <div className={classes.container}> |
174 | <Icon icon={mdiRocket} /> | 179 | <div className={classes.bigIcon}> |
175 | </div> | 180 | <Icon icon={mdiRocket} /> |
176 | <H1 className={classes.headline}>{intl.formatMessage(messages.welcome, { name: firstname })}</H1> | 181 | </div> |
177 | <H2 className={classes.subheadline}>{intl.formatMessage(messages.subheadline)}</H2> | 182 | <H1 className={classes.headline}>{intl.formatMessage(messages.welcome, { name: firstname })}</H1> |
178 | <div className={classes.plans}> | 183 | <H2 className={classes.subheadline}>{intl.formatMessage(messages.subheadline)}</H2> |
179 | <PlanItem | 184 | <div className={classes.plans}> |
180 | name={i18nPlanName(PLANS.FREE, intl)} | 185 | <PlanItem |
181 | text={intl.formatMessage(messages.textFree)} | 186 | name={i18nPlanName(PLANS.FREE, intl)} |
182 | price={0} | 187 | text={intl.formatMessage(messages.textFree)} |
183 | currency={currency} | 188 | price={0} |
184 | ctaLabel={intl.formatMessage(subscriptionExpired ? messages.ctaDowngradeFree : messages.ctaStayOnFree)} | 189 | currency={currency} |
185 | upgrade={() => stayOnFree()} | 190 | ctaLabel={intl.formatMessage(subscriptionExpired ? messages.ctaDowngradeFree : messages.ctaStayOnFree)} |
186 | simpleCTA | 191 | upgrade={() => stayOnFree()} |
187 | > | 192 | simpleCTA |
188 | <FeatureList | 193 | > |
189 | plan={PLANS.FREE} | 194 | <FeatureList |
190 | className={classes.featureList} | 195 | plan={PLANS.FREE} |
191 | /> | 196 | className={classes.featureList} |
192 | </PlanItem> | 197 | /> |
193 | <PlanItem | 198 | </PlanItem> |
194 | name={i18nPlanName(plans.personal.yearly.id, intl)} | 199 | <PlanItem |
195 | text={intl.formatMessage(messages.textPersonal)} | 200 | name={i18nPlanName(plans.personal.yearly.id, intl)} |
196 | price={plans.personal.yearly.price} | 201 | text={intl.formatMessage(messages.textPersonal)} |
197 | currency={currency} | 202 | price={plans.personal.yearly.price} |
198 | ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPersonal : messages.actionTrial)} | 203 | currency={currency} |
199 | upgrade={() => upgradeAccount(plans.personal.yearly.id)} | 204 | ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPersonal : messages.actionTrial)} |
200 | > | 205 | upgrade={() => upgradeAccount(plans.personal.yearly.id)} |
201 | <FeatureList | 206 | > |
202 | plan={PLANS.PERSONAL} | 207 | <FeatureList |
203 | className={classes.featureList} | 208 | plan={PLANS.PERSONAL} |
204 | /> | 209 | className={classes.featureList} |
205 | </PlanItem> | 210 | /> |
206 | <PlanItem | 211 | </PlanItem> |
207 | name={i18nPlanName(plans.pro.yearly.id, intl)} | 212 | <PlanItem |
208 | text={intl.formatMessage(messages.textProfessional)} | 213 | name={i18nPlanName(plans.pro.yearly.id, intl)} |
209 | price={plans.pro.yearly.price} | 214 | text={intl.formatMessage(messages.textProfessional)} |
210 | currency={currency} | 215 | price={plans.pro.yearly.price} |
211 | ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPro : messages.actionTrial)} | 216 | currency={currency} |
212 | upgrade={() => upgradeAccount(plans.personal.yearly.id)} | 217 | ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPro : messages.actionTrial)} |
213 | perUser | 218 | upgrade={() => upgradeAccount(plans.personal.yearly.id)} |
219 | perUser | ||
220 | > | ||
221 | <FeatureList | ||
222 | plan={PLANS.PRO} | ||
223 | className={classes.featureList} | ||
224 | /> | ||
225 | </PlanItem> | ||
226 | </div> | ||
227 | <a | ||
228 | href="https://meetfranz.com/pricing" | ||
229 | target="_blank" | ||
230 | className={classes.fullFeatureList} | ||
214 | > | 231 | > |
215 | <FeatureList | 232 | {intl.formatMessage(messages.fullFeatureList)} |
216 | plan={PLANS.PRO} | 233 | </a> |
217 | className={classes.featureList} | ||
218 | /> | ||
219 | </PlanItem> | ||
220 | </div> | 234 | </div> |
221 | <a | ||
222 | href="https://meetfranz.com/pricing" | ||
223 | target="_blank" | ||
224 | className={classes.fullFeatureList} | ||
225 | > | ||
226 | {intl.formatMessage(messages.fullFeatureList)} | ||
227 | </a> | ||
228 | </div> | 235 | </div> |
229 | </div> | 236 | </Appear> |
230 | ); | 237 | ); |
231 | } | 238 | } |
232 | } | 239 | } |
diff --git a/src/features/planSelection/containers/PlanSelectionScreen.js b/src/features/planSelection/containers/PlanSelectionScreen.js index b0d9b5ab5..01b357861 100644 --- a/src/features/planSelection/containers/PlanSelectionScreen.js +++ b/src/features/planSelection/containers/PlanSelectionScreen.js | |||
@@ -8,7 +8,8 @@ import FeaturesStore from '../../../stores/FeaturesStore'; | |||
8 | import UserStore from '../../../stores/UserStore'; | 8 | import UserStore from '../../../stores/UserStore'; |
9 | import PlanSelection from '../components/PlanSelection'; | 9 | import PlanSelection from '../components/PlanSelection'; |
10 | import ErrorBoundary from '../../../components/util/ErrorBoundary'; | 10 | import ErrorBoundary from '../../../components/util/ErrorBoundary'; |
11 | import { planSelectionStore } from '..'; | 11 | import { planSelectionStore, GA_CATEGORY_PLAN_SELECTION } from '..'; |
12 | import { gaEvent } from '../../../lib/analytics'; | ||
12 | 13 | ||
13 | const { dialog, app } = remote; | 14 | const { dialog, app } = remote; |
14 | 15 | ||
@@ -37,6 +38,10 @@ class PlanSelectionScreen extends Component { | |||
37 | intl: intlShape, | 38 | intl: intlShape, |
38 | }; | 39 | }; |
39 | 40 | ||
41 | componentDidMount() { | ||
42 | gaEvent(GA_CATEGORY_PLAN_SELECTION, 'show'); | ||
43 | } | ||
44 | |||
40 | upgradeAccount(planId) { | 45 | upgradeAccount(planId) { |
41 | const { user, features } = this.props.stores; | 46 | const { user, features } = this.props.stores; |
42 | const { upgradeAccount, hideOverlay } = this.props.actions.planSelection; | 47 | const { upgradeAccount, hideOverlay } = this.props.actions.planSelection; |
@@ -83,6 +88,8 @@ class PlanSelectionScreen extends Component { | |||
83 | upgradeAccount={(planId) => { | 88 | upgradeAccount={(planId) => { |
84 | if (user.data.hadSubscription) { | 89 | if (user.data.hadSubscription) { |
85 | this.upgradeAccount(planId); | 90 | this.upgradeAccount(planId); |
91 | |||
92 | gaEvent(GA_CATEGORY_PLAN_SELECTION, 'SelectPlan', planId); | ||
86 | } else { | 93 | } else { |
87 | activateTrial({ | 94 | activateTrial({ |
88 | planId, | 95 | planId, |
@@ -103,11 +110,15 @@ class PlanSelectionScreen extends Component { | |||
103 | ], | 110 | ], |
104 | }); | 111 | }); |
105 | 112 | ||
113 | gaEvent(GA_CATEGORY_PLAN_SELECTION, 'SelectPlan', 'Stay on Free'); | ||
114 | |||
106 | if (selection === 0) { | 115 | if (selection === 0) { |
107 | downgradeAccount(); | 116 | downgradeAccount(); |
108 | hideOverlay(); | 117 | hideOverlay(); |
109 | } else { | 118 | } else { |
110 | upgradeAccount(plans.personal.yearly.id); | 119 | upgradeAccount(plans.personal.yearly.id); |
120 | |||
121 | gaEvent(GA_CATEGORY_PLAN_SELECTION, 'SelectPlan', 'Revoke'); | ||
111 | } | 122 | } |
112 | }} | 123 | }} |
113 | subscriptionExpired={user.team && user.team.state === 'expired' && !user.team.userHasDowngraded} | 124 | subscriptionExpired={user.team && user.team.state === 'expired' && !user.team.userHasDowngraded} |