6 files changed, 152 insertions, 13 deletions

diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 900a83a78..4fd1e8163 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -93,9 +93,11 @@ const messages = defineMessages({
   },
 });
 
-export default @observer class AccountDashboard extends Component {
+@observer
+class AccountDashboard extends Component {
   static propTypes = {
     user: MobxPropTypes.observableObject.isRequired,
+    isProUser: PropTypes.bool.isRequired,
     isLoading: PropTypes.bool.isRequired,
     userInfoRequestFailed: PropTypes.bool.isRequired,
     retryUserInfoRequest: PropTypes.func.isRequired,
@@ -115,6 +117,7 @@ export default @observer class AccountDashboard extends Component {
   render() {
     const {
       user,
+      isProUser,
       isLoading,
       userInfoRequestFailed,
       retryUserInfoRequest,
@@ -234,11 +237,13 @@ export default @observer class AccountDashboard extends Component {
                           </>
                         )}
                         <div className="manage-user-links">
-                          <Button
-                            label={intl.formatMessage(messages.upgradeAccountToPro)}
-                            className="franz-form__button--primary"
-                            onClick={upgradeToPro}
-                          />
+                          {!isProUser && (
+                            <Button
+                              label={intl.formatMessage(messages.upgradeAccountToPro)}
+                              className="franz-form__button--primary"
+                              onClick={upgradeToPro}
+                            />
+                          )}
                           <Button
                             label={intl.formatMessage(messages.manageSubscriptionButtonLabel)}
                             className="franz-form__button--inverted"
@@ -290,3 +295,5 @@ export default @observer class AccountDashboard extends Component {
     );
   }
 }
+
+export default AccountDashboard;
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js
index 75e60b7ec..08988024a 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -218,7 +218,7 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com
                 <>
                   <H2>
                     {intl.formatMessage(messages.headlineCustomRecipes)}
-                    {isCommunityRecipesIncludedInCurrentPlan && (
+                    {!isCommunityRecipesIncludedInCurrentPlan && (
                       <ProBadge className={classes.proBadge} />
                     )}
                   </H2>
@@ -247,7 +247,7 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com
                 </>
               )}
               <PremiumFeatureContainer
-                condition={(recipeFilter === 'dev' && communityRecipes.length > 0) && isCommunityRecipesIncludedInCurrentPlan}
+                condition={(recipeFilter === 'dev' && communityRecipes.length > 0) && !isCommunityRecipesIncludedInCurrentPlan}
               >
                 {recipeFilter === 'dev' && communityRecipes.length > 0 && (
                   <H3>{intl.formatMessage(messages.headlineCommunityRecipes)}</H3>
diff --git a/src/components/subscription/TrialForm.js b/src/components/subscription/TrialForm.js
index 9fe1c93b7..9ed548f16 100644
--- a/src/components/subscription/TrialForm.js
+++ b/src/components/subscription/TrialForm.js
@@ -41,7 +41,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = () => ({
+const styles = theme => ({
   activateTrialButton: {
     margin: [40, 0, 10],
   },
@@ -49,6 +49,7 @@ const styles = () => ({
     margin: [0, 0, 40],
     background: 'none',
     border: 'none',
+    color: theme.colorText,
   },
   keyTerms: {
     marginTop: 20,
diff --git a/src/components/ui/ActivateTrialButton/index.js b/src/components/ui/ActivateTrialButton/index.js
new file mode 100644
index 000000000..c3e5f4a6f
--- /dev/null
+++ b/src/components/ui/ActivateTrialButton/index.js
@@ -0,0 +1,115 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import classnames from 'classnames';
+
+import { Button } from '@meetfranz/forms';
+import { gaEvent } from '../../../lib/analytics';
+
+import UserStore from '../../../stores/UserStore';
+
+const messages = defineMessages({
+  action: {
+    id: 'feature.delayApp.upgrade.action',
+    defaultMessage: '!!!Get a Franz Supporter License',
+  },
+  actionTrial: {
+    id: 'feature.delayApp.trial.action',
+    defaultMessage: '!!!Yes, I want the free 14 day trial of Franz Professional',
+  },
+  shortAction: {
+    id: 'feature.delayApp.upgrade.actionShort',
+    defaultMessage: '!!!Upgrade account',
+  },
+  shortActionTrial: {
+    id: 'feature.delayApp.trial.actionShort',
+    defaultMessage: '!!!Activate the free Franz Professional trial',
+  },
+});
+
+@inject('stores', 'actions') @observer
+class ActivateTrialButton extends Component {
+  static propTypes = {
+    // eslint-disable-next-line
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    short: PropTypes.bool,
+    gaEventInfo: PropTypes.shape({
+      category: PropTypes.string.isRequired,
+      event: PropTypes.string.isRequired,
+      label: PropTypes.string,
+    }),
+  };
+
+  static defaultProps = {
+    className: '',
+    short: false,
+    gaEventInfo: null,
+  }
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  handleCTAClick() {
+    const { actions, stores, gaEventInfo } = this.props;
+    const { hadSubscription } = stores.user.data;
+    const { defaultTrialPlan } = stores.features.features;
+
+    let label = '';
+    if (!hadSubscription) {
+      actions.user.activateTrial({ planId: defaultTrialPlan });
+
+      label = 'Start Trial';
+    } else {
+      actions.ui.openSettings({ path: 'user' });
+
+      label = 'Upgrade Account';
+    }
+
+    if (gaEventInfo) {
+      const { category, event } = gaEventInfo;
+      gaEvent(category, event, label);
+    }
+  }
+
+  render() {
+    const { stores, className, short } = this.props;
+    const { intl } = this.context;
+
+    const { hadSubscription } = stores.user.data;
+
+    let label;
+    if (hadSubscription) {
+      label = short ? messages.shortAction : messages.action;
+    } else {
+      label = short ? messages.shortActionTrial : messages.actionTrial;
+    }
+
+    return (
+      <Button
+        label={intl.formatMessage(label)}
+        className={classnames({
+          [className]: className,
+        })}
+        buttonType="inverted"
+        onClick={this.handleCTAClick.bind(this)}
+        busy={stores.user.activateTrialRequest.isExecuting}
+      />
+    );
+  }
+}
+
+export default ActivateTrialButton;
+
+ActivateTrialButton.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
+  actions: PropTypes.shape({
+    ui: PropTypes.shape({
+      openSettings: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
diff --git a/src/components/ui/FeatureItem.js b/src/components/ui/FeatureItem.js
index 53616f2eb..7c482c4d4 100644
--- a/src/components/ui/FeatureItem.js
+++ b/src/components/ui/FeatureItem.js
@@ -6,7 +6,7 @@ import { mdiCheckCircle } from '@mdi/js';
 
 const styles = theme => ({
   featureItem: {
-    borderBottom: [1, 'solid', theme.legacyStyles.themeGrayDark],
+    borderBottom: [1, 'solid', theme.defaultContentBorder],
     padding: [8, 0],
     display: 'flex',
     alignItems: 'center',
diff --git a/src/components/ui/PremiumFeatureContainer/index.js b/src/components/ui/PremiumFeatureContainer/index.js
index 3c1e0fac3..8d2746e22 100644
--- a/src/components/ui/PremiumFeatureContainer/index.js
+++ b/src/components/ui/PremiumFeatureContainer/index.js
@@ -10,6 +10,7 @@ import UserStore from '../../../stores/UserStore';
 
 import styles from './styles';
 import { gaEvent } from '../../../lib/analytics';
+import { FeatureStore } from '../../../features/utils/FeatureStore';
 
 const messages = defineMessages({
   action: {
@@ -22,7 +23,10 @@ const messages = defineMessages({
 class PremiumFeatureContainer extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
-    condition: PropTypes.bool,
+    condition: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.func,
+    ]),
     gaEventInfo: PropTypes.shape({
       category: PropTypes.string.isRequired,
       event: PropTypes.string.isRequired,
@@ -31,7 +35,7 @@ class PremiumFeatureContainer extends Component {
   };
 
   static defaultProps = {
-    condition: true,
+    condition: null,
     gaEventInfo: null,
   };
 
@@ -51,7 +55,18 @@ class PremiumFeatureContainer extends Component {
 
     const { intl } = this.context;
 
-    return !stores.user.data.isPremium && !!condition ? (
+    let showWrapper = !!condition;
+
+    if (condition === null) {
+      showWrapper = !stores.user.data.isPremium;
+    } else if (typeof condition === 'function') {
+      showWrapper = condition({
+        isPremium: stores.user.data.isPremium,
+        features: stores.features.features,
+      });
+    }
+
+    return showWrapper ? (
       <div className={classes.container}>
         <div className={classes.titleContainer}>
           <p className={classes.title}>Premium Feature</p>
@@ -81,6 +96,7 @@ PremiumFeatureContainer.wrappedComponent.propTypes = {
   children: oneOrManyChildElements.isRequired,
   stores: PropTypes.shape({
     user: PropTypes.instanceOf(UserStore).isRequired,
+    features: PropTypes.instanceOf(FeatureStore).isRequired,
   }).isRequired,
   actions: PropTypes.shape({
     ui: PropTypes.shape({