5 files changed, 108 insertions, 90 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}
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 4e1b01419..f2fd7a52a 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -413,4 +413,4 @@
   "workspaceDrawer.workspaceFeatureInfo": "<p>Franz Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.</p><p>You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.</p>",
   "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings",
   "workspaces.switchingIndicator.switchingTo": "Switching to"
-}
+}
\ No newline at end of file
diff --git a/src/i18n/messages/src/features/planSelection/components/PlanSelection.json b/src/i18n/messages/src/features/planSelection/components/PlanSelection.json
index 3dc4f74f4..76f4ed50b 100644
--- a/src/i18n/messages/src/features/planSelection/components/PlanSelection.json
+++ b/src/i18n/messages/src/features/planSelection/components/PlanSelection.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Welcome back, {name}",
     "file": "src/features/planSelection/components/PlanSelection.js",
     "start": {
-      "line": 16,
+      "line": 17,
       "column": 11
     },
     "end": {
-      "line": 19,
+      "line": 20,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!It's time to make a choice. Franz works best on our Personal and Professional plans. Please have a look and choose the best one for you.",
     "file": "src/features/planSelection/components/PlanSelection.js",
     "start": {
-      "line": 20,
+      "line": 21,
       "column": 15
     },
     "end": {
-      "line": 23,
+      "line": 24,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Basic functionality",
     "file": "src/features/planSelection/components/PlanSelection.js",
     "start": {
-      "line": 24,
+      "line": 25,
       "column": 12
     },
     "end": {
-      "line": 27,
+      "line": 28,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!More services, no waiting - ideal for personal use.",
     "file": "src/features/planSelection/components/PlanSelection.js",
     "start": {
-      "line": 28,
+      "line": 29,
       "column": 16
     },
     "end": {
-      "line": 31,
+      "line": 32,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Unlimited services and professional features for you - and your team.",
     "file": "src/features/planSelection/components/PlanSelection.js",
     "start": {
-      "line": 32,
+      "line": 33,
       "column": 20
     },
     "end": {
-      "line": 35,
+      "line": 36,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Stay on Free",
     "file": "src/features/planSelection/components/PlanSelection.js",
     "start": {
-      "line": 36,
+      "line": 37,
       "column": 17
     },
     "end": {
-      "line": 39,
+      "line": 40,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Downgrade to Free",
     "file": "src/features/planSelection/components/PlanSelection.js",
     "start": {
-      "line": 40,
+      "line": 41,
       "column": 20
     },
     "end": {
-      "line": 43,
+      "line": 44,
       "column": 3
     }
   },
@@ -95,11 +95,11 @@
     "defaultMessage": "!!!Start my free 14-days Trial",
     "file": "src/features/planSelection/components/PlanSelection.js",
     "start": {
-      "line": 44,
+      "line": 45,
       "column": 15
     },
     "end": {
-      "line": 47,
+      "line": 48,
       "column": 3
     }
   },
@@ -108,11 +108,11 @@
     "defaultMessage": "!!!Choose Personal",
     "file": "src/features/planSelection/components/PlanSelection.js",
     "start": {
-      "line": 48,
+      "line": 49,
       "column": 23
     },
     "end": {
-      "line": 51,
+      "line": 52,
       "column": 3
     }
   },
@@ -121,11 +121,11 @@
     "defaultMessage": "!!!Choose Professional",
     "file": "src/features/planSelection/components/PlanSelection.js",
     "start": {
-      "line": 52,
+      "line": 53,
       "column": 18
     },
     "end": {
-      "line": 55,
+      "line": 56,
       "column": 3
     }
   },
@@ -134,11 +134,11 @@
     "defaultMessage": "!!!Complete comparison of all plans",
     "file": "src/features/planSelection/components/PlanSelection.js",
     "start": {
-      "line": 56,
+      "line": 57,
       "column": 19
     },
     "end": {
-      "line": 59,
+      "line": 60,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/features/planSelection/containers/PlanSelectionScreen.json b/src/i18n/messages/src/features/planSelection/containers/PlanSelectionScreen.json
index 04b2144b4..905c6e09a 100644
--- a/src/i18n/messages/src/features/planSelection/containers/PlanSelectionScreen.json
+++ b/src/i18n/messages/src/features/planSelection/containers/PlanSelectionScreen.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Downgrade your Franz Plan",
     "file": "src/features/planSelection/containers/PlanSelectionScreen.js",
     "start": {
-      "line": 16,
+      "line": 17,
       "column": 15
     },
     "end": {
-      "line": 19,
+      "line": 20,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!You're about to downgrade to our Free account. Are you sure? Click here instead to get more services and functionality for just {currency}{price} a month.",
     "file": "src/features/planSelection/containers/PlanSelectionScreen.js",
     "start": {
-      "line": 20,
+      "line": 21,
       "column": 17
     },
     "end": {
-      "line": 23,
+      "line": 24,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Downgrade to Free",
     "file": "src/features/planSelection/containers/PlanSelectionScreen.js",
     "start": {
-      "line": 24,
+      "line": 25,
       "column": 22
     },
     "end": {
-      "line": 27,
+      "line": 28,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Choose Personal",
     "file": "src/features/planSelection/containers/PlanSelectionScreen.js",
     "start": {
-      "line": 28,
+      "line": 29,
       "column": 20
     },
     "end": {
-      "line": 31,
+      "line": 32,
       "column": 3
     }
   }