simplify plan selection

2 files changed, 64 insertions, 10 deletions

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 => ({
     padding: [8, 0],
     display: 'flex',
     alignItems: 'center',
+    textAlign: 'left',
   },
   featureIcon: {
     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';
 import { defineMessages, intlShape } from 'react-intl';
 
 import { FeatureItem } from './FeatureItem';
+import { PLANS } from '../../config';
 
 const messages = defineMessages({
+  availableRecipes: {
+    id: 'pricing.features.recipes',
+    defaultMessage: '!!!Choose from more than 70 Services',
+  },
+  accountSync: {
+    id: 'pricing.features.accountSync',
+    defaultMessage: '!!!Account Synchronisation',
+  },
+  desktopNotifications: {
+    id: 'pricing.features.desktopNotifications',
+    defaultMessage: '!!!Desktop Notifications',
+  },
   unlimitedServices: {
     id: 'pricing.features.unlimitedServices',
     defaultMessage: '!!!Add unlimited services',
   },
+  upToThreeServices: {
+    id: 'pricing.features.upToThreeServices',
+    defaultMessage: '!!!Add up to 3 services',
+  },
+  upToSixServices: {
+    id: 'pricing.features.upToSixServices',
+    defaultMessage: '!!!Add up to 6 services',
+  },
   spellchecker: {
     id: 'pricing.features.spellchecker',
     defaultMessage: '!!!Spellchecker support',
@@ -51,6 +72,7 @@ export class FeatureList extends Component {
   static propTypes = {
     className: PropTypes.string,
     featureClassName: PropTypes.string,
+    plan: PropTypes.oneOf(PLANS).isRequired,
   };
 
   static defaultProps = {
@@ -66,21 +88,52 @@ export class FeatureList extends Component {
     const {
       className,
       featureClassName,
+      plan,
     } = this.props;
     const { intl } = this.context;
 
+    const features = [];
+    if (plan === PLANS.FREE) {
+      features.push(
+        messages.upToThreeServices,
+        messages.availableRecipes,
+        messages.accountSync,
+        messages.desktopNotifications,
+      );
+    } else if (plan === PLANS.PERSONAL) {
+      features.push(
+        messages.upToSixServices,
+        messages.spellchecker,
+        messages.appDelays,
+        messages.adFree,
+      );
+    } else if (plan === PLANS.PRO) {
+      features.push(
+        messages.unlimitedServices,
+        messages.workspaces,
+        messages.customWebsites,
+        // messages.onPremise,
+        messages.thirdPartyServices,
+        // messages.serviceProxies,
+      );
+    } else {
+      features.push(
+        messages.unlimitedServices,
+        messages.spellchecker,
+        messages.workspaces,
+        messages.customWebsites,
+        messages.onPremise,
+        messages.thirdPartyServices,
+        messages.serviceProxies,
+        messages.teamManagement,
+        messages.appDelays,
+        messages.adFree,
+      );
+    }
+
     return (
       <ul className={className}>
-        <FeatureItem name={intl.formatMessage(messages.unlimitedServices)} className={featureClassName} />
-        <FeatureItem name={intl.formatMessage(messages.spellchecker)} className={featureClassName} />
-        <FeatureItem name={intl.formatMessage(messages.workspaces)} className={featureClassName} />
-        <FeatureItem name={intl.formatMessage(messages.customWebsites)} className={featureClassName} />
-        <FeatureItem name={intl.formatMessage(messages.onPremise)} className={featureClassName} />
-        <FeatureItem name={intl.formatMessage(messages.thirdPartyServices)} className={featureClassName} />
-        <FeatureItem name={intl.formatMessage(messages.serviceProxies)} className={featureClassName} />
-        <FeatureItem name={intl.formatMessage(messages.teamManagement)} className={featureClassName} />
-        <FeatureItem name={intl.formatMessage(messages.appDelays)} className={featureClassName} />
-        <FeatureItem name={intl.formatMessage(messages.adFree)} className={featureClassName} />
+        {features.map(feature => <FeatureItem name={intl.formatMessage(feature)} className={featureClassName} />)}
       </ul>
     );
   }