diff options
author | Stefan Malzner <stefan@adlk.io> | 2019-10-15 21:40:14 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-10-15 21:40:14 +0200 |
commit | 91a0fb20ef02dfa342cf26df3e047b2bd4370b9f (patch) | |
tree | f411b3d7d83a24b015a2a1ed723df2e2a324cc0c /src/components | |
parent | Optimize button width (diff) | |
download | ferdium-app-91a0fb20ef02dfa342cf26df3e047b2bd4370b9f.tar.gz ferdium-app-91a0fb20ef02dfa342cf26df3e047b2bd4370b9f.tar.zst ferdium-app-91a0fb20ef02dfa342cf26df3e047b2bd4370b9f.zip |
simplify plan selection
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/auth/Pricing.js | 17 | ||||
-rw-r--r-- | src/components/layout/AppLayout.js | 2 | ||||
-rw-r--r-- | src/components/settings/account/AccountDashboard.js | 3 | ||||
-rw-r--r-- | src/components/ui/FeatureItem.js | 1 | ||||
-rw-r--r-- | src/components/ui/FeatureList.js | 73 |
5 files changed, 79 insertions, 17 deletions
diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js index cbeaaa5d9..40ce49814 100644 --- a/src/components/auth/Pricing.js +++ b/src/components/auth/Pricing.js | |||
@@ -18,7 +18,7 @@ const messages = defineMessages({ | |||
18 | }, | 18 | }, |
19 | personalOffer: { | 19 | personalOffer: { |
20 | id: 'pricing.trial.subheadline', | 20 | id: 'pricing.trial.subheadline', |
21 | defaultMessage: '!!!Your personal welcome offer:', | 21 | defaultMessage: '!!!Here\'s a special welcome for you:', |
22 | }, | 22 | }, |
23 | noStringsAttachedHeadline: { | 23 | noStringsAttachedHeadline: { |
24 | id: 'pricing.trial.terms.headline', | 24 | id: 'pricing.trial.terms.headline', |
@@ -38,7 +38,7 @@ const messages = defineMessages({ | |||
38 | }, | 38 | }, |
39 | ctaAccept: { | 39 | ctaAccept: { |
40 | id: 'pricing.trial.cta.accept', | 40 | id: 'pricing.trial.cta.accept', |
41 | defaultMessage: '!!!Yes, upgrade my account to Franz Professional', | 41 | defaultMessage: '!!!Start my 14-day Franz Professional Trial ', |
42 | }, | 42 | }, |
43 | ctaSkip: { | 43 | ctaSkip: { |
44 | id: 'pricing.trial.cta.skip', | 44 | id: 'pricing.trial.cta.skip', |
@@ -58,6 +58,7 @@ const styles = theme => ({ | |||
58 | welcomeOffer: { | 58 | welcomeOffer: { |
59 | textAlign: 'center', | 59 | textAlign: 'center', |
60 | fontWeight: 'bold', | 60 | fontWeight: 'bold', |
61 | marginBottom: '6 !important', | ||
61 | }, | 62 | }, |
62 | keyTerms: { | 63 | keyTerms: { |
63 | textAlign: 'center', | 64 | textAlign: 'center', |
@@ -101,6 +102,7 @@ export default @observer @injectSheet(styles) class Signup extends Component { | |||
101 | isLoadingRequiredData: PropTypes.bool.isRequired, | 102 | isLoadingRequiredData: PropTypes.bool.isRequired, |
102 | isActivatingTrial: PropTypes.bool.isRequired, | 103 | isActivatingTrial: PropTypes.bool.isRequired, |
103 | trialActivationError: PropTypes.bool.isRequired, | 104 | trialActivationError: PropTypes.bool.isRequired, |
105 | canSkipTrial: PropTypes.bool.isRequired, | ||
104 | classes: PropTypes.object.isRequired, | 106 | classes: PropTypes.object.isRequired, |
105 | }; | 107 | }; |
106 | 108 | ||
@@ -114,6 +116,7 @@ export default @observer @injectSheet(styles) class Signup extends Component { | |||
114 | isLoadingRequiredData, | 116 | isLoadingRequiredData, |
115 | isActivatingTrial, | 117 | isActivatingTrial, |
116 | trialActivationError, | 118 | trialActivationError, |
119 | canSkipTrial, | ||
117 | classes, | 120 | classes, |
118 | } = this.props; | 121 | } = this.props; |
119 | const { intl } = this.context; | 122 | const { intl } = this.context; |
@@ -138,7 +141,7 @@ export default @observer @injectSheet(styles) class Signup extends Component { | |||
138 | <br /> | 141 | <br /> |
139 | </p> | 142 | </p> |
140 | <p> | 143 | <p> |
141 | Get the free 14 day Franz Professional trial and see your communication evolving. | 144 | For the next 14 days, we are going to give you the full Franz Professional experience so you can watch your communication evolve! |
142 | <br /> | 145 | <br /> |
143 | </p> | 146 | </p> |
144 | <p> | 147 | <p> |
@@ -167,9 +170,11 @@ export default @observer @injectSheet(styles) class Signup extends Component { | |||
167 | busy={isActivatingTrial} | 170 | busy={isActivatingTrial} |
168 | disabled={isLoadingRequiredData || isActivatingTrial} | 171 | disabled={isLoadingRequiredData || isActivatingTrial} |
169 | /> | 172 | /> |
170 | <p className={classes.skipLink}> | 173 | {canSkipTrial && ( |
171 | <a href="#/">{intl.formatMessage(messages.ctaSkip)}</a> | 174 | <p className={classes.skipLink}> |
172 | </p> | 175 | <a href="#/">{intl.formatMessage(messages.ctaSkip)}</a> |
176 | </p> | ||
177 | )} | ||
173 | </form> | 178 | </form> |
174 | </div> | 179 | </div> |
175 | <div className={classes.featureContainer}> | 180 | <div className={classes.featureContainer}> |
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js index 200777ae6..fe81b1911 100644 --- a/src/components/layout/AppLayout.js +++ b/src/components/layout/AppLayout.js | |||
@@ -19,6 +19,7 @@ import { workspaceStore } from '../../features/workspaces'; | |||
19 | import AppUpdateInfoBar from '../AppUpdateInfoBar'; | 19 | import AppUpdateInfoBar from '../AppUpdateInfoBar'; |
20 | import TrialActivationInfoBar from '../TrialActivationInfoBar'; | 20 | import TrialActivationInfoBar from '../TrialActivationInfoBar'; |
21 | import Todos from '../../features/todos/containers/TodosScreen'; | 21 | import Todos from '../../features/todos/containers/TodosScreen'; |
22 | import PlanSelection from '../../features/planSelection/containers/PlanSelectionScreen'; | ||
22 | 23 | ||
23 | function createMarkup(HTMLString) { | 24 | function createMarkup(HTMLString) { |
24 | return { __html: HTMLString }; | 25 | return { __html: HTMLString }; |
@@ -176,6 +177,7 @@ class AppLayout extends Component { | |||
176 | </div> | 177 | </div> |
177 | <Todos /> | 178 | <Todos /> |
178 | </div> | 179 | </div> |
180 | <PlanSelection /> | ||
179 | </div> | 181 | </div> |
180 | </ErrorBoundary> | 182 | </ErrorBoundary> |
181 | ); | 183 | ); |
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js index 08e86fda6..9a1b31d0f 100644 --- a/src/components/settings/account/AccountDashboard.js +++ b/src/components/settings/account/AccountDashboard.js | |||
@@ -217,7 +217,8 @@ class AccountDashboard extends Component { | |||
217 | {intl.formatMessage(messages.yourLicense)} | 217 | {intl.formatMessage(messages.yourLicense)} |
218 | </H2> | 218 | </H2> |
219 | <p> | 219 | <p> |
220 | {isPremiumOverrideUser ? 'Franz Premium' : planName} | 220 | Franz |
221 | {isPremiumOverrideUser ? 'Premium' : planName} | ||
221 | {user.team.isTrial && ( | 222 | {user.team.isTrial && ( |
222 | <> | 223 | <> |
223 | {' – '} | 224 | {' – '} |
diff --git a/src/components/ui/FeatureItem.js b/src/components/ui/FeatureItem.js index 7c482c4d4..4926df470 100644 --- a/src/components/ui/FeatureItem.js +++ b/src/components/ui/FeatureItem.js | |||
@@ -10,6 +10,7 @@ const styles = theme => ({ | |||
10 | padding: [8, 0], | 10 | padding: [8, 0], |
11 | display: 'flex', | 11 | display: 'flex', |
12 | alignItems: 'center', | 12 | alignItems: 'center', |
13 | textAlign: 'left', | ||
13 | }, | 14 | }, |
14 | featureIcon: { | 15 | featureIcon: { |
15 | fill: theme.brandSuccess, | 16 | fill: theme.brandSuccess, |
diff --git a/src/components/ui/FeatureList.js b/src/components/ui/FeatureList.js index 62944ad75..732b40e40 100644 --- a/src/components/ui/FeatureList.js +++ b/src/components/ui/FeatureList.js | |||
@@ -3,12 +3,33 @@ import PropTypes from 'prop-types'; | |||
3 | import { defineMessages, intlShape } from 'react-intl'; | 3 | import { defineMessages, intlShape } from 'react-intl'; |
4 | 4 | ||
5 | import { FeatureItem } from './FeatureItem'; | 5 | import { FeatureItem } from './FeatureItem'; |
6 | import { PLANS } from '../../config'; | ||
6 | 7 | ||
7 | const messages = defineMessages({ | 8 | const messages = defineMessages({ |
9 | availableRecipes: { | ||
10 | id: 'pricing.features.recipes', | ||
11 | defaultMessage: '!!!Choose from more than 70 Services', | ||
12 | }, | ||
13 | accountSync: { | ||
14 | id: 'pricing.features.accountSync', | ||
15 | defaultMessage: '!!!Account Synchronisation', | ||
16 | }, | ||
17 | desktopNotifications: { | ||
18 | id: 'pricing.features.desktopNotifications', | ||
19 | defaultMessage: '!!!Desktop Notifications', | ||
20 | }, | ||
8 | unlimitedServices: { | 21 | unlimitedServices: { |
9 | id: 'pricing.features.unlimitedServices', | 22 | id: 'pricing.features.unlimitedServices', |
10 | defaultMessage: '!!!Add unlimited services', | 23 | defaultMessage: '!!!Add unlimited services', |
11 | }, | 24 | }, |
25 | upToThreeServices: { | ||
26 | id: 'pricing.features.upToThreeServices', | ||
27 | defaultMessage: '!!!Add up to 3 services', | ||
28 | }, | ||
29 | upToSixServices: { | ||
30 | id: 'pricing.features.upToSixServices', | ||
31 | defaultMessage: '!!!Add up to 6 services', | ||
32 | }, | ||
12 | spellchecker: { | 33 | spellchecker: { |
13 | id: 'pricing.features.spellchecker', | 34 | id: 'pricing.features.spellchecker', |
14 | defaultMessage: '!!!Spellchecker support', | 35 | defaultMessage: '!!!Spellchecker support', |
@@ -51,6 +72,7 @@ export class FeatureList extends Component { | |||
51 | static propTypes = { | 72 | static propTypes = { |
52 | className: PropTypes.string, | 73 | className: PropTypes.string, |
53 | featureClassName: PropTypes.string, | 74 | featureClassName: PropTypes.string, |
75 | plan: PropTypes.oneOf(PLANS).isRequired, | ||
54 | }; | 76 | }; |
55 | 77 | ||
56 | static defaultProps = { | 78 | static defaultProps = { |
@@ -66,21 +88,52 @@ export class FeatureList extends Component { | |||
66 | const { | 88 | const { |
67 | className, | 89 | className, |
68 | featureClassName, | 90 | featureClassName, |
91 | plan, | ||
69 | } = this.props; | 92 | } = this.props; |
70 | const { intl } = this.context; | 93 | const { intl } = this.context; |
71 | 94 | ||
95 | const features = []; | ||
96 | if (plan === PLANS.FREE) { | ||
97 | features.push( | ||
98 | messages.upToThreeServices, | ||
99 | messages.availableRecipes, | ||
100 | messages.accountSync, | ||
101 | messages.desktopNotifications, | ||
102 | ); | ||
103 | } else if (plan === PLANS.PERSONAL) { | ||
104 | features.push( | ||
105 | messages.upToSixServices, | ||
106 | messages.spellchecker, | ||
107 | messages.appDelays, | ||
108 | messages.adFree, | ||
109 | ); | ||
110 | } else if (plan === PLANS.PRO) { | ||
111 | features.push( | ||
112 | messages.unlimitedServices, | ||
113 | messages.workspaces, | ||
114 | messages.customWebsites, | ||
115 | // messages.onPremise, | ||
116 | messages.thirdPartyServices, | ||
117 | // messages.serviceProxies, | ||
118 | ); | ||
119 | } else { | ||
120 | features.push( | ||
121 | messages.unlimitedServices, | ||
122 | messages.spellchecker, | ||
123 | messages.workspaces, | ||
124 | messages.customWebsites, | ||
125 | messages.onPremise, | ||
126 | messages.thirdPartyServices, | ||
127 | messages.serviceProxies, | ||
128 | messages.teamManagement, | ||
129 | messages.appDelays, | ||
130 | messages.adFree, | ||
131 | ); | ||
132 | } | ||
133 | |||
72 | return ( | 134 | return ( |
73 | <ul className={className}> | 135 | <ul className={className}> |
74 | <FeatureItem name={intl.formatMessage(messages.unlimitedServices)} className={featureClassName} /> | 136 | {features.map(feature => <FeatureItem name={intl.formatMessage(feature)} className={featureClassName} />)} |
75 | <FeatureItem name={intl.formatMessage(messages.spellchecker)} className={featureClassName} /> | ||
76 | <FeatureItem name={intl.formatMessage(messages.workspaces)} className={featureClassName} /> | ||
77 | <FeatureItem name={intl.formatMessage(messages.customWebsites)} className={featureClassName} /> | ||
78 | <FeatureItem name={intl.formatMessage(messages.onPremise)} className={featureClassName} /> | ||
79 | <FeatureItem name={intl.formatMessage(messages.thirdPartyServices)} className={featureClassName} /> | ||
80 | <FeatureItem name={intl.formatMessage(messages.serviceProxies)} className={featureClassName} /> | ||
81 | <FeatureItem name={intl.formatMessage(messages.teamManagement)} className={featureClassName} /> | ||
82 | <FeatureItem name={intl.formatMessage(messages.appDelays)} className={featureClassName} /> | ||
83 | <FeatureItem name={intl.formatMessage(messages.adFree)} className={featureClassName} /> | ||
84 | </ul> | 137 | </ul> |
85 | ); | 138 | ); |
86 | } | 139 | } |