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/ui/FeatureList.js | |
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/ui/FeatureList.js')
-rw-r--r-- | src/components/ui/FeatureList.js | 73 |
1 files changed, 63 insertions, 10 deletions
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 | } |