Merge branch 'master' of https://github.com/meetfranz/franz into franz-5.3.0

8 files changed, 378 insertions, 137 deletions

diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 4b7637637..f588449f4 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -1,14 +1,18 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
-import { ProBadge } from '@meetfranz/ui';
+import {
+  ProBadge, H1, H2,
+} from '@meetfranz/ui';
+import moment from 'moment';
 
 import Loader from '../../ui/Loader';
 import Button from '../../ui/Button';
 import Infobox from '../../ui/Infobox';
 import SubscriptionForm from '../../../containers/subscription/SubscriptionFormScreen';
+import { i18nPlanName } from '../../../helpers/plan-helpers';
 
 const messages = defineMessages({
   headline: {
@@ -19,10 +23,6 @@ const messages = defineMessages({
     id: 'settings.account.headlineSubscription',
     defaultMessage: '!!!Your Subscription',
   },
-  headlineUpgrade: {
-    id: 'settings.account.headlineUpgrade',
-    defaultMessage: '!!!Upgrade your Account',
-  },
   headlineDangerZone: {
     id: 'settings.account.headlineDangerZone',
     defaultMessage: '!!Danger Zone',
@@ -31,6 +31,10 @@ const messages = defineMessages({
     id: 'settings.account.manageSubscription.label',
     defaultMessage: '!!!Manage your subscription',
   },
+  upgradeAccountToPro: {
+    id: 'settings.account.upgradeToPro.label',
+    defaultMessage: '!!!Upgrade to Franz Professional',
+  },
   accountTypeBasic: {
     id: 'settings.account.accountType.basic',
     defaultMessage: '!!!Basic Account',
@@ -71,21 +75,39 @@ const messages = defineMessages({
     id: 'settings.account.deleteEmailSent',
     defaultMessage: '!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!',
   },
+  trial: {
+    id: 'settings.account.trial',
+    defaultMessage: '!!!Free Trial',
+  },
+  yourLicense: {
+    id: 'settings.account.yourLicense',
+    defaultMessage: '!!!Your Franz License:',
+  },
+  trialEndsIn: {
+    id: 'settings.account.trialEndsIn',
+    defaultMessage: '!!!Your free trial ends in {duration}.',
+  },
+  trialUpdateBillingInformation: {
+    id: 'settings.account.trialUpdateBillingInfo',
+    defaultMessage: '!!!Please update your billing info to continue using {license} after your trial period.',
+  },
 });
 
-export default @observer class AccountDashboard extends Component {
+@observer
+class AccountDashboard extends Component {
   static propTypes = {
     user: MobxPropTypes.observableObject.isRequired,
+    isPremiumOverrideUser: PropTypes.bool.isRequired,
+    isProUser: PropTypes.bool.isRequired,
     isLoading: PropTypes.bool.isRequired,
-    isLoadingPlans: PropTypes.bool.isRequired,
     userInfoRequestFailed: PropTypes.bool.isRequired,
     retryUserInfoRequest: PropTypes.func.isRequired,
-    onCloseSubscriptionWindow: PropTypes.func.isRequired,
     deleteAccount: PropTypes.func.isRequired,
     isLoadingDeleteAccount: PropTypes.bool.isRequired,
     isDeleteAccountSuccessful: PropTypes.bool.isRequired,
     openEditAccount: PropTypes.func.isRequired,
     openBilling: PropTypes.func.isRequired,
+    upgradeToPro: PropTypes.func.isRequired,
     openInvoices: PropTypes.func.isRequired,
   };
 
@@ -96,20 +118,27 @@ export default @observer class AccountDashboard extends Component {
   render() {
     const {
       user,
+      isPremiumOverrideUser,
+      isProUser,
       isLoading,
-      isLoadingPlans,
       userInfoRequestFailed,
       retryUserInfoRequest,
-      onCloseSubscriptionWindow,
       deleteAccount,
       isLoadingDeleteAccount,
       isDeleteAccountSuccessful,
       openEditAccount,
       openBilling,
+      upgradeToPro,
       openInvoices,
     } = this.props;
     const { intl } = this.context;
 
+    let planName = '';
+
+    if (user.team && user.team.plan) {
+      planName = i18nPlanName(user.team.plan, intl);
+    }
+
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -135,82 +164,115 @@ export default @observer class AccountDashboard extends Component {
           )}
 
           {!userInfoRequestFailed && (
-            <Fragment>
+            <>
               {!isLoading && (
-                <div className="account">
-                  <div className="account__box account__box--flex">
-                    <div className="account__avatar">
-                      <img
-                        src="./assets/images/logo.svg"
-                        alt=""
-                      />
-                    </div>
-                    <div className="account__info">
-                      <h2>
-                        <span className="username">{`${user.firstname} ${user.lastname}`}</span>
+                <>
+                  <div className="account">
+                    <div className="account__box account__box--flex">
+                      <div className="account__avatar">
+                        <img
+                          src="./assets/images/logo.svg"
+                          alt=""
+                        />
+                      </div>
+                      <div className="account__info">
+                        <H1>
+                          <span className="username">{`${user.firstname} ${user.lastname}`}</span>
+                          {user.isPremium && (
+                            <>
+                              {' '}
+                              <ProBadge />
+                            </>
+                          )}
+                        </H1>
+                        <p>
+                          {user.organization && `${user.organization}, `}
+                          {user.email}
+                        </p>
                         {user.isPremium && (
+                          <div className="manage-user-links">
+                            <Button
+                              label={intl.formatMessage(messages.accountEditButton)}
+                              className="franz-form__button--inverted"
+                              onClick={openEditAccount}
+                            />
+                          </div>
+                        )}
+                      </div>
+                      {!user.isPremium && (
+                        <Button
+                          label={intl.formatMessage(messages.accountEditButton)}
+                          className="franz-form__button--inverted"
+                          onClick={openEditAccount}
+                        />
+                      )}
+                    </div>
+                  </div>
+                  {user.isPremium && user.isSubscriptionOwner && (
+                    <div className="account">
+                      <div className="account__box">
+                        <H2>
+                          {intl.formatMessage(messages.yourLicense)}
+                        </H2>
+                        <p>
+                          {isPremiumOverrideUser ? 'Franz Premium' : planName}
+                          {user.team.isTrial && (
+                            <>
+                              {' – '}
+                              {intl.formatMessage(messages.trial)}
+                            </>
+                          )}
+                        </p>
+                        {user.team.isTrial && (
                           <>
-                            {' '}
-                            <ProBadge />
-                            <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span>
+                            <br />
+                            <p>
+                              {intl.formatMessage(messages.trialEndsIn, {
+                                duration: moment.duration(moment().diff(user.team.trialEnd)).humanize(),
+                              })}
+                            </p>
+                            <p>
+                              {intl.formatMessage(messages.trialUpdateBillingInformation, {
+                                license: planName,
+                              })}
+                            </p>
                           </>
                         )}
-                      </h2>
-                      {user.organization && `${user.organization}, `}
-                      {user.email}
-                      {user.isPremium && (
                         <div className="manage-user-links">
+                          {!isProUser && (
+                            <Button
+                              label={intl.formatMessage(messages.upgradeAccountToPro)}
+                              className="franz-form__button--primary"
+                              onClick={upgradeToPro}
+                            />
+                          )}
                           <Button
-                            label={intl.formatMessage(messages.accountEditButton)}
+                            label={intl.formatMessage(messages.manageSubscriptionButtonLabel)}
                             className="franz-form__button--inverted"
-                            onClick={openEditAccount}
+                            onClick={openBilling}
+                          />
+                          <Button
+                            label={intl.formatMessage(messages.invoicesButton)}
+                            className="franz-form__button--inverted"
+                            onClick={openInvoices}
                           />
-                          {user.isSubscriptionOwner && (
-                            <>
-                              <Button
-                                label={intl.formatMessage(messages.manageSubscriptionButtonLabel)}
-                                className="franz-form__button--inverted"
-                                onClick={openBilling}
-                              />
-                              <Button
-                                label={intl.formatMessage(messages.invoicesButton)}
-                                className="franz-form__button--inverted"
-                                onClick={openInvoices}
-                              />
-                            </>
-                          )}
                         </div>
-                      )}
+                      </div>
                     </div>
-                    {!user.isPremium && (
-                      <Button
-                        label={intl.formatMessage(messages.accountEditButton)}
-                        className="franz-form__button--inverted"
-                        onClick={openEditAccount}
-                      />
-                    )}
-                  </div>
-                </div>
-              )}
-
-              {!user.isPremium && (
-                isLoadingPlans ? (
-                  <Loader />
-                ) : (
-                  <div className="account franz-form">
-                    <div className="account__box">
-                      <h2>{intl.formatMessage(messages.headlineUpgrade)}</h2>
-                      <SubscriptionForm
-                        onCloseWindow={onCloseSubscriptionWindow}
-                      />
+                  )}
+                  {!user.isPremium && (
+                    <div className="account franz-form">
+                      <div className="account__box">
+                        <SubscriptionForm />
+                      </div>
                     </div>
-                  </div>
-                )
+                  )}
+                </>
               )}
 
               <div className="account franz-form">
                 <div className="account__box">
-                  <h2>{intl.formatMessage(messages.headlineDangerZone)}</h2>
+                  <H2>{intl.formatMessage(messages.headlineDangerZone)}</H2>
                   {!isDeleteAccountSuccessful && (
                   <div className="account__subscription">
                     <p>{intl.formatMessage(messages.deleteInfo)}</p>
@@ -227,7 +289,7 @@ export default @observer class AccountDashboard extends Component {
                   )}
                 </div>
               </div>
-            </Fragment>
+            </>
           )}
         </div>
         <ReactTooltip place="right" type="dark" effect="solid" />
@@ -235,3 +297,5 @@ export default @observer class AccountDashboard extends Component {
     );
   }
 }
+
+export default AccountDashboard;
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index 6aa9bda03..201819526 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -8,6 +8,7 @@ import Link from '../../ui/Link';
 import { workspaceStore } from '../../../features/workspaces';
 import UIStore from '../../../stores/UIStore';
 import UserStore from '../../../stores/UserStore';
+import { serviceLimitStore } from '../../../features/serviceLimit';
 
 const messages = defineMessages({
   availableServices: {
@@ -81,7 +82,12 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
         >
           {intl.formatMessage(messages.yourServices)}
           {' '}
-          <span className="badge">{serviceCount}</span>
+          <span className="badge">
+            {serviceCount}
+            {serviceLimitStore.serviceLimit !== 0 && (
+              `/${serviceLimitStore.serviceLimit}`
+            )}
+          </span>
         </Link>
         {workspaceStore.isFeatureEnabled ? (
           <Link
diff --git a/src/components/settings/recipes/RecipeItem.js b/src/components/settings/recipes/RecipeItem.js
index 3bb0852b2..12e3775f6 100644
--- a/src/components/settings/recipes/RecipeItem.js
+++ b/src/components/settings/recipes/RecipeItem.js
@@ -19,7 +19,7 @@ export default @observer class RecipeItem extends Component {
         className="recipe-teaser"
         onClick={onClick}
       >
-        {recipe.local && (
+        {recipe.isDevRecipe && (
           <span className="recipe-teaser__dev-badge">dev</span>
         )}
         <img
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js
index 00cd725cf..877cbc588 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -4,12 +4,17 @@ import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import { Link } from 'react-router';
 
+import { Button, Input } from '@meetfranz/forms';
+import injectSheet from 'react-jss';
+import { H3, H2, ProBadge } from '@meetfranz/ui';
 import SearchInput from '../../ui/SearchInput';
 import Infobox from '../../ui/Infobox';
 import RecipeItem from './RecipeItem';
 import Loader from '../../ui/Loader';
 import Appear from '../../ui/effects/Appear';
 import { FRANZ_SERVICE_REQUEST } from '../../../config';
+import LimitReachedInfobox from '../../../features/serviceLimit/components/LimitReachedInfobox';
+import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer';
 
 const messages = defineMessages({
   headline: {
@@ -28,9 +33,9 @@ const messages = defineMessages({
     id: 'settings.recipes.all',
     defaultMessage: '!!!All services',
   },
-  devRecipes: {
-    id: 'settings.recipes.dev',
-    defaultMessage: '!!!Development',
+  customRecipes: {
+    id: 'settings.recipes.custom',
+    defaultMessage: '!!!Custom Services',
   },
   nothingFound: {
     id: 'settings.recipes.nothingFound',
@@ -44,9 +49,61 @@ const messages = defineMessages({
     id: 'settings.recipes.missingService',
     defaultMessage: '!!!Missing a service?',
   },
+  customRecipeIntro: {
+    id: 'settings.recipes.customService.intro',
+    defaultMessage: '!!!To add a custom service, copy the recipe folder into:',
+  },
+  openFolder: {
+    id: 'settings.recipes.customService.openFolder',
+    defaultMessage: '!!!Open directory',
+  },
+  openDevDocs: {
+    id: 'settings.recipes.customService.openDevDocs',
+    defaultMessage: '!!!Developer Documentation',
+  },
+  headlineCustomRecipes: {
+    id: 'settings.recipes.customService.headline.customRecipes',
+    defaultMessage: '!!!Custom 3rd Party Recipes',
+  },
+  headlineCommunityRecipes: {
+    id: 'settings.recipes.customService.headline.communityRecipes',
+    defaultMessage: '!!!Community 3rd Party Recipes',
+  },
+  headlineDevRecipes: {
+    id: 'settings.recipes.customService.headline.devRecipes',
+    defaultMessage: '!!!Your Development Service Recipes',
+  },
 });
 
-export default @observer class RecipesDashboard extends Component {
+const styles = {
+  devRecipeIntroContainer: {
+    textAlign: 'center',
+    width: '100%',
+    height: 'auto',
+    margin: [40, 0],
+  },
+  path: {
+    marginTop: 20,
+
+    '& > div': {
+      fontFamily: 'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace',
+    },
+  },
+  actionContainer: {
+    '& button': {
+      margin: [0, 10],
+    },
+  },
+  devRecipeList: {
+    marginTop: 20,
+    height: 'auto',
+  },
+  proBadge: {
+    marginLeft: '10px !important',
+  },
+};
+
+export default @injectSheet(styles) @observer class RecipesDashboard extends Component {
   static propTypes = {
     recipes: MobxPropTypes.arrayOrObservableArray.isRequired,
     isLoading: PropTypes.bool.isRequired,
@@ -55,12 +112,18 @@ export default @observer class RecipesDashboard extends Component {
     searchRecipes: PropTypes.func.isRequired,
     resetSearch: PropTypes.func.isRequired,
     serviceStatus: MobxPropTypes.arrayOrObservableArray.isRequired,
-    devRecipesCount: PropTypes.number.isRequired,
     searchNeedle: PropTypes.string,
+    recipeFilter: PropTypes.string,
+    recipeDirectory: PropTypes.string.isRequired,
+    openRecipeDirectory: PropTypes.func.isRequired,
+    openDevDocs: PropTypes.func.isRequired,
+    classes: PropTypes.object.isRequired,
+    isCommunityRecipesIncludedInCurrentPlan: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
     searchNeedle: '',
+    recipeFilter: 'all',
   }
 
   static contextTypes = {
@@ -76,16 +139,26 @@ export default @observer class RecipesDashboard extends Component {
       searchRecipes,
       resetSearch,
       serviceStatus,
-      devRecipesCount,
       searchNeedle,
+      recipeFilter,
+      recipeDirectory,
+      openRecipeDirectory,
+      openDevDocs,
+      classes,
+      isCommunityRecipesIncludedInCurrentPlan,
     } = this.props;
     const { intl } = this.context;
 
+
+    const communityRecipes = recipes.filter(r => !r.isDevRecipe);
+    const devRecipes = recipes.filter(r => r.isDevRecipe);
+
     return (
       <div className="settings__main">
         <div className="settings__header">
           <h1>{intl.formatMessage(messages.headline)}</h1>
         </div>
+        <LimitReachedInfobox />
         <div className="settings__body recipes">
           {serviceStatus.length > 0 && serviceStatus.includes('created') && (
             <Appear>
@@ -122,20 +195,14 @@ export default @observer class RecipesDashboard extends Component {
             >
               {intl.formatMessage(messages.allRecipes)}
             </Link>
-            {devRecipesCount > 0 && (
-              <Link
-                to="/settings/recipes/dev"
-                className="badge"
-                activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`}
-                onClick={() => resetSearch()}
-              >
-                {intl.formatMessage(messages.devRecipes)}
-                {' '}
-(
-                {devRecipesCount}
-)
-              </Link>
-            )}
+            <Link
+              to="/settings/recipes/dev"
+              className="badge"
+              activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`}
+              onClick={() => resetSearch()}
+            >
+              {intl.formatMessage(messages.customRecipes)}
+            </Link>
             <a href={FRANZ_SERVICE_REQUEST} target="_blank" className="link recipes__service-request">
               {intl.formatMessage(messages.missingService)}
               {' '}
@@ -146,23 +213,78 @@ export default @observer class RecipesDashboard extends Component {
           {isLoading ? (
             <Loader />
           ) : (
-            <div className="recipes__list">
-              {hasLoadedRecipes && recipes.length === 0 && (
-                <p className="align-middle settings__empty-state">
-                  <span className="emoji">
-                    <img src="./assets/images/emoji/dontknow.png" alt="" />
-                  </span>
-                  {intl.formatMessage(messages.nothingFound)}
-                </p>
+            <>
+              {recipeFilter === 'dev' && (
+                <>
+                  <H2>
+                    {intl.formatMessage(messages.headlineCustomRecipes)}
+                    {!isCommunityRecipesIncludedInCurrentPlan && (
+                      <ProBadge className={classes.proBadge} />
+                    )}
+                  </H2>
+                  <div className={classes.devRecipeIntroContainer}>
+                    <p>
+                      {intl.formatMessage(messages.customRecipeIntro)}
+                    </p>
+                    <Input
+                      value={recipeDirectory}
+                      className={classes.path}
+                      showLabel={false}
+                    />
+                    <div className={classes.actionContainer}>
+                      <Button
+                        onClick={openRecipeDirectory}
+                        buttonType="secondary"
+                        label={intl.formatMessage(messages.openFolder)}
+                      />
+                      <Button
+                        onClick={openDevDocs}
+                        buttonType="secondary"
+                        label={intl.formatMessage(messages.openDevDocs)}
+                      />
+                    </div>
+                  </div>
+                </>
+              )}
+              <PremiumFeatureContainer
+                condition={(recipeFilter === 'dev' && communityRecipes.length > 0) && !isCommunityRecipesIncludedInCurrentPlan}
+              >
+                {recipeFilter === 'dev' && communityRecipes.length > 0 && (
+                  <H3>{intl.formatMessage(messages.headlineCommunityRecipes)}</H3>
+                )}
+                <div className="recipes__list">
+                  {hasLoadedRecipes && recipes.length === 0 && recipeFilter !== 'dev' && (
+                    <p className="align-middle settings__empty-state">
+                      <span className="emoji">
+                        <img src="./assets/images/emoji/dontknow.png" alt="" />
+                      </span>
+                      {intl.formatMessage(messages.nothingFound)}
+                    </p>
+                  )}
+                  {communityRecipes.map(recipe => (
+                    <RecipeItem
+                      key={recipe.id}
+                      recipe={recipe}
+                      onClick={() => showAddServiceInterface({ recipeId: recipe.id })}
+                    />
+                  ))}
+                </div>
+              </PremiumFeatureContainer>
+              {recipeFilter === 'dev' && devRecipes.length > 0 && (
+                <div className={classes.devRecipeList}>
+                  <H3>{intl.formatMessage(messages.headlineDevRecipes)}</H3>
+                  <div className="recipes__list">
+                    {devRecipes.map(recipe => (
+                      <RecipeItem
+                        key={recipe.id}
+                        recipe={recipe}
+                        onClick={() => showAddServiceInterface({ recipeId: recipe.id })}
+                      />
+                    ))}
+                  </div>
+                </div>
               )}
-              {recipes.map(recipe => (
-                <RecipeItem
-                  key={recipe.id}
-                  recipe={recipe}
-                  onClick={() => showAddServiceInterface({ recipeId: recipe.id })}
-                />
-              ))}
-            </div>
+            </>
           )}
         </div>
       </div>
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 711b571e2..5fe00cb8b 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -17,6 +17,8 @@ import ImageUpload from '../../ui/ImageUpload';
 import Select from '../../ui/Select';
 
 import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer';
+import LimitReachedInfobox from '../../../features/serviceLimit/components/LimitReachedInfobox';
+import { serviceLimitStore } from '../../../features/serviceLimit';
 
 const messages = defineMessages({
   saveService: {
@@ -128,8 +130,8 @@ export default @observer class EditServiceForm extends Component {
     isSaving: PropTypes.bool.isRequired,
     isDeleting: PropTypes.bool.isRequired,
     isProxyFeatureEnabled: PropTypes.bool.isRequired,
-    isProxyPremiumFeature: PropTypes.bool.isRequired,
-    isSpellcheckerPremiumFeature: PropTypes.bool.isRequired,
+    isServiceProxyIncludedInCurrentPlan: PropTypes.bool.isRequired,
+    isSpellcheckerIncludedInCurrentPlan: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
@@ -192,8 +194,8 @@ export default @observer class EditServiceForm extends Component {
       isDeleting,
       onDelete,
       isProxyFeatureEnabled,
-      isProxyPremiumFeature,
-      isSpellcheckerPremiumFeature,
+      isServiceProxyIncludedInCurrentPlan,
+      isSpellcheckerIncludedInCurrentPlan,
     } = this.props;
     const { intl } = this.context;
 
@@ -252,6 +254,7 @@ export default @observer class EditServiceForm extends Component {
             )}
           </span>
         </div>
+        <LimitReachedInfobox />
         <div className="settings__body">
           <form onSubmit={e => this.submit(e)} id="form">
             <div className="service-name">
@@ -342,7 +345,7 @@ export default @observer class EditServiceForm extends Component {
             </div>
 
             <PremiumFeatureContainer
-              condition={isSpellcheckerPremiumFeature}
+              condition={!isSpellcheckerIncludedInCurrentPlan}
               gaEventInfo={{ category: 'User', event: 'upgrade', label: 'spellchecker' }}
             >
               <div className="settings__settings-group">
@@ -352,7 +355,7 @@ export default @observer class EditServiceForm extends Component {
 
             {isProxyFeatureEnabled && (
               <PremiumFeatureContainer
-                condition={isProxyPremiumFeature}
+                condition={!isServiceProxyIncludedInCurrentPlan}
                 gaEventInfo={{ category: 'User', event: 'upgrade', label: 'proxy' }}
               >
                 <div className="settings__settings-group">
@@ -418,7 +421,7 @@ export default @observer class EditServiceForm extends Component {
               type="submit"
               label={intl.formatMessage(messages.saveService)}
               htmlForm="form"
-              disabled={action !== 'edit' && form.isPristine && requiresUserInput}
+              disabled={action !== 'edit' && ((form.isPristine && requiresUserInput) || serviceLimitStore.userHasReachedServiceLimit)}
             />
           )}
         </div>
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js
index 53bae12df..78038e86a 100644
--- a/src/components/settings/services/ServicesDashboard.js
+++ b/src/components/settings/services/ServicesDashboard.js
@@ -9,6 +9,7 @@ import Infobox from '../../ui/Infobox';
 import Loader from '../../ui/Loader';
 import ServiceItem from './ServiceItem';
 import Appear from '../../ui/effects/Appear';
+import LimitReachedInfobox from '../../../features/serviceLimit/components/LimitReachedInfobox';
 
 const messages = defineMessages({
   headline: {
@@ -91,6 +92,7 @@ export default @observer class ServicesDashboard extends Component {
         <div className="settings__header">
           <h1>{intl.formatMessage(messages.headline)}</h1>
         </div>
+        <LimitReachedInfobox />
         <div className="settings__body">
           {!isLoading && (
             <SearchInput
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 660c3c109..19333fdff 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -105,7 +105,8 @@ export default @observer class EditSettingsForm extends Component {
     isClearingAllCache: PropTypes.bool.isRequired,
     onClearAllCache: PropTypes.func.isRequired,
     cacheSize: PropTypes.string.isRequired,
-    isSpellcheckerPremiumFeature: PropTypes.bool.isRequired,
+    isSpellcheckerIncludedInCurrentPlan: PropTypes.bool.isRequired,
+    isTodosEnabled: PropTypes.bool.isRequired,
   };
 
   static contextTypes = {
@@ -135,7 +136,8 @@ export default @observer class EditSettingsForm extends Component {
       isClearingAllCache,
       onClearAllCache,
       cacheSize,
-      isSpellcheckerPremiumFeature,
+      isSpellcheckerIncludedInCurrentPlan,
+      isTodosEnabled,
     } = this.props;
     const { intl } = this.context;
 
@@ -178,6 +180,9 @@ export default @observer class EditSettingsForm extends Component {
             { isLoggedIn && (
               <p>{ intl.formatMessage(messages.serverInfo) }</p>
             )}
+            {isTodosEnabled && (
+              <Toggle field={form.$('enableTodos')} />
+            )}
 
             {/* Appearance */}
             <h2 id="apperance">{intl.formatMessage(messages.headlineAppearance)}</h2>
@@ -189,7 +194,7 @@ export default @observer class EditSettingsForm extends Component {
             <h2 id="language">{intl.formatMessage(messages.headlineLanguage)}</h2>
             <Select field={form.$('locale')} showLabel={false} />
             <PremiumFeatureContainer
-              condition={isSpellcheckerPremiumFeature}
+              condition={!isSpellcheckerIncludedInCurrentPlan}
               gaEventInfo={{ category: 'User', event: 'upgrade', label: 'spellchecker' }}
             >
               <Fragment>
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js
index 05c942a11..2bf46b48d 100644
--- a/src/components/settings/team/TeamDashboard.js
+++ b/src/components/settings/team/TeamDashboard.js
@@ -4,11 +4,14 @@ import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
 import injectSheet from 'react-jss';
+import classnames from 'classnames';
 
+import { Badge } from '@meetfranz/ui';
 import Loader from '../../ui/Loader';
 import Button from '../../ui/Button';
 import Infobox from '../../ui/Infobox';
-import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer';
+import globalMessages from '../../../i18n/globalMessages';
+import UpgradeButton from '../../ui/UpgradeButton';
 
 const messages = defineMessages({
   headline: {
@@ -40,6 +43,7 @@ const messages = defineMessages({
 const styles = {
   cta: {
     margin: [40, 'auto'],
+    height: 'auto',
   },
   container: {
     display: 'flex',
@@ -69,6 +73,20 @@ const styles = {
       order: 1,
     },
   },
+  headline: {
+    marginBottom: 0,
+  },
+  headlineWithSpacing: {
+    marginBottom: 'inherit',
+  },
+  proRequired: {
+    margin: [10, 0, 40],
+    height: 'auto',
+  },
+  buttonContainer: {
+    display: 'flex',
+    height: 'auto',
+  },
 };
 
 
@@ -79,6 +97,7 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon
     retryUserInfoRequest: PropTypes.func.isRequired,
     openTeamManagement: PropTypes.func.isRequired,
     classes: PropTypes.object.isRequired,
+    isProUser: PropTypes.bool.isRequired,
   };
 
   static contextTypes = {
@@ -91,6 +110,7 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon
       userInfoRequestFailed,
       retryUserInfoRequest,
       openTeamManagement,
+      isProUser,
       classes,
     } = this.props;
     const { intl } = this.context;
@@ -123,23 +143,42 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon
             <>
               {!isLoading && (
                 <>
-                  <PremiumFeatureContainer>
-                    <>
-                      <h1>{intl.formatMessage(messages.contentHeadline)}</h1>
-                      <div className={classes.container}>
-                        <div className={classes.content}>
-                          <p>{intl.formatMessage(messages.intro)}</p>
-                          <p>{intl.formatMessage(messages.copy)}</p>
-                        </div>
-                        <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Ferdi for Teams" />
+                  <>
+                    <h1 className={classnames({
+                      [classes.headline]: true,
+                      [classes.headlineWithSpacing]: isProUser,
+                    })}
+                    >
+                      {intl.formatMessage(messages.contentHeadline)}
+
+                    </h1>
+                    {!isProUser && (
+                      <Badge className={classes.proRequired}>{intl.formatMessage(globalMessages.proRequired)}</Badge>
+                    )}
+                    <div className={classes.container}>
+                      <div className={classes.content}>
+                        <p>{intl.formatMessage(messages.intro)}</p>
+                        <p>{intl.formatMessage(messages.copy)}</p>
                       </div>
-                      <Button
-                        label={intl.formatMessage(messages.manageButton)}
-                        onClick={openTeamManagement}
-                        className={classes.cta}
-                      />
-                    </>
-                  </PremiumFeatureContainer>
+                      <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Franz for Teams" />
+                    </div>
+                    <div className={classes.buttonContainer}>
+                      {!isProUser ? (
+                        <UpgradeButton
+                          className={classes.cta}
+                          gaEventInfo={{ category: 'Todos', event: 'upgrade' }}
+                          requiresPro
+                          short
+                        />
+                      ) : (
+                        <Button
+                          label={intl.formatMessage(messages.manageButton)}
+                          onClick={openTeamManagement}
+                          className={classes.cta}
+                        />
+                      )}
+                    </div>
+                  </>
                 </>
               )}
             </>