Add trial onboarding during signup

15 files changed, 636 insertions, 147 deletions

diff --git a/src/actions/user.js b/src/actions/user.js
index ccf1fa56a..5d7d9a899 100644
--- a/src/actions/user.js
+++ b/src/actions/user.js
@@ -17,6 +17,9 @@ export default {
   retrievePassword: {
     email: PropTypes.string.isRequired,
   },
+  activateTrial: {
+    planId: PropTypes.string.isRequired,
+  },
   invite: {
     invites: PropTypes.array.isRequired,
   },
diff --git a/src/api/UserApi.js b/src/api/UserApi.js
index edfb88988..8ba8cd1e9 100644
--- a/src/api/UserApi.js
+++ b/src/api/UserApi.js
@@ -25,6 +25,10 @@ export default class UserApi {
     return this.server.retrievePassword(email);
   }
 
+  activateTrial(data) {
+    return this.server.activateTrial(data);
+  }
+
   invite(data) {
     return this.server.inviteUser(data);
   }
diff --git a/src/api/server/ServerApi.js b/src/api/server/ServerApi.js
index a9ce202ff..f2568d597 100644
--- a/src/api/server/ServerApi.js
+++ b/src/api/server/ServerApi.js
@@ -77,6 +77,22 @@ export default class ServerApi {
     return u.token;
   }
 
+  async activateTrial(data) {
+    const request = await sendAuthRequest(`${API_URL}/payment/trial`, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+    if (!request.ok) {
+      throw request;
+    }
+    const trial = await request.json();
+
+    console.log(trial);
+
+    debug('ServerApi::signup resolves', trial);
+    return true;
+  }
+
   async inviteUser(data) {
     const request = await sendAuthRequest(`${API_URL}/invite`, {
       method: 'POST',
@@ -469,7 +485,7 @@ export default class ServerApi {
         return services;
       }
     } catch (err) {
-      throw (new Error('ServerApi::getLegacyServices no config found'));
+      console.error('ServerApi::getLegacyServices no config found');
     }
 
     return [];
diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js
index 7ab14f429..d20779025 100644
--- a/src/components/auth/Pricing.js
+++ b/src/components/auth/Pricing.js
@@ -1,40 +1,107 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
-// import { Link } from 'react-router';
+import injectSheet from 'react-jss';
+import { H2, Loader } from '@meetfranz/ui';
+import classnames from 'classnames';
+
+import { Button } from '@meetfranz/forms';
+import { FeatureItem } from '../ui/FeatureItem';
+import FeatureList from '../ui/FeatureList';
 
-// import Button from '../ui/Button';
-import Loader from '../ui/Loader';
-import Appear from '../ui/effects/Appear';
-import SubscriptionForm from '../../containers/subscription/SubscriptionFormScreen';
 
 const messages = defineMessages({
   headline: {
-    id: 'pricing.headline',
-    defaultMessage: '!!!Support Franz',
+    id: 'pricing.trial.headline',
+    defaultMessage: '!!!Franz Professional',
+  },
+  personalOffer: {
+    id: 'pricing.trial.subheadline',
+    defaultMessage: '!!!Your personal welcome offer:',
+  },
+  noStringsAttachedHeadline: {
+    id: 'pricing.trial.terms.headline',
+    defaultMessage: '!!!No strings attached',
+  },
+  noCreditCard: {
+    id: 'pricing.trial.terms.noCreditCard',
+    defaultMessage: '!!!No credit card required',
   },
-  monthlySupportLabel: {
-    id: 'pricing.support.label',
-    defaultMessage: '!!!Select your support plan',
+  automaticTrialEnd: {
+    id: 'pricing.trial.terms.automaticTrialEnd',
+    defaultMessage: '!!!Your free trial ends automatically after 14 days',
   },
-  submitButtonLabel: {
-    id: 'pricing.submit.label',
-    defaultMessage: '!!!Support the development of Franz',
+  activationError: {
+    id: 'pricing.trial.error',
+    defaultMessage: '!!!Sorry, we could not activate your trial!',
   },
-  skipPayment: {
-    id: 'pricing.link.skipPayment',
-    defaultMessage: '!!!I don\'t want to support the development of Franz.',
+  ctaAccept: {
+    id: 'pricing.trial.cta.accept',
+    defaultMessage: '!!!Yes, upgrade my account to Franz Professional',
+  },
+  ctaSkip: {
+    id: 'pricing.trial.cta.skip',
+    defaultMessage: '!!!Continue to Franz',
+  },
+  featuresHeadline: {
+    id: 'pricing.trial.features.headline',
+    defaultMessage: '!!!Franz Professional includes:',
   },
 });
 
-export default @observer class Signup extends Component {
+const styles = theme => ({
+  container: {
+    position: 'relative',
+    marginLeft: -150,
+  },
+  welcomeOffer: {
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+  keyTerms: {
+    textAlign: 'center',
+  },
+  content: {
+    position: 'relative',
+    zIndex: 20,
+  },
+  featureContainer: {
+    width: 300,
+    position: 'absolute',
+    left: 'calc(100% / 2 + 225px)',
+    top: 155,
+    background: theme.signup.pricing.feature.background,
+    height: 'auto',
+    padding: 20,
+    borderTopRightRadius: theme.borderRadius,
+    borderBottomRightRadius: theme.borderRadius,
+    zIndex: 10,
+  },
+  featureItem: {
+    borderBottom: [1, 'solid', theme.signup.pricing.feature.border],
+  },
+  cta: {
+    marginTop: 40,
+    width: '100%',
+  },
+  skipLink: {
+    textAlign: 'center',
+    marginTop: 10,
+  },
+  error: {
+    margin: [20, 0, 0],
+    color: theme.styleTypes.danger.accent,
+  },
+});
+
+export default @observer @injectSheet(styles) class Signup extends Component {
   static propTypes = {
-    donor: MobxPropTypes.objectOrObservableObject.isRequired,
-    isLoading: PropTypes.bool.isRequired,
-    isLoadingUser: PropTypes.bool.isRequired,
-    onCloseSubscriptionWindow: PropTypes.func.isRequired,
-    skipAction: PropTypes.func.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    isLoadingRequiredData: PropTypes.bool.isRequired,
+    isActivatingTrial: PropTypes.bool.isRequired,
+    trialActivationError: PropTypes.bool.isRequired,
+    classes: PropTypes.object.isRequired,
   };
 
   static contextTypes = {
@@ -43,70 +110,37 @@ export default @observer class Signup extends Component {
 
   render() {
     const {
-      donor,
-      isLoading,
-      isLoadingUser,
-      onCloseSubscriptionWindow,
-      skipAction,
+      onSubmit,
+      isLoadingRequiredData,
+      isActivatingTrial,
+      trialActivationError,
+      classes,
     } = this.props;
     const { intl } = this.context;
 
     return (
-      <div className="auth__scroll-container">
-        <div className="auth__container auth__container--signup">
+      <div className={classnames('auth__scroll-container', classes.container)}>
+        <div className={classnames('auth__container', 'auth__container--signup', classes.content)}>
           <form className="franz-form auth__form">
-            <img
-              src="./assets/images/sm.png"
-              className="auth__logo auth__logo--sm"
-              alt=""
-            />
+            {isLoadingRequiredData ? <Loader /> : (
+              <img
+                src="./assets/images/sm.png"
+                className="auth__logo auth__logo--sm"
+                alt=""
+              />
+            )}
+            <p className={classes.welcomeOffer}>{intl.formatMessage(messages.personalOffer)}</p>
             <h1>{intl.formatMessage(messages.headline)}</h1>
             <div className="auth__letter">
-              {isLoadingUser && (
-                <p>Loading</p>
-              )}
-              {!isLoadingUser && (
-                donor.amount ? (
-                  <span>
-                    <p>
-                      Thank you so much for your previous donation of
-                      {' '}
-                      <strong>
-                        $
-                        {donor.amount}
-                      </strong>
-                      .
-                      <br />
-                      Your support allowed us to get where we are today.
-                      <br />
-                    </p>
-                    <p>
-                      As an early supporter, you get
-                      {' '}
-                      <strong>a lifetime premium supporter license</strong>
-                      {' '}
-                      without any
-                      additional charges.
-                    </p>
-                    <p>
-                      However, If you want to keep supporting us, you are more than welcome to subscribe to a plan.
-                      <br />
-                      <br />
-                    </p>
-                  </span>
-                ) : (
-                  <span>
-                    <p>
-                      We built Franz with a lot of effort, manpower and love,
-                      to bring you the best messaging experience.
-                      <br />
-                    </p>
-                    <p>
-                      Getting a Franz Premium Supporter License will allow us to keep improving Franz for you.
-                    </p>
-                  </span>
-                )
-              )}
+              <p>
+                We built Franz with a lot of effort, manpower and love,
+                to boost up your messaging experience.
+                <br />
+              </p>
+              <p>
+                Get the free 14 day Franz Professional trial and see your communication evolving.
+                <br />
+              </p>
               <p>
                 Thanks for being a hero.
               </p>
@@ -114,20 +148,48 @@ export default @observer class Signup extends Component {
                 <strong>Stefan Malzner</strong>
               </p>
             </div>
-            <Loader loaded={!isLoading}>
-              <Appear transitionName="slideDown">
-                <span className="label">{intl.formatMessage(messages.monthlySupportLabel)}</span>
-                <SubscriptionForm
-                  onCloseWindow={onCloseSubscriptionWindow}
-                  showSkipOption
-                  skipAction={skipAction}
-                  hideInfo={Boolean(donor.amount)}
-                  skipButtonLabel={intl.formatMessage(messages.skipPayment)}
-                />
-              </Appear>
-            </Loader>
+            <div className={classes.keyTerms}>
+              <H2>
+                {intl.formatMessage(messages.noStringsAttachedHeadline)}
+              </H2>
+              <ul className={classes.keyTermsList}>
+                <FeatureItem icon="👉" name={intl.formatMessage(messages.noCreditCard)} />
+                <FeatureItem icon="👉" name={intl.formatMessage(messages.automaticTrialEnd)} />
+              </ul>
+            </div>
+            {trialActivationError && (
+              <p className={classes.error}>{intl.formatMessage(messages.activationError)}</p>
+            )}
+            <Button
+              label={intl.formatMessage(messages.ctaAccept)}
+              className={classes.cta}
+              onClick={onSubmit}
+              busy={isActivatingTrial}
+              disabled={isLoadingRequiredData || isActivatingTrial}
+            />
+            <p className={classes.skipLink}>
+              <a href="#/">{intl.formatMessage(messages.ctaSkip)}</a>
+            </p>
           </form>
         </div>
+        <div className={classes.featureContainer}>
+          <H2>
+            {intl.formatMessage(messages.featuresHeadline)}
+          </H2>
+          {/* <ul className={classes.features}>
+            <FeatureItem name="Add unlimited services" className={classes.featureItem} />
+            <FeatureItem name="Spellchecker support" className={classes.featureItem} />
+            <FeatureItem name="Workspaces" className={classes.featureItem} />
+            <FeatureItem name="Add Custom Websites" className={classes.featureItem} />
+            <FeatureItem name="On-premise & other Hosted Services" className={classes.featureItem} />
+            <FeatureItem name="Install 3rd party services" className={classes.featureItem} />
+            <FeatureItem name="Service Proxies" className={classes.featureItem} />
+            <FeatureItem name="Team Management" className={classes.featureItem} />
+            <FeatureItem name="No Waiting Screens" className={classes.featureItem} />
+            <FeatureItem name="Forever ad-free" className={classes.featureItem} />
+          </ul> */}
+          <FeatureList />
+        </div>
       </div>
     );
   }
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index 48de0ebaa..7f1624003 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -3,6 +3,9 @@ import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { Link } from 'react-router';
 import { defineMessages, intlShape } from 'react-intl';
+import Confetti from 'react-confetti';
+import ms from 'ms';
+import injectSheet from 'react-jss';
 
 import ServiceView from './ServiceView';
 import Appear from '../../ui/effects/Appear';
@@ -18,7 +21,16 @@ const messages = defineMessages({
   },
 });
 
-export default @observer class Services extends Component {
+
+const styles = {
+  confettiContainer: {
+    position: 'absolute',
+    width: '100%',
+    zIndex: 0,
+  },
+};
+
+export default @observer @injectSheet(styles) class Services extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray,
     setWebviewReference: PropTypes.func.isRequired,
@@ -28,6 +40,8 @@ export default @observer class Services extends Component {
     reload: PropTypes.func.isRequired,
     openSettings: PropTypes.func.isRequired,
     update: PropTypes.func.isRequired,
+    userHasCompletedSignup: PropTypes.bool.isRequired,
+    classes: PropTypes.object.isRequired,
   };
 
   static defaultProps = {
@@ -38,6 +52,18 @@ export default @observer class Services extends Component {
     intl: intlShape,
   };
 
+  state = {
+    showConfetti: true,
+  }
+
+  componentDidMount() {
+    window.setTimeout(() => {
+      this.setState({
+        showConfetti: false,
+      });
+    }, ms('8s'));
+  }
+
   render() {
     const {
       services,
@@ -48,29 +74,47 @@ export default @observer class Services extends Component {
       reload,
       openSettings,
       update,
+      userHasCompletedSignup,
+      classes,
     } = this.props;
+
+    const {
+      showConfetti,
+    } = this.state;
+
     const { intl } = this.context;
 
     return (
       <div className="services">
         {services.length === 0 && (
-          <Appear
-            timeout={1500}
-            transitionName="slideUp"
-          >
-            <div className="services__no-service">
-              <img src="./assets/images/logo.svg" alt="" />
-              <h1>{intl.formatMessage(messages.welcome)}</h1>
-              <Appear
-                timeout={300}
-                transitionName="slideUp"
-              >
-                <Link to="/settings/recipes" className="button">
-                  {intl.formatMessage(messages.getStarted)}
-                </Link>
-              </Appear>
-            </div>
-          </Appear>
+          <>
+            {userHasCompletedSignup && (
+              <div className={classes.confettiContainer}>
+                <Confetti
+                  width={window.width}
+                  height={window.height}
+                  numberOfPieces={showConfetti ? 200 : 0}
+                />
+              </div>
+            )}
+            <Appear
+              timeout={1500}
+              transitionName="slideUp"
+            >
+              <div className="services__no-service">
+                <img src="./assets/images/logo.svg" alt="" />
+                <h1>{intl.formatMessage(messages.welcome)}</h1>
+                <Appear
+                  timeout={300}
+                  transitionName="slideUp"
+                >
+                  <Link to="/settings/recipes" className="button">
+                    {intl.formatMessage(messages.getStarted)}
+                  </Link>
+                </Appear>
+              </div>
+            </Appear>
+          </>
         )}
         {services.map(service => (
           <ServiceView
diff --git a/src/components/ui/FeatureItem.js b/src/components/ui/FeatureItem.js
new file mode 100644
index 000000000..a63f5f7b5
--- /dev/null
+++ b/src/components/ui/FeatureItem.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import injectSheet from 'react-jss';
+import { Icon } from '@meetfranz/ui';
+import classnames from 'classnames';
+
+const styles = theme => ({
+  featureItem: {
+    borderBottom: [1, 'solid', theme.legacyStyles.themeGrayDark],
+    padding: [8, 0],
+    display: 'flex',
+    alignItems: 'center',
+  },
+  featureIcon: {
+    fill: theme.brandSuccess,
+    marginRight: 10,
+  },
+});
+
+export const FeatureItem = injectSheet(styles)(({
+  classes, className, name, icon,
+}) => (
+  <li className={classnames({
+    [classes.featureItem]: true,
+    [className]: className,
+  })}
+  >
+    {icon ? (
+      <span className={classes.featureIcon}>{icon}</span>
+    ) : (
+      <Icon icon="mdiCheckCircle" className={classes.featureIcon} size={1.5} />
+    )}
+    {name}
+  </li>
+));
+
+export default FeatureItem;
diff --git a/src/components/ui/FeatureList.js b/src/components/ui/FeatureList.js
new file mode 100644
index 000000000..62944ad75
--- /dev/null
+++ b/src/components/ui/FeatureList.js
@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, intlShape } from 'react-intl';
+
+import { FeatureItem } from './FeatureItem';
+
+const messages = defineMessages({
+  unlimitedServices: {
+    id: 'pricing.features.unlimitedServices',
+    defaultMessage: '!!!Add unlimited services',
+  },
+  spellchecker: {
+    id: 'pricing.features.spellchecker',
+    defaultMessage: '!!!Spellchecker support',
+  },
+  workspaces: {
+    id: 'pricing.features.workspaces',
+    defaultMessage: '!!!Workspaces',
+  },
+  customWebsites: {
+    id: 'pricing.features.customWebsites',
+    defaultMessage: '!!!Add Custom Websites',
+  },
+  onPremise: {
+    id: 'pricing.features.onPremise',
+    defaultMessage: '!!!On-premise & other Hosted Services',
+  },
+  thirdPartyServices: {
+    id: 'pricing.features.thirdPartyServices',
+    defaultMessage: '!!!Install 3rd party services',
+  },
+  serviceProxies: {
+    id: 'pricing.features.serviceProxies',
+    defaultMessage: '!!!Service Proxies',
+  },
+  teamManagement: {
+    id: 'pricing.features.teamManagement',
+    defaultMessage: '!!!Team Management',
+  },
+  appDelays: {
+    id: 'pricing.features.appDelays',
+    defaultMessage: '!!!No Waiting Screens',
+  },
+  adFree: {
+    id: 'pricing.features.adFree',
+    defaultMessage: '!!!Forever ad-free',
+  },
+});
+
+export class FeatureList extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    featureClassName: PropTypes.string,
+  };
+
+  static defaultProps = {
+    className: '',
+    featureClassName: '',
+  }
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      className,
+      featureClassName,
+    } = this.props;
+    const { intl } = this.context;
+
+    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} />
+      </ul>
+    );
+  }
+}
+
+export default FeatureList;
diff --git a/src/containers/auth/PricingScreen.js b/src/containers/auth/PricingScreen.js
index 8d179a170..af1651931 100644
--- a/src/containers/auth/PricingScreen.js
+++ b/src/containers/auth/PricingScreen.js
@@ -5,7 +5,6 @@ import { RouterStore } from 'mobx-react-router';
 
 import Pricing from '../../components/auth/Pricing';
 import UserStore from '../../stores/UserStore';
-import PaymentStore from '../../stores/PaymentStore';
 
 import { globalError as globalErrorPropType } from '../../prop-types';
 
@@ -14,20 +13,40 @@ export default @inject('stores', 'actions') @observer class PricingScreen extend
     error: globalErrorPropType.isRequired,
   };
 
+  async submit() {
+    const {
+      actions,
+      stores,
+    } = this.props;
+
+    const { activateTrialRequest } = stores.user;
+    const { defaultTrialPlan } = stores.features.features;
+
+    actions.user.activateTrial({ planId: defaultTrialPlan });
+    await activateTrialRequest._promise;
+
+    if (!activateTrialRequest.isError) {
+      stores.router.push('/');
+      stores.user.hasCompletedSignup = true;
+    }
+  }
+
   render() {
-    const { actions, stores, error } = this.props;
+    const {
+      error,
+      stores,
+    } = this.props;
 
-    const nextStepRoute = stores.user.legacyServices.length ? stores.user.importRoute : stores.user.inviteRoute;
+    const { getUserInfoRequest, activateTrialRequest } = stores.user;
+    const { featuresRequest } = stores.features;
 
     return (
       <Pricing
-        donor={stores.user.data.donor || {}}
-        onSubmit={actions.user.signup}
-        onCloseSubscriptionWindow={() => this.props.stores.router.push(nextStepRoute)}
-        isLoading={stores.payment.plansRequest.isExecuting}
-        isLoadingUser={stores.user.getUserInfoRequest.isExecuting}
+        onSubmit={this.submit.bind(this)}
+        isLoadingRequiredData={(getUserInfoRequest.isExecuting || !getUserInfoRequest.wasExecuted) || (featuresRequest.isExecuting || !featuresRequest.wasExecuted)}
+        isActivatingTrial={activateTrialRequest.isExecuting}
+        trialActivationError={activateTrialRequest.isError}
         error={error}
-        skipAction={() => this.props.stores.router.push(nextStepRoute)}
       />
     );
   }
@@ -36,12 +55,11 @@ export default @inject('stores', 'actions') @observer class PricingScreen extend
 PricingScreen.wrappedComponent.propTypes = {
   actions: PropTypes.shape({
     user: PropTypes.shape({
-      signup: PropTypes.func.isRequired,
+      activateTrial: PropTypes.func.isRequired,
     }).isRequired,
   }).isRequired,
   stores: PropTypes.shape({
     user: PropTypes.instanceOf(UserStore).isRequired,
-    payment: PropTypes.instanceOf(PaymentStore).isRequired,
     router: PropTypes.instanceOf(RouterStore).isRequired,
   }).isRequired,
 };
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index cf3da71e8..b4e32cffa 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -10,6 +10,7 @@ import FeaturesStore from '../../stores/FeaturesStore';
 import UIStore from '../../stores/UIStore';
 import NewsStore from '../../stores/NewsStore';
 import SettingsStore from '../../stores/SettingsStore';
+import UserStore from '../../stores/UserStore';
 import RequestStore from '../../stores/RequestStore';
 import GlobalErrorStore from '../../stores/GlobalErrorStore';
 
@@ -39,6 +40,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
       settings,
       globalError,
       requests,
+      user,
     } = this.props.stores;
 
     const {
@@ -125,6 +127,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
         reload={reload}
         openSettings={openSettings}
         update={updateService}
+        userHasCompletedSignup={user.hasCompletedSignup}
       />
     );
 
@@ -166,6 +169,7 @@ AppLayoutContainer.wrappedComponent.propTypes = {
     ui: PropTypes.instanceOf(UIStore).isRequired,
     news: PropTypes.instanceOf(NewsStore).isRequired,
     settings: PropTypes.instanceOf(SettingsStore).isRequired,
+    user: PropTypes.instanceOf(UserStore).isRequired,
     requests: PropTypes.instanceOf(RequestStore).isRequired,
     globalError: PropTypes.instanceOf(GlobalErrorStore).isRequired,
   }).isRequired,
diff --git a/src/i18n/messages/src/components/auth/Pricing.json b/src/i18n/messages/src/components/auth/Pricing.json
index f711a55b4..f15617ca5 100644
--- a/src/i18n/messages/src/components/auth/Pricing.json
+++ b/src/i18n/messages/src/components/auth/Pricing.json
@@ -1,53 +1,118 @@
 [
   {
-    "id": "pricing.headline",
-    "defaultMessage": "!!!Support Franz",
+    "id": "pricing.trial.headline",
+    "defaultMessage": "!!!Franz Professional",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 13,
+      "line": 15,
       "column": 12
     },
     "end": {
-      "line": 16,
+      "line": 18,
       "column": 3
     }
   },
   {
-    "id": "pricing.support.label",
-    "defaultMessage": "!!!Select your support plan",
+    "id": "pricing.trial.subheadline",
+    "defaultMessage": "!!!Your personal welcome offer:",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 17,
-      "column": 23
+      "line": 19,
+      "column": 17
     },
     "end": {
-      "line": 20,
+      "line": 22,
       "column": 3
     }
   },
   {
-    "id": "pricing.submit.label",
-    "defaultMessage": "!!!Support the development of Franz",
+    "id": "pricing.trial.terms.headline",
+    "defaultMessage": "!!!No strings attached",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 21,
+      "line": 23,
+      "column": 29
+    },
+    "end": {
+      "line": 26,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.terms.noCreditCard",
+    "defaultMessage": "!!!No credit card required",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 27,
+      "column": 16
+    },
+    "end": {
+      "line": 30,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.terms.automaticTrialEnd",
+    "defaultMessage": "!!!Your free trial ends automatically after 14 days",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 31,
       "column": 21
     },
     "end": {
-      "line": 24,
+      "line": 34,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.error",
+    "defaultMessage": "!!!Sorry, we could not activate your trial!",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 35,
+      "column": 19
+    },
+    "end": {
+      "line": 38,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.cta.accept",
+    "defaultMessage": "!!!Yes, upgrade my account to Franz Professional",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 39,
+      "column": 13
+    },
+    "end": {
+      "line": 42,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.cta.skip",
+    "defaultMessage": "!!!Continue to Franz",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 43,
+      "column": 11
+    },
+    "end": {
+      "line": 46,
       "column": 3
     }
   },
   {
-    "id": "pricing.link.skipPayment",
-    "defaultMessage": "!!!I don't want to support the development of Franz.",
+    "id": "pricing.trial.features.headline",
+    "defaultMessage": "!!!Franz Professional includes:",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 25,
-      "column": 15
+      "line": 47,
+      "column": 20
     },
     "end": {
-      "line": 28,
+      "line": 50,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/services/content/Services.json b/src/i18n/messages/src/components/services/content/Services.json
index 884ab0c90..eb466c0ac 100644
--- a/src/i18n/messages/src/components/services/content/Services.json
+++ b/src/i18n/messages/src/components/services/content/Services.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Welcome to Franz",
     "file": "src/components/services/content/Services.js",
     "start": {
-      "line": 11,
+      "line": 14,
       "column": 11
     },
     "end": {
-      "line": 14,
+      "line": 17,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Get started",
     "file": "src/components/services/content/Services.js",
     "start": {
-      "line": 15,
+      "line": 18,
       "column": 14
     },
     "end": {
-      "line": 18,
+      "line": 21,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/ui/FeatureList.json b/src/i18n/messages/src/components/ui/FeatureList.json
new file mode 100644
index 000000000..497e299a4
--- /dev/null
+++ b/src/i18n/messages/src/components/ui/FeatureList.json
@@ -0,0 +1,132 @@
+[
+  {
+    "id": "pricing.features.unlimitedServices",
+    "defaultMessage": "!!!Add unlimited services",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 8,
+      "column": 21
+    },
+    "end": {
+      "line": 11,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.spellchecker",
+    "defaultMessage": "!!!Spellchecker support",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 12,
+      "column": 16
+    },
+    "end": {
+      "line": 15,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.workspaces",
+    "defaultMessage": "!!!Workspaces",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 16,
+      "column": 14
+    },
+    "end": {
+      "line": 19,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.customWebsites",
+    "defaultMessage": "!!!Add Custom Websites",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 20,
+      "column": 18
+    },
+    "end": {
+      "line": 23,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.onPremise",
+    "defaultMessage": "!!!On-premise & other Hosted Services",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 24,
+      "column": 13
+    },
+    "end": {
+      "line": 27,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.thirdPartyServices",
+    "defaultMessage": "!!!Install 3rd party services",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 28,
+      "column": 22
+    },
+    "end": {
+      "line": 31,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.serviceProxies",
+    "defaultMessage": "!!!Service Proxies",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 32,
+      "column": 18
+    },
+    "end": {
+      "line": 35,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.teamManagement",
+    "defaultMessage": "!!!Team Management",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 36,
+      "column": 18
+    },
+    "end": {
+      "line": 39,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.appDelays",
+    "defaultMessage": "!!!No Waiting Screens",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 40,
+      "column": 13
+    },
+    "end": {
+      "line": 43,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.adFree",
+    "defaultMessage": "!!!Forever ad-free",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 44,
+      "column": 10
+    },
+    "end": {
+      "line": 47,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index b5423af3b..6d746254e 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -37,6 +37,8 @@ export default class UserStore extends Store {
 
   @observable passwordRequest = new Request(this.api.user, 'password');
 
+  @observable activateTrialRequest = new Request(this.api.user, 'activateTrial');
+
   @observable inviteRequest = new Request(this.api.user, 'invite');
 
   @observable getUserInfoRequest = new CachedRequest(this.api.user, 'getInfo');
@@ -57,7 +59,7 @@ export default class UserStore extends Store {
 
   @observable accountType;
 
-  @observable hasCompletedSignup = null;
+  @observable hasCompletedSignup = false;
 
   @observable userData = {};
 
@@ -77,6 +79,7 @@ export default class UserStore extends Store {
     this.actions.user.retrievePassword.listen(this._retrievePassword.bind(this));
     this.actions.user.logout.listen(this._logout.bind(this));
     this.actions.user.signup.listen(this._signup.bind(this));
+    this.actions.user.activateTrial.listen(this._activateTrial.bind(this));
     this.actions.user.invite.listen(this._invite.bind(this));
     this.actions.user.update.listen(this._update.bind(this));
     this.actions.user.resetStatus.listen(this._resetStatus.bind(this));
@@ -199,6 +202,20 @@ export default class UserStore extends Store {
     gaEvent('User', 'retrievePassword');
   }
 
+  @action async _activateTrial({ planId }) {
+    debug('activate trial', planId);
+
+    this.activateTrialRequest.execute({
+      plan: planId,
+    });
+
+    await this.activateTrialRequest._promise;
+
+    this.stores.features.featuresRequest.invalidate({ immediately: true });
+
+    gaEvent('User', 'activateTrial');
+  }
+
   @action async _invite({ invites }) {
     const data = invites.filter(invite => invite.email !== '');
 
diff --git a/src/styles/auth.scss b/src/styles/auth.scss
index 0a075036a..154a71a36 100644
--- a/src/styles/auth.scss
+++ b/src/styles/auth.scss
@@ -9,7 +9,7 @@
   }
 
   .auth__logo.auth__logo--sm {
-    border: 4px solid $dark-theme-black;
+    border: none;
     box-shadow: 0 0 6px rgba($dark-theme-black, .5);
   }
 
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
index f46ede4a2..d87ce652a 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -51,7 +51,6 @@ button {
   padding: 0;
 
   &:focus { outline: 0; }
-  .theme__dark & { color: $dark-theme-gray-smoke; }
 }
 
 html {