plan selection polishing

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';
 import { i18nPlanName } from '../../../helpers/plan-helpers';
 import { PLANS } from '../../../config';
 import { FeatureList } from '../../../components/ui/FeatureList';
+import Appear from '../../../components/ui/effects/Appear';
 
 const messages = defineMessages({
   welcome: {
@@ -132,6 +133,10 @@ const styles = theme => ({
     display: 'block',
     color: `${theme.styleTypes.primary.contrast} !important`,
   },
+  scrollContainer: {
+    border: '1px solid red',
+    overflow: 'scroll-x',
+  },
 });
 
 @injectSheet(styles) @observer
@@ -166,67 +171,69 @@ class PlanSelection extends Component {
     const { intl } = this.context;
 
     return (
-      <div
-        className={classes.root}
-      >
-        <div className={classes.container}>
-          <div className={classes.bigIcon}>
-            <Icon icon={mdiRocket} />
-          </div>
-          <H1 className={classes.headline}>{intl.formatMessage(messages.welcome, { name: firstname })}</H1>
-          <H2 className={classes.subheadline}>{intl.formatMessage(messages.subheadline)}</H2>
-          <div className={classes.plans}>
-            <PlanItem
-              name={i18nPlanName(PLANS.FREE, intl)}
-              text={intl.formatMessage(messages.textFree)}
-              price={0}
-              currency={currency}
-              ctaLabel={intl.formatMessage(subscriptionExpired ? messages.ctaDowngradeFree : messages.ctaStayOnFree)}
-              upgrade={() => stayOnFree()}
-              simpleCTA
-            >
-              <FeatureList
-                plan={PLANS.FREE}
-                className={classes.featureList}
-              />
-            </PlanItem>
-            <PlanItem
-              name={i18nPlanName(plans.personal.yearly.id, intl)}
-              text={intl.formatMessage(messages.textPersonal)}
-              price={plans.personal.yearly.price}
-              currency={currency}
-              ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPersonal : messages.actionTrial)}
-              upgrade={() => upgradeAccount(plans.personal.yearly.id)}
-            >
-              <FeatureList
-                plan={PLANS.PERSONAL}
-                className={classes.featureList}
-              />
-            </PlanItem>
-            <PlanItem
-              name={i18nPlanName(plans.pro.yearly.id, intl)}
-              text={intl.formatMessage(messages.textProfessional)}
-              price={plans.pro.yearly.price}
-              currency={currency}
-              ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPro : messages.actionTrial)}
-              upgrade={() => upgradeAccount(plans.personal.yearly.id)}
-              perUser
+      <Appear>
+        <div
+          className={classes.root}
+        >
+          <div className={classes.container}>
+            <div className={classes.bigIcon}>
+              <Icon icon={mdiRocket} />
+            </div>
+            <H1 className={classes.headline}>{intl.formatMessage(messages.welcome, { name: firstname })}</H1>
+            <H2 className={classes.subheadline}>{intl.formatMessage(messages.subheadline)}</H2>
+            <div className={classes.plans}>
+              <PlanItem
+                name={i18nPlanName(PLANS.FREE, intl)}
+                text={intl.formatMessage(messages.textFree)}
+                price={0}
+                currency={currency}
+                ctaLabel={intl.formatMessage(subscriptionExpired ? messages.ctaDowngradeFree : messages.ctaStayOnFree)}
+                upgrade={() => stayOnFree()}
+                simpleCTA
+              >
+                <FeatureList
+                  plan={PLANS.FREE}
+                  className={classes.featureList}
+                />
+              </PlanItem>
+              <PlanItem
+                name={i18nPlanName(plans.personal.yearly.id, intl)}
+                text={intl.formatMessage(messages.textPersonal)}
+                price={plans.personal.yearly.price}
+                currency={currency}
+                ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPersonal : messages.actionTrial)}
+                upgrade={() => upgradeAccount(plans.personal.yearly.id)}
+              >
+                <FeatureList
+                  plan={PLANS.PERSONAL}
+                  className={classes.featureList}
+                />
+              </PlanItem>
+              <PlanItem
+                name={i18nPlanName(plans.pro.yearly.id, intl)}
+                text={intl.formatMessage(messages.textProfessional)}
+                price={plans.pro.yearly.price}
+                currency={currency}
+                ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPro : messages.actionTrial)}
+                upgrade={() => upgradeAccount(plans.personal.yearly.id)}
+                perUser
+              >
+                <FeatureList
+                  plan={PLANS.PRO}
+                  className={classes.featureList}
+                />
+              </PlanItem>
+            </div>
+            <a
+              href="https://meetfranz.com/pricing"
+              target="_blank"
+              className={classes.fullFeatureList}
             >
-              <FeatureList
-                plan={PLANS.PRO}
-                className={classes.featureList}
-              />
-            </PlanItem>
+              {intl.formatMessage(messages.fullFeatureList)}
+            </a>
           </div>
-          <a
-            href="https://meetfranz.com/pricing"
-            target="_blank"
-            className={classes.fullFeatureList}
-          >
-            {intl.formatMessage(messages.fullFeatureList)}
-          </a>
         </div>
-      </div>
+      </Appear>
     );
   }
 }
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';
 import UserStore from '../../../stores/UserStore';
 import PlanSelection from '../components/PlanSelection';
 import ErrorBoundary from '../../../components/util/ErrorBoundary';
-import { planSelectionStore } from '..';
+import { planSelectionStore, GA_CATEGORY_PLAN_SELECTION } from '..';
+import { gaEvent } from '../../../lib/analytics';
 
 const { dialog, app } = remote;
 
@@ -37,6 +38,10 @@ class PlanSelectionScreen extends Component {
     intl: intlShape,
   };
 
+  componentDidMount() {
+    gaEvent(GA_CATEGORY_PLAN_SELECTION, 'show');
+  }
+
   upgradeAccount(planId) {
     const { user, features } = this.props.stores;
     const { upgradeAccount, hideOverlay } = this.props.actions.planSelection;
@@ -83,6 +88,8 @@ class PlanSelectionScreen extends Component {
           upgradeAccount={(planId) => {
             if (user.data.hadSubscription) {
               this.upgradeAccount(planId);
+
+              gaEvent(GA_CATEGORY_PLAN_SELECTION, 'SelectPlan', planId);
             } else {
               activateTrial({
                 planId,
@@ -103,11 +110,15 @@ class PlanSelectionScreen extends Component {
               ],
             });
 
+            gaEvent(GA_CATEGORY_PLAN_SELECTION, 'SelectPlan', 'Stay on Free');
+
             if (selection === 0) {
               downgradeAccount();
               hideOverlay();
             } else {
               upgradeAccount(plans.personal.yearly.id);
+
+              gaEvent(GA_CATEGORY_PLAN_SELECTION, 'SelectPlan', 'Revoke');
             }
           }}
           subscriptionExpired={user.team && user.team.state === 'expired' && !user.team.userHasDowngraded}