9 files changed, 183 insertions, 48 deletions

diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js
index aadb18d91..593cb9c4b 100644
--- a/src/components/auth/Pricing.js
+++ b/src/components/auth/Pricing.js
@@ -13,12 +13,20 @@ import { FeatureList } from '../ui/FeatureList';
 
 const messages = defineMessages({
   headline: {
-    id: 'pricing.trial.headline',
-    defaultMessage: '!!!Franz Professional',
+    id: 'pricing.trial.headline.pro',
+    defaultMessage: '!!!Hi {name}, welcome to Franz',
   },
-  personalOffer: {
-    id: 'pricing.trial.subheadline',
-    defaultMessage: '!!!Your personal welcome offer:',
+  specialTreat: {
+    id: 'pricing.trial.intro.specialTreat',
+    defaultMessage: '!!!We have a special treat for you.',
+  },
+  tryPro: {
+    id: 'pricing.trial.intro.tryPro',
+    defaultMessage: '!!!Enjoy the full Franz Professional experience completely free for 14 days.',
+  },
+  happyMessaging: {
+    id: 'pricing.trial.intro.happyMessaging',
+    defaultMessage: '!!!Happy messaging,',
   },
   noStringsAttachedHeadline: {
     id: 'pricing.trial.terms.headline',
@@ -32,13 +40,21 @@ const messages = defineMessages({
     id: 'pricing.trial.terms.automaticTrialEnd',
     defaultMessage: '!!!Your free trial ends automatically after 14 days',
   },
+  trialWorth: {
+    id: 'pricing.trial.terms.trialWorth',
+    defaultMessage: '!!!Free trial (normally {currency}{price} per month)',
+  },
   activationError: {
     id: 'pricing.trial.error',
     defaultMessage: '!!!Sorry, we could not activate your trial!',
   },
   ctaAccept: {
     id: 'pricing.trial.cta.accept',
-    defaultMessage: '!!!Yes, upgrade my account to Franz Professional',
+    defaultMessage: '!!!Start my 14-day Franz Professional Trial ',
+  },
+  ctaStart: {
+    id: 'pricing.trial.cta.start',
+    defaultMessage: '!!!Start using Franz',
   },
   ctaSkip: {
     id: 'pricing.trial.cta.skip',
@@ -58,6 +74,7 @@ const styles = theme => ({
   welcomeOffer: {
     textAlign: 'center',
     fontWeight: 'bold',
+    marginBottom: '6 !important',
   },
   keyTerms: {
     textAlign: 'center',
@@ -93,6 +110,34 @@ const styles = theme => ({
     margin: [20, 0, 0],
     color: theme.styleTypes.danger.accent,
   },
+  priceContainer: {
+    display: 'flex',
+    justifyContent: 'space-evenly',
+    margin: [10, 0, 15],
+  },
+  price: {
+    '& sup': {
+      verticalAlign: 14,
+      fontSize: 20,
+    },
+  },
+  figure: {
+    fontSize: 40,
+  },
+  regularPrice: {
+    position: 'relative',
+
+    '&:before': {
+      content: '" "',
+      position: 'absolute',
+      width: '130%',
+      height: 1,
+      top: 14,
+      left: -12,
+      borderBottom: [3, 'solid', 'red'],
+      transform: 'rotateZ(-20deg)',
+    },
+  },
 });
 
 export default @injectSheet(styles) @observer class Signup extends Component {
@@ -101,7 +146,11 @@ export default @injectSheet(styles) @observer class Signup extends Component {
     isLoadingRequiredData: PropTypes.bool.isRequired,
     isActivatingTrial: PropTypes.bool.isRequired,
     trialActivationError: PropTypes.bool.isRequired,
+    canSkipTrial: PropTypes.bool.isRequired,
     classes: PropTypes.object.isRequired,
+    currency: PropTypes.string.isRequired,
+    price: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
   };
 
   static contextTypes = {
@@ -114,10 +163,16 @@ export default @injectSheet(styles) @observer class Signup extends Component {
       isLoadingRequiredData,
       isActivatingTrial,
       trialActivationError,
+      canSkipTrial,
       classes,
+      currency,
+      price,
+      name,
     } = this.props;
     const { intl } = this.context;
 
+    const [intPart, fractionPart] = (price).toString().split('.');
+
     return (
       <div className={classnames('auth__scroll-container', classes.container)}>
         <div className={classnames('auth__container', 'auth__container--signup', classes.content)}>
@@ -129,30 +184,51 @@ export default @injectSheet(styles) @observer class Signup extends Component {
                 alt=""
               />
             )}
-            <p className={classes.welcomeOffer}>{intl.formatMessage(messages.personalOffer)}</p>
-            <h1>{intl.formatMessage(messages.headline)}</h1>
+            <h1>{intl.formatMessage(messages.headline, { name })}</h1>
             <div className="auth__letter">
               <p>
-                We built Franz with a lot of effort, manpower and love,
-                to boost up your messaging experience.
+                {intl.formatMessage(messages.specialTreat)}
                 <br />
               </p>
               <p>
-                Get the free 14 day Franz Professional trial and see your communication evolving.
+                {intl.formatMessage(messages.tryPro)}
                 <br />
               </p>
               <p>
-                Thanks for being a hero.
+                {intl.formatMessage(messages.happyMessaging)}
               </p>
               <p>
                 <strong>Stefan Malzner</strong>
               </p>
             </div>
+            <div className={classes.priceContainer}>
+              <p className={classnames(classes.price, classes.regularPrice)}>
+                <span className={classes.figure}>
+                  {currency}
+                  {intPart}
+                </span>
+                <sup>{fractionPart}</sup>
+              </p>
+              <p className={classnames(classes.price, classes.trialPrice)}>
+                <span className={classes.figure}>
+                  {currency}
+                  0
+                </span>
+                <sup>00</sup>
+              </p>
+            </div>
             <div className={classes.keyTerms}>
               <H2>
                 {intl.formatMessage(messages.noStringsAttachedHeadline)}
               </H2>
               <ul className={classes.keyTermsList}>
+                <FeatureItem
+                  icon="👉"
+                  name={intl.formatMessage(messages.trialWorth, {
+                    currency,
+                    price,
+                  })}
+                />
                 <FeatureItem icon="👉" name={intl.formatMessage(messages.noCreditCard)} />
                 <FeatureItem icon="👉" name={intl.formatMessage(messages.automaticTrialEnd)} />
               </ul>
@@ -161,33 +237,23 @@ export default @injectSheet(styles) @observer class Signup extends Component {
               <p className={classes.error}>{intl.formatMessage(messages.activationError)}</p>
             )}
             <Button
-              label={intl.formatMessage(messages.ctaAccept)}
+              label={intl.formatMessage(!canSkipTrial ? messages.ctaStart : messages.ctaAccept)}
               className={classes.cta}
               onClick={onSubmit}
               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}>
           <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/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 2b0719f92..80e6daf19 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -19,6 +19,8 @@ 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';
+import TrialStatusBar from '../../features/trialStatusBar/containers/TrialStatusBarScreen';
 
 function createMarkup(HTMLString) {
   return { __html: HTMLString };
@@ -189,9 +191,11 @@ class AppLayout extends Component {
               <QuickSwitch />
               {services}
               {children}
+              <TrialStatusBar />
             </div>
             <Todos />
           </div>
+          <PlanSelection />
         </div>
       </ErrorBoundary>
     );
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index f588449f4..83dc34a52 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -109,6 +109,7 @@ class AccountDashboard extends Component {
     openBilling: PropTypes.func.isRequired,
     upgradeToPro: PropTypes.func.isRequired,
     openInvoices: PropTypes.func.isRequired,
+    onCloseSubscriptionWindow: PropTypes.func.isRequired,
   };
 
   static contextTypes = {
@@ -130,6 +131,7 @@ class AccountDashboard extends Component {
       openBilling,
       upgradeToPro,
       openInvoices,
+      onCloseSubscriptionWindow,
     } = this.props;
     const { intl } = this.context;
 
@@ -215,7 +217,9 @@ class AccountDashboard extends Component {
                           {intl.formatMessage(messages.yourLicense)}
                         </H2>
                         <p>
-                          {isPremiumOverrideUser ? 'Franz Premium' : planName}
+                          Franz
+                          {' '}
+                          {isPremiumOverrideUser ? 'Premium' : planName}
                           {user.team.isTrial && (
                             <>
                               {' – '}
@@ -238,14 +242,16 @@ class AccountDashboard extends Component {
                             </p>
                           </>
                         )}
-                        <div className="manage-user-links">
-                          {!isProUser && (
+                        {!isProUser && (
+                          <div className="manage-user-links">
                             <Button
                               label={intl.formatMessage(messages.upgradeAccountToPro)}
                               className="franz-form__button--primary"
                               onClick={upgradeToPro}
                             />
-                          )}
+                          </div>
+                        )}
+                        <div className="manage-user-links">
                           <Button
                             label={intl.formatMessage(messages.manageSubscriptionButtonLabel)}
                             className="franz-form__button--inverted"
@@ -263,7 +269,9 @@ class AccountDashboard extends Component {
                   {!user.isPremium && (
                     <div className="account franz-form">
                       <div className="account__box">
-                        <SubscriptionForm />
+                        <SubscriptionForm
+                          onCloseWindow={onCloseSubscriptionWindow}
+                        />
                       </div>
                     </div>
                   )}
diff --git a/src/components/subscription/SubscriptionForm.js b/src/components/subscription/SubscriptionForm.js
index effd04f7a..ec486e5d0 100644
--- a/src/components/subscription/SubscriptionForm.js
+++ b/src/components/subscription/SubscriptionForm.js
@@ -30,7 +30,8 @@ const messages = defineMessages({
 
 const styles = () => ({
   activateTrialButton: {
-    margin: [40, 0, 50],
+    margin: [40, 'auto', 50],
+    display: 'flex',
   },
 });
 
@@ -62,7 +63,6 @@ export default @injectSheet(styles) @observer class SubscriptionForm extends Com
           className={classes.activateTrialButton}
           busy={isActivatingTrial}
           onClick={selectPlan}
-          stretch
         />
         <div className="subscription__premium-info">
           <H3>
diff --git a/src/components/subscription/SubscriptionPopup.js b/src/components/subscription/SubscriptionPopup.js
index 12ef8a6e9..12a51ad7b 100644
--- a/src/components/subscription/SubscriptionPopup.js
+++ b/src/components/subscription/SubscriptionPopup.js
@@ -59,8 +59,10 @@ export default @observer class SubscriptionPopup extends Component {
             className="subscription-popup__webview"
 
             autosize
+            allowpopups
             src={encodeURI(url)}
             onDidNavigate={completeCheck}
+            onDidNavigateInPage={completeCheck}
           />
         </div>
         <div className="subscription-popup__toolbar franz-form">
diff --git a/src/components/subscription/TrialForm.js b/src/components/subscription/TrialForm.js
index 6ccdf20ae..d61b779ed 100644
--- a/src/components/subscription/TrialForm.js
+++ b/src/components/subscription/TrialForm.js
@@ -43,7 +43,8 @@ const messages = defineMessages({
 
 const styles = theme => ({
   activateTrialButton: {
-    margin: [40, 0, 10],
+    margin: [40, 'auto', 10],
+    display: 'flex',
   },
   allOptionsButton: {
     margin: [0, 0, 40],
@@ -93,7 +94,6 @@ export default @injectSheet(styles) @observer class TrialForm extends Component
           className={classes.activateTrialButton}
           busy={isActivatingTrial}
           onClick={activateTrial}
-          stretch
         />
         <Button
           label={intl.formatMessage(messages.allOptionsButton)}
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..7ba8b54d7 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,11 +72,13 @@ export class FeatureList extends Component {
   static propTypes = {
     className: PropTypes.string,
     featureClassName: PropTypes.string,
+    plan: PropTypes.oneOf(PLANS),
   };
 
   static defaultProps = {
     className: '',
     featureClassName: '',
+    plan: false,
   }
 
   static contextTypes = {
@@ -66,21 +89,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>
     );
   }
diff --git a/src/components/ui/PremiumFeatureContainer/index.js b/src/components/ui/PremiumFeatureContainer/index.js
index 7ba353be3..611c50468 100644
--- a/src/components/ui/PremiumFeatureContainer/index.js
+++ b/src/components/ui/PremiumFeatureContainer/index.js
@@ -90,7 +90,7 @@ PremiumFeatureContainer.wrappedComponent.propTypes = {
   children: oneOrManyChildElements.isRequired,
   stores: PropTypes.shape({
     user: PropTypes.instanceOf(UserStore).isRequired,
-    features: PropTypes.instanceOf(FeatureStore).isRequired,
+    features: PropTypes.instanceOf(FeaturesStore).isRequired,
   }).isRequired,
   actions: PropTypes.shape({
     ui: PropTypes.shape({