simplify plan selection

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({
   },
   personalOffer: {
     id: 'pricing.trial.subheadline',
-    defaultMessage: '!!!Your personal welcome offer:',
+    defaultMessage: '!!!Here\'s a special welcome for you:',
   },
   noStringsAttachedHeadline: {
     id: 'pricing.trial.terms.headline',
@@ -38,7 +38,7 @@ const messages = defineMessages({
   },
   ctaAccept: {
     id: 'pricing.trial.cta.accept',
-    defaultMessage: '!!!Yes, upgrade my account to Franz Professional',
+    defaultMessage: '!!!Start my 14-day Franz Professional Trial ',
   },
   ctaSkip: {
     id: 'pricing.trial.cta.skip',
@@ -58,6 +58,7 @@ const styles = theme => ({
   welcomeOffer: {
     textAlign: 'center',
     fontWeight: 'bold',
+    marginBottom: '6 !important',
   },
   keyTerms: {
     textAlign: 'center',
@@ -101,6 +102,7 @@ export default @observer @injectSheet(styles) class Signup extends Component {
     isLoadingRequiredData: PropTypes.bool.isRequired,
     isActivatingTrial: PropTypes.bool.isRequired,
     trialActivationError: PropTypes.bool.isRequired,
+    canSkipTrial: PropTypes.bool.isRequired,
     classes: PropTypes.object.isRequired,
   };
 
@@ -114,6 +116,7 @@ export default @observer @injectSheet(styles) class Signup extends Component {
       isLoadingRequiredData,
       isActivatingTrial,
       trialActivationError,
+      canSkipTrial,
       classes,
     } = this.props;
     const { intl } = this.context;
@@ -138,7 +141,7 @@ export default @observer @injectSheet(styles) class Signup extends Component {
                 <br />
               </p>
               <p>
-                Get the free 14 day Franz Professional trial and see your communication evolving.
+                For the next 14 days, we are going to give you the full Franz Professional experience so you can watch your communication evolve!
                 <br />
               </p>
               <p>
@@ -167,9 +170,11 @@ export default @observer @injectSheet(styles) class Signup extends Component {
               busy={isActivatingTrial}
               disabled={isLoadingRequiredData || isActivatingTrial}
             />
-            <p className={classes.skipLink}>
-              <a href="#/">{intl.formatMessage(messages.ctaSkip)}</a>
-            </p>
+            {canSkipTrial && (
+              <p className={classes.skipLink}>
+                <a href="#/">{intl.formatMessage(messages.ctaSkip)}</a>
+              </p>
+            )}
           </form>
         </div>
         <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';
 import AppUpdateInfoBar from '../AppUpdateInfoBar';
 import TrialActivationInfoBar from '../TrialActivationInfoBar';
 import Todos from '../../features/todos/containers/TodosScreen';
+import PlanSelection from '../../features/planSelection/containers/PlanSelectionScreen';
 
 function createMarkup(HTMLString) {
   return { __html: HTMLString };
@@ -176,6 +177,7 @@ class AppLayout extends Component {
             </div>
             <Todos />
           </div>
+          <PlanSelection />
         </div>
       </ErrorBoundary>
     );
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 {
                           {intl.formatMessage(messages.yourLicense)}
                         </H2>
                         <p>
-                          {isPremiumOverrideUser ? 'Franz Premium' : planName}
+                          Franz
+                          {isPremiumOverrideUser ? 'Premium' : planName}
                           {user.team.isTrial && (
                             <>
                               {' – '}
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>
     );
   }