7 files changed, 753 insertions, 0 deletions
diff --git a/src/features/planSelection/actions.js b/src/features/planSelection/actions.js
new file mode 100644
index 000000000..83f58bfd7
--- /dev/null
+++ b/src/features/planSelection/actions.js
@@ -0,0 +1,9 @@
+import PropTypes from 'prop-types';
+import { createActionsFromDefinitions } from '../../actions/lib/actions';
+export const planSelectionActions = createActionsFromDefinitions({
+  downgradeAccount: {},
+  hideOverlay: {},
+}, PropTypes.checkPropTypes);
+export default planSelectionActions;
diff --git a/src/features/planSelection/api.js b/src/features/planSelection/api.js
new file mode 100644
index 000000000..734643f10
--- /dev/null
+++ b/src/features/planSelection/api.js
@@ -0,0 +1,26 @@
+import { sendAuthRequest } from '../../api/utils/auth';
+import { API, API_VERSION } from '../../environment';
+import Request from '../../stores/lib/Request';
+const debug = require('debug')('Franz:feature:planSelection:api');
+export const planSelectionApi = {
+  downgrade: async () => {
+    const url = `${API}/${API_VERSION}/payment/downgrade`;
+    const options = {
+      method: 'PUT',
+    };
+    debug('downgrade UPDATE', url, options);
+    const result = await sendAuthRequest(url, options);
+    debug('downgrade RESULT', result);
+    if (!result.ok) throw result;
+    return result.ok;
+  },
+};
+export const downgradeUserRequest = new Request(planSelectionApi, 'downgrade');
+export const resetApiRequests = () => {
+  downgradeUserRequest.reset();
+};
diff --git a/src/features/planSelection/components/PlanItem.js b/src/features/planSelection/components/PlanItem.js
new file mode 100644
index 000000000..ec061377b
--- /dev/null
+++ b/src/features/planSelection/components/PlanItem.js
@@ -0,0 +1,207 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import injectSheet from 'react-jss';
+import classnames from 'classnames';
+import color from 'color';
+import { H2 } from '@meetfranz/ui';
+import { Button } from '@meetfranz/forms';
+import { mdiArrowRight } from '@mdi/js';
+const messages = defineMessages({
+  perMonth: {
+    id: 'subscription.interval.perMonth',
+    defaultMessage: '!!!per month',
+  },
+  perMonthPerUser: {
+    id: 'subscription.interval.perMonthPerUser',
+    defaultMessage: '!!!per month & user',
+  },
+  bestValue: {
+    id: 'subscription.bestValue',
+    defaultMessage: '!!!Best value',
+  },
+});
+const styles = theme => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    borderRadius: theme.borderRadius,
+    flex: 1,
+    color: theme.styleTypes.primary.accent,
+    overflow: 'hidden',
+    textAlign: 'center',
+    '& h2': {
+      textAlign: 'center',
+      marginBottom: 10,
+      fontSize: 30,
+      color: theme.styleTypes.primary.contrast,
+    },
+  },
+  currency: {
+    fontSize: 35,
+  },
+  priceWrapper: {
+    height: 50,
+    marginBottom: 0,
+  },
+  price: {
+    fontSize: 50,
+    '& sup': {
+      fontSize: 20,
+      verticalAlign: 20,
+    },
+  },
+  text: {
+    marginBottom: 'auto',
+  },
+  cta: {
+    background: theme.styleTypes.primary.accent,
+    color: theme.styleTypes.primary.contrast,
+    margin: [40, 'auto', 0, 'auto'],
+  },
+  divider: {
+    width: 40,
+    border: 0,
+    borderTop: [1, 'solid', theme.styleTypes.primary.contrast],
+    margin: [15, 'auto', 20],
+  },
+  header: {
+    padding: 20,
+    background: color(theme.styleTypes.primary.accent).darken(0.25).hex(),
+    color: theme.styleTypes.primary.contrast,
+    position: 'relative',
+  },
+  content: {
+    padding: [10, 20, 20],
+    background: '#EFEFEF',
+  },
+  simpleCTA: {
+    background: 'none',
+    color: theme.styleTypes.primary.accent,
+    '& svg': {
+      fill: theme.styleTypes.primary.accent,
+    },
+  },
+  bestValue: {
+    background: theme.styleTypes.success.accent,
+    color: theme.styleTypes.success.contrast,
+    right: -66,
+    top: -40,
+    height: 'auto',
+    position: 'absolute',
+    transform: 'rotateZ(45deg)',
+    textAlign: 'center',
+    padding: [5, 50],
+    transformOrigin: 'left bottom',
+    fontSize: 12,
+    boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
+  },
+});
+export default @observer @injectSheet(styles) class PlanItem extends Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired,
+    price: PropTypes.number.isRequired,
+    currency: PropTypes.string.isRequired,
+    upgrade: PropTypes.func.isRequired,
+    ctaLabel: PropTypes.string.isRequired,
+    simpleCTA: PropTypes.bool,
+    perUser: PropTypes.bool,
+    classes: PropTypes.object.isRequired,
+    bestValue: PropTypes.bool,
+    className: PropTypes.string,
+    children: PropTypes.element,
+  };
+  static defaultProps = {
+    simpleCTA: false,
+    perUser: false,
+    children: null,
+    bestValue: false,
+    className: '',
+  }
+  static contextTypes = {
+    intl: intlShape,
+  };
+  render() {
+    const {
+      name,
+      text,
+      price,
+      currency,
+      classes,
+      upgrade,
+      ctaLabel,
+      simpleCTA,
+      perUser,
+      bestValue,
+      className,
+      children,
+    } = this.props;
+    const { intl } = this.context;
+    const priceParts = `${price}`.split('.');
+    return (
+      <div className={classnames({
+        [classes.root]: true,
+        [className]: className,
+      })}
+      >
+        <div className={classes.header}>
+          {bestValue && (
+            <div className={classes.bestValue}>
+              {intl.formatMessage(messages.bestValue)}
+            </div>
+          )}
+          <H2 className={classes.planName}>{name}</H2>
+          <p className={classes.text}>
+            {text}
+          </p>
+          <hr className={classes.divider} />
+          <p className={classes.priceWrapper}>
+            <span className={classes.currency}>{currency}</span>
+            <span className={classes.price}>
+              {priceParts[0]}
+              <sup>{priceParts[1]}</sup>
+            </span>
+          </p>
+          <p className={classes.interval}>
+            {intl.formatMessage(perUser ? messages.perMonthPerUser : messages.perMonth)}
+          </p>
+        </div>
+        <div className={classes.content}>
+          {children}
+          <Button
+            className={classnames({
+              [classes.cta]: true,
+              [classes.simpleCTA]: simpleCTA,
+            })}
+            icon={simpleCTA ? mdiArrowRight : null}
+            label={(
+              <>
+                {ctaLabel}
+              </>
+            )}
+            onClick={upgrade}
+          />
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/features/planSelection/components/PlanSelection.js b/src/features/planSelection/components/PlanSelection.js
new file mode 100644
index 000000000..b6bb9d32d
--- /dev/null
+++ b/src/features/planSelection/components/PlanSelection.js
@@ -0,0 +1,281 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+import { defineMessages, intlShape } from 'react-intl';
+import { H1, H2, Icon } from '@meetfranz/ui';
+import color from 'color';
+import { mdiRocket, mdiArrowRight } from '@mdi/js';
+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';
+import { gaPage } from '../../../lib/analytics';
+const messages = defineMessages({
+  welcome: {
+    id: 'feature.planSelection.fullscreen.welcome',
+    defaultMessage: '!!!Are you ready to choose, {name}',
+  },
+  subheadline: {
+    id: 'feature.planSelection.fullscreen.subheadline',
+    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.',
+  },
+  textFree: {
+    id: 'feature.planSelection.free.text',
+    defaultMessage: '!!!Basic functionality',
+  },
+  textPersonal: {
+    id: 'feature.planSelection.personal.text',
+    defaultMessage: '!!!More services, no waiting - ideal for personal use.',
+  },
+  textProfessional: {
+    id: 'feature.planSelection.pro.text',
+    defaultMessage: '!!!Unlimited services and professional features for you - and your team.',
+  },
+  ctaStayOnFree: {
+    id: 'feature.planSelection.cta.stayOnFree',
+    defaultMessage: '!!!Stay on Free',
+  },
+  ctaDowngradeFree: {
+    id: 'feature.planSelection.cta.ctaDowngradeFree',
+    defaultMessage: '!!!Downgrade to Free',
+  },
+  actionTrial: {
+    id: 'feature.planSelection.cta.trial',
+    defaultMessage: '!!!Start my free 14-days Trial',
+  },
+  shortActionPersonal: {
+    id: 'feature.planSelection.cta.upgradePersonal',
+    defaultMessage: '!!!Choose Personal',
+  },
+  shortActionPro: {
+    id: 'feature.planSelection.cta.upgradePro',
+    defaultMessage: '!!!Choose Professional',
+  },
+  fullFeatureList: {
+    id: 'feature.planSelection.fullFeatureList',
+    defaultMessage: '!!!Complete comparison of all plans',
+  },
+  pricesBasedOnAnnualPayment: {
+    id: 'feature.planSelection.pricesBasedOnAnnualPayment',
+    defaultMessage: '!!!All prices based on yearly payment',
+  },
+});
+const styles = theme => ({
+  root: {
+    background: theme.colorModalOverlayBackground,
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 999999,
+    overflowY: 'scroll',
+  },
+  container: {
+    width: '80%',
+    height: 'auto',
+    background: theme.styleTypes.primary.accent,
+    padding: 40,
+    borderRadius: theme.borderRadius,
+    maxWidth: 1000,
+    '& h1, & h2': {
+      textAlign: 'center',
+      color: theme.styleTypes.primary.contrast,
+    },
+  },
+  plans: {
+    display: 'flex',
+    margin: [40, 0, 0],
+    height: 'auto',
+    '& > div': {
+      margin: [0, 15],
+      flex: 1,
+      height: 'auto',
+      background: theme.styleTypes.primary.contrast,
+      boxShadow: [0, 2, 30, color('#000').alpha(0.1).rgb().string()],
+    },
+  },
+  bigIcon: {
+    background: theme.styleTypes.danger.accent,
+    width: 120,
+    height: 120,
+    display: 'flex',
+    alignItems: 'center',
+    borderRadius: '100%',
+    justifyContent: 'center',
+    margin: [-100, 'auto', 20],
+    '& svg': {
+      width: '80px !important',
+      height: '80px !important',
+      filter: 'drop-shadow( 0px 2px 3px rgba(0, 0, 0, 0.3))',
+      fill: theme.styleTypes.danger.contrast,
+    },
+  },
+  headline: {
+    fontSize: 40,
+  },
+  subheadline: {
+    maxWidth: 660,
+    fontSize: 22,
+    lineHeight: 1.1,
+    margin: [0, 'auto'],
+  },
+  featureList: {
+    '& li': {
+      borderBottom: [1, 'solid', '#CECECE'],
+    },
+  },
+  footer: {
+    display: 'flex',
+    color: theme.styleTypes.primary.contrast,
+    marginTop: 20,
+    padding: [0, 15],
+  },
+  fullFeatureList: {
+    marginRight: 'auto',
+    textAlign: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: `${theme.styleTypes.primary.contrast} !important`,
+    '& svg': {
+      marginRight: 5,
+    },
+  },
+  scrollContainer: {
+    border: '1px solid red',
+    overflow: 'scroll-x',
+  },
+  featuredPlan: {
+    transform: 'scale(1.05)',
+  },
+  disclaimer: {
+    textAlign: 'right',
+    margin: [10, 15, 0, 0],
+  },
+});
+@injectSheet(styles) @observer
+class PlanSelection extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    firstname: PropTypes.string.isRequired,
+    plans: PropTypes.object.isRequired,
+    currency: PropTypes.string.isRequired,
+    subscriptionExpired: PropTypes.bool.isRequired,
+    upgradeAccount: PropTypes.func.isRequired,
+    stayOnFree: PropTypes.func.isRequired,
+    hadSubscription: PropTypes.bool.isRequired,
+  };
+  static contextTypes = {
+    intl: intlShape,
+  };
+  componentDidMount() {
+    gaPage('/select-plan');
+  }
+  render() {
+    const {
+      classes,
+      firstname,
+      plans,
+      currency,
+      subscriptionExpired,
+      upgradeAccount,
+      stayOnFree,
+      hadSubscription,
+    } = this.props;
+    const { intl } = this.context;
+    return (
+      <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.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.pro.yearly.id)}
+                className={classes.featuredPlan}
+                perUser
+                bestValue
+              >
+                <FeatureList
+                  plan={PLANS.PRO}
+                  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>
+            </div>
+            <div className={classes.footer}>
+              <a
+                href="https://meetfranz.com/pricing"
+                target="_blank"
+                className={classes.fullFeatureList}
+              >
+                <Icon icon={mdiArrowRight} />
+                {intl.formatMessage(messages.fullFeatureList)}
+              </a>
+              {/* <p className={classes.disclaimer}> */}
+              {intl.formatMessage(messages.pricesBasedOnAnnualPayment)}
+              {/* </p> */}
+            </div>
+          </div>
+        </div>
+      </Appear>
+    );
+  }
+}
+export default PlanSelection;
diff --git a/src/features/planSelection/containers/PlanSelectionScreen.js b/src/features/planSelection/containers/PlanSelectionScreen.js
new file mode 100644
index 000000000..cb62f45d3
--- /dev/null
+++ b/src/features/planSelection/containers/PlanSelectionScreen.js
@@ -0,0 +1,132 @@
+import React, { Component } from 'react';
+import { observer, inject } from 'mobx-react';
+import PropTypes from 'prop-types';
+import { remote } from 'electron';
+import { defineMessages, intlShape } from 'react-intl';
+import FeaturesStore from '../../../stores/FeaturesStore';
+import UserStore from '../../../stores/UserStore';
+import PlanSelection from '../components/PlanSelection';
+import ErrorBoundary from '../../../components/util/ErrorBoundary';
+import { planSelectionStore, GA_CATEGORY_PLAN_SELECTION } from '..';
+import { gaEvent, gaPage } from '../../../lib/analytics';
+const { dialog, app } = remote;
+const messages = defineMessages({
+  dialogTitle: {
+    id: 'feature.planSelection.fullscreen.dialog.title',
+    defaultMessage: '!!!Downgrade your Franz Plan',
+  },
+  dialogMessage: {
+    id: 'feature.planSelection.fullscreen.dialog.message',
+    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.',
+  },
+  dialogCTADowngrade: {
+    id: 'feature.planSelection.fullscreen.dialog.cta.downgrade',
+    defaultMessage: '!!!Downgrade to Free',
+  },
+  dialogCTAUpgrade: {
+    id: 'feature.planSelection.fullscreen.dialog.cta.upgrade',
+    defaultMessage: '!!!Choose Personal',
+  },
+});
+@inject('stores', 'actions') @observer
+class PlanSelectionScreen extends Component {
+  static contextTypes = {
+    intl: intlShape,
+  };
+  upgradeAccount(planId) {
+    const { upgradeAccount } = this.props.actions.payment;
+    upgradeAccount({
+      planId,
+    });
+  }
+  render() {
+    if (!planSelectionStore || !planSelectionStore.isFeatureActive || !planSelectionStore.showPlanSelectionOverlay) {
+      return null;
+    }
+    const { intl } = this.context;
+    const { user, features } = this.props.stores;
+    const { plans, currency } = features.features.pricingConfig;
+    const { activateTrial } = this.props.actions.user;
+    const { downgradeAccount, hideOverlay } = this.props.actions.planSelection;
+    return (
+      <ErrorBoundary>
+        <PlanSelection
+          firstname={user.data.firstname}
+          plans={plans}
+          currency={currency}
+          upgradeAccount={(planId) => {
+            if (user.data.hadSubscription) {
+              this.upgradeAccount(planId);
+              gaEvent(GA_CATEGORY_PLAN_SELECTION, 'SelectPlan', planId);
+            } else {
+              activateTrial({
+                planId,
+              });
+            }
+          }}
+          stayOnFree={() => {
+            gaPage('/select-plan/downgrade');
+            const selection = dialog.showMessageBoxSync(app.mainWindow, {
+              type: 'question',
+              message: intl.formatMessage(messages.dialogTitle),
+              detail: intl.formatMessage(messages.dialogMessage, {
+                currency,
+                price: plans.personal.yearly.price,
+              }),
+              buttons: [
+                intl.formatMessage(messages.dialogCTADowngrade),
+                intl.formatMessage(messages.dialogCTAUpgrade),
+              ],
+            });
+            gaEvent(GA_CATEGORY_PLAN_SELECTION, 'SelectPlan', 'Stay on Free');
+            if (selection === 0) {
+              downgradeAccount();
+              hideOverlay();
+            } else {
+              this.upgradeAccount(plans.personal.yearly.id);
+              gaEvent(GA_CATEGORY_PLAN_SELECTION, 'SelectPlan', 'Downgrade');
+            }
+          }}
+          subscriptionExpired={user.team && user.team.state === 'expired' && !user.team.userHasDowngraded}
+          hadSubscription={user.data.hadSubscription}
+        />
+      </ErrorBoundary>
+    );
+  }
+}
+export default PlanSelectionScreen;
+PlanSelectionScreen.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    features: PropTypes.instanceOf(FeaturesStore).isRequired,
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
+  actions: PropTypes.shape({
+    payment: PropTypes.shape({
+      upgradeAccount: PropTypes.func.isRequired,
+    }),
+    planSelection: PropTypes.shape({
+      downgradeAccount: PropTypes.func.isRequired,
+      hideOverlay: PropTypes.func.isRequired,
+    }),
+    user: PropTypes.shape({
+      activateTrial: PropTypes.func.isRequired,
+    }),
+  }).isRequired,
+};
diff --git a/src/features/planSelection/index.js b/src/features/planSelection/index.js
new file mode 100644
index 000000000..81189207a
--- /dev/null
+++ b/src/features/planSelection/index.js
@@ -0,0 +1,30 @@
+import { reaction } from 'mobx';
+import PlanSelectionStore from './store';
+const debug = require('debug')('Franz:feature:planSelection');
+export const GA_CATEGORY_PLAN_SELECTION = 'planSelection';
+export const planSelectionStore = new PlanSelectionStore();
+export default function initPlanSelection(stores, actions) {
+  stores.planSelection = planSelectionStore;
+  const { features } = stores;
+  // Toggle planSelection feature
+  reaction(
+    () => features.features.isPlanSelectionEnabled,
+    (isEnabled) => {
+      if (isEnabled) {
+        debug('Initializing `planSelection` feature');
+        planSelectionStore.start(stores, actions);
+      } else if (planSelectionStore.isFeatureActive) {
+        debug('Disabling `planSelection` feature');
+        planSelectionStore.stop();
+      }
+    },
+    {
+      fireImmediately: true,
+    },
+  );
+}
diff --git a/src/features/planSelection/store.js b/src/features/planSelection/store.js
new file mode 100644
index 000000000..448e323ff
--- /dev/null
+++ b/src/features/planSelection/store.js
@@ -0,0 +1,68 @@
+import {
+  action,
+  observable,
+  computed,
+} from 'mobx';
+import { planSelectionActions } from './actions';
+import { FeatureStore } from '../utils/FeatureStore';
+import { createActionBindings } from '../utils/ActionBinding';
+import { downgradeUserRequest } from './api';
+const debug = require('debug')('Franz:feature:planSelection:store');
+export default class PlanSelectionStore extends FeatureStore {
+  @observable isFeatureEnabled = false;
+  @observable isFeatureActive = false;
+  @observable hideOverlay = false;
+  @computed get showPlanSelectionOverlay() {
+    const { team, isPremium } = this.stores.user;
+    if (team && !this.hideOverlay && !isPremium) {
+      return team.state === 'expired' && !team.userHasDowngraded;
+    }
+    return false;
+  }
+  // ========== PUBLIC API ========= //
+  @action start(stores, actions, api) {
+    debug('PlanSelectionStore::start');
+    this.stores = stores;
+    this.actions = actions;
+    this.api = api;
+    // ACTIONS
+    this._registerActions(createActionBindings([
+      [planSelectionActions.downgradeAccount, this._downgradeAccount],
+      [planSelectionActions.hideOverlay, this._hideOverlay],
+    ]));
+    this.isFeatureActive = true;
+  }
+  @action stop() {
+    super.stop();
+    debug('PlanSelectionStore::stop');
+    this.isFeatureActive = false;
+  }
+  // ========== PRIVATE METHODS ========= //
+  // Actions
+  @action _downgradeAccount = () => {
+    downgradeUserRequest.execute();
+  }
+  @action _hideOverlay = () => {
+    this.hideOverlay = true;
+  }
+  @action _showOverlay = () => {
+    this.hideOverlay = false;
+  }
+}