Add custom recipe limitation

13 files changed, 526 insertions, 83 deletions

diff --git a/packages/ui/src/badge/ProBadge.tsx b/packages/ui/src/badge/ProBadge.tsx
index 612e23210..2dad7ef49 100644
--- a/packages/ui/src/badge/ProBadge.tsx
+++ b/packages/ui/src/badge/ProBadge.tsx
@@ -3,13 +3,14 @@ import classnames from 'classnames';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 
-import { Icon, Badge } from '../';
+import { Badge, Icon } from '../';
 import { IWithStyle } from '../typings/generic';
 
 interface IProps extends IWithStyle {
   badgeClasses?: string;
   iconClasses?: string;
   inverted?: boolean;
+  className?: string;
 }
 
 const styles = (theme: Theme) => ({
@@ -37,6 +38,7 @@ class ProBadgeComponent extends Component<IProps> {
       badgeClasses,
       iconClasses,
       inverted,
+      className,
     } = this.props;
 
     return (
@@ -46,6 +48,7 @@ class ProBadgeComponent extends Component<IProps> {
           classes.badge,
           inverted && classes.invertedBadge,
           badgeClasses,
+          className,
         ])}
       >
         <Icon
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..e2e8121e5 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -4,12 +4,16 @@ 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 PremiumFeatureContainer from '../../ui/PremiumFeatureContainer';
 
 const messages = defineMessages({
   headline: {
@@ -28,9 +32,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 +48,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 Service Recipes',
+  },
+  headlineCommunityRecipes: {
+    id: 'settings.recipes.customService.headline.communityRecipes',
+    defaultMessage: '!!!Community Services',
+  },
+  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 +111,19 @@ 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,
+    isCommunityRecipesPremiumFeature: PropTypes.bool.isRequired,
+    isUserPremiumUser: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
     searchNeedle: '',
+    recipeFilter: 'all',
   }
 
   static contextTypes = {
@@ -76,11 +139,21 @@ export default @observer class RecipesDashboard extends Component {
       searchRecipes,
       resetSearch,
       serviceStatus,
-      devRecipesCount,
       searchNeedle,
+      recipeFilter,
+      recipeDirectory,
+      openRecipeDirectory,
+      openDevDocs,
+      classes,
+      isCommunityRecipesPremiumFeature,
+      isUserPremiumUser,
     } = 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">
@@ -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)}
+                    {!isUserPremiumUser && (
+                      <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) && isCommunityRecipesPremiumFeature}
+              >
+                {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/config.js b/src/config.js
index 5bc318545..544f94fde 100644
--- a/src/config.js
+++ b/src/config.js
@@ -67,6 +67,7 @@ export const DEFAULT_WINDOW_OPTIONS = {
 
 export const FRANZ_SERVICE_REQUEST = 'https://bit.ly/franz-plugin-docs';
 export const FRANZ_TRANSLATION = 'https://bit.ly/franz-translate';
+export const FRANZ_DEV_DOCS = 'http://bit.ly/franz-dev-hub';
 
 export const FILE_SYSTEM_SETTINGS_TYPES = [
   'app',
diff --git a/src/containers/settings/RecipesScreen.js b/src/containers/settings/RecipesScreen.js
index eda5ae54c..57e879f42 100644
--- a/src/containers/settings/RecipesScreen.js
+++ b/src/containers/settings/RecipesScreen.js
@@ -1,7 +1,9 @@
+import { remote, shell } from 'electron';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { autorun } from 'mobx';
 import { inject, observer } from 'mobx-react';
+import path from 'path';
 
 import RecipePreviewsStore from '../../stores/RecipePreviewsStore';
 import RecipeStore from '../../stores/RecipesStore';
@@ -10,6 +12,11 @@ import UserStore from '../../stores/UserStore';
 
 import RecipesDashboard from '../../components/settings/recipes/RecipesDashboard';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
+import { FRANZ_DEV_DOCS } from '../../config';
+import { gaEvent } from '../../lib/analytics';
+import { communityRecipesStore } from '../../features/communityRecipes';
+
+const { app } = remote;
 
 export default @inject('stores', 'actions') @observer class RecipesScreen extends Component {
   static propTypes = {
@@ -67,9 +74,16 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
 
   render() {
     const {
-      recipePreviews, recipes, services, user,
+      recipePreviews,
+      recipes,
+      services,
+      user,
     } = this.props.stores;
-    const { showAddServiceInterface } = this.props.actions.service;
+
+    const {
+      app: appActions,
+      service: serviceActions,
+    } = this.props.actions;
 
     const { filter } = this.props.params;
     let recipeFilter;
@@ -77,7 +91,7 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
     if (filter === 'all') {
       recipeFilter = recipePreviews.all;
     } else if (filter === 'dev') {
-      recipeFilter = recipePreviews.dev;
+      recipeFilter = communityRecipesStore.communityRecipes;
     } else {
       recipeFilter = recipePreviews.featured;
     }
@@ -89,6 +103,8 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
       || recipes.installRecipeRequest.isExecuting
       || recipePreviews.searchRecipePreviewsRequest.isExecuting;
 
+    const recipeDirectory = path.join(app.getPath('userData'), 'recipes', 'dev');
+
     return (
       <ErrorBoundary>
         <RecipesDashboard
@@ -97,12 +113,23 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
           addedServiceCount={services.all.length}
           isPremium={user.data.isPremium}
           hasLoadedRecipes={recipePreviews.featuredRecipePreviewsRequest.wasExecuted}
-          showAddServiceInterface={showAddServiceInterface}
+          showAddServiceInterface={serviceActions.showAddServiceInterface}
           searchRecipes={e => this.searchRecipes(e)}
           resetSearch={() => this.resetSearch()}
           searchNeedle={this.state.needle}
           serviceStatus={services.actionStatus}
-          devRecipesCount={recipePreviews.dev.length}
+          recipeFilter={filter}
+          recipeDirectory={recipeDirectory}
+          openRecipeDirectory={() => {
+            shell.openItem(recipeDirectory);
+            gaEvent('Recipe', 'open-recipe-folder', 'Open Folder');
+          }}
+          openDevDocs={() => {
+            appActions.openExternalUrl({ url: FRANZ_DEV_DOCS });
+            gaEvent('Recipe', 'open-dev-docs', 'Developer Documentation');
+          }}
+          isCommunityRecipesPremiumFeature={communityRecipesStore.isCommunityRecipesPremiumFeature}
+          isUserPremiumUser={user.isPremium}
         />
       </ErrorBoundary>
     );
@@ -117,6 +144,9 @@ RecipesScreen.wrappedComponent.propTypes = {
     user: PropTypes.instanceOf(UserStore).isRequired,
   }).isRequired,
   actions: PropTypes.shape({
+    app: PropTypes.shape({
+      openExternalUrl: PropTypes.func.isRequired,
+    }).isRequired,
     service: PropTypes.shape({
       showAddServiceInterface: PropTypes.func.isRequired,
     }).isRequired,
diff --git a/src/features/communityRecipes/index.js b/src/features/communityRecipes/index.js
new file mode 100644
index 000000000..78e87855e
--- /dev/null
+++ b/src/features/communityRecipes/index.js
@@ -0,0 +1,28 @@
+import { reaction } from 'mobx';
+import { CommunityRecipesStore } from './store';
+
+const debug = require('debug')('Franz:feature:communityRecipes');
+
+export const DEFAULT_SERVICE_LIMIT = 3;
+
+export const communityRecipesStore = new CommunityRecipesStore();
+
+export default function initCommunityRecipes(stores, actions) {
+  const { features } = stores;
+
+  communityRecipesStore.start(stores, actions);
+
+  // Toggle communityRecipe premium status
+  reaction(
+    () => (
+      features.features.isCommunityRecipesPremiumFeature
+    ),
+    (isPremiumFeature) => {
+      debug('Community recipes is premium feature: ', isPremiumFeature);
+      communityRecipesStore.isCommunityRecipesPremiumFeature = isPremiumFeature;
+    },
+    {
+      fireImmediately: true,
+    },
+  );
+}
diff --git a/src/features/communityRecipes/store.js b/src/features/communityRecipes/store.js
new file mode 100644
index 000000000..165b753e8
--- /dev/null
+++ b/src/features/communityRecipes/store.js
@@ -0,0 +1,31 @@
+import { computed, observable } from 'mobx';
+import { FeatureStore } from '../utils/FeatureStore';
+
+const debug = require('debug')('Franz:feature:communityRecipes:store');
+
+export class CommunityRecipesStore extends FeatureStore {
+  @observable isCommunityRecipesPremiumFeature = false;
+
+  start(stores, actions) {
+    debug('start');
+    this.stores = stores;
+    this.actions = actions;
+  }
+
+  stop() {
+    debug('stop');
+    super.stop();
+  }
+
+  @computed get communityRecipes() {
+    if (!this.stores) return [];
+
+    return this.stores.recipePreviews.dev.map((r) => {
+      r.isDevRecipe = !!r.author.find(a => a.email === this.stores.user.data.email);
+
+      return r;
+    });
+  }
+}
+
+export default CommunityRecipesStore;
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 632eb38fd..9be12d369 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -1411,104 +1411,182 @@
         "defaultMessage": "!!!Available Services",
         "end": {
           "column": 3,
-          "line": 18
+          "line": 22
         },
         "file": "src/components/settings/recipes/RecipesDashboard.js",
         "id": "settings.recipes.headline",
         "start": {
           "column": 12,
-          "line": 15
+          "line": 19
         }
       },
       {
         "defaultMessage": "!!!Search service",
         "end": {
           "column": 3,
-          "line": 22
+          "line": 26
         },
         "file": "src/components/settings/recipes/RecipesDashboard.js",
         "id": "settings.searchService",
         "start": {
           "column": 17,
-          "line": 19
+          "line": 23
         }
       },
       {
         "defaultMessage": "!!!Most popular",
         "end": {
           "column": 3,
-          "line": 26
+          "line": 30
         },
         "file": "src/components/settings/recipes/RecipesDashboard.js",
         "id": "settings.recipes.mostPopular",
         "start": {
           "column": 22,
-          "line": 23
+          "line": 27
         }
       },
       {
         "defaultMessage": "!!!All services",
         "end": {
           "column": 3,
-          "line": 30
+          "line": 34
         },
         "file": "src/components/settings/recipes/RecipesDashboard.js",
         "id": "settings.recipes.all",
         "start": {
           "column": 14,
-          "line": 27
+          "line": 31
         }
       },
       {
-        "defaultMessage": "!!!Development",
+        "defaultMessage": "!!!Custom Services",
         "end": {
           "column": 3,
-          "line": 34
+          "line": 38
         },
         "file": "src/components/settings/recipes/RecipesDashboard.js",
-        "id": "settings.recipes.dev",
+        "id": "settings.recipes.custom",
         "start": {
-          "column": 14,
-          "line": 31
+          "column": 17,
+          "line": 35
         }
       },
       {
         "defaultMessage": "!!!Sorry, but no service matched your search term.",
         "end": {
           "column": 3,
-          "line": 38
+          "line": 42
         },
         "file": "src/components/settings/recipes/RecipesDashboard.js",
         "id": "settings.recipes.nothingFound",
         "start": {
           "column": 16,
-          "line": 35
+          "line": 39
         }
       },
       {
         "defaultMessage": "!!!Service successfully added",
         "end": {
           "column": 3,
-          "line": 42
+          "line": 46
         },
         "file": "src/components/settings/recipes/RecipesDashboard.js",
         "id": "settings.recipes.servicesSuccessfulAddedInfo",
         "start": {
           "column": 31,
-          "line": 39
+          "line": 43
         }
       },
       {
         "defaultMessage": "!!!Missing a service?",
         "end": {
           "column": 3,
-          "line": 46
+          "line": 50
         },
         "file": "src/components/settings/recipes/RecipesDashboard.js",
         "id": "settings.recipes.missingService",
         "start": {
           "column": 18,
-          "line": 43
+          "line": 47
+        }
+      },
+      {
+        "defaultMessage": "!!!To add a custom service, copy the recipe folder into:",
+        "end": {
+          "column": 3,
+          "line": 54
+        },
+        "file": "src/components/settings/recipes/RecipesDashboard.js",
+        "id": "settings.recipes.customService.intro",
+        "start": {
+          "column": 21,
+          "line": 51
+        }
+      },
+      {
+        "defaultMessage": "!!!Open directory",
+        "end": {
+          "column": 3,
+          "line": 58
+        },
+        "file": "src/components/settings/recipes/RecipesDashboard.js",
+        "id": "settings.recipes.customService.openFolder",
+        "start": {
+          "column": 14,
+          "line": 55
+        }
+      },
+      {
+        "defaultMessage": "!!!Developer Documentation",
+        "end": {
+          "column": 3,
+          "line": 62
+        },
+        "file": "src/components/settings/recipes/RecipesDashboard.js",
+        "id": "settings.recipes.customService.openDevDocs",
+        "start": {
+          "column": 15,
+          "line": 59
+        }
+      },
+      {
+        "defaultMessage": "!!!Custom Service Recipes",
+        "end": {
+          "column": 3,
+          "line": 66
+        },
+        "file": "src/components/settings/recipes/RecipesDashboard.js",
+        "id": "settings.recipes.customService.headline.customRecipes",
+        "start": {
+          "column": 25,
+          "line": 63
+        }
+      },
+      {
+        "defaultMessage": "!!!Community Services",
+        "end": {
+          "column": 3,
+          "line": 70
+        },
+        "file": "src/components/settings/recipes/RecipesDashboard.js",
+        "id": "settings.recipes.customService.headline.communityRecipes",
+        "start": {
+          "column": 28,
+          "line": 67
+        }
+      },
+      {
+        "defaultMessage": "!!!Your Development Service Recipes",
+        "end": {
+          "column": 3,
+          "line": 74
+        },
+        "file": "src/components/settings/recipes/RecipesDashboard.js",
+        "id": "settings.recipes.customService.headline.devRecipes",
+        "start": {
+          "column": 22,
+          "line": 71
         }
       }
     ],
@@ -3222,6 +3300,37 @@
   {
     "descriptors": [
       {
+        "defaultMessage": "!!!You have added {amount} of {limit} services. Please upgrade your account to add more services.",
+        "end": {
+          "column": 3,
+          "line": 14
+        },
+        "file": "src/features/communityRecipes/components/LimitReachedInfobox.js",
+        "id": "feature.serviceLimit.limitReached",
+        "start": {
+          "column": 16,
+          "line": 11
+        }
+      },
+      {
+        "defaultMessage": "!!!Upgrade account",
+        "end": {
+          "column": 3,
+          "line": 18
+        },
+        "file": "src/features/communityRecipes/components/LimitReachedInfobox.js",
+        "id": "premiumFeature.button.upgradeAccount",
+        "start": {
+          "column": 10,
+          "line": 15
+        }
+      }
+    ],
+    "path": "src/features/communityRecipes/components/LimitReachedInfobox.json"
+  },
+  {
+    "descriptors": [
+      {
         "defaultMessage": "!!!Please purchase license to skip waiting",
         "end": {
           "column": 3,
@@ -3362,6 +3471,37 @@
   {
     "descriptors": [
       {
+        "defaultMessage": "!!!You have added {amount} of {limit} services. Please upgrade your account to add more services.",
+        "end": {
+          "column": 3,
+          "line": 14
+        },
+        "file": "src/features/unofficialRecipes/components/LimitReachedInfobox.js",
+        "id": "feature.serviceLimit.limitReached",
+        "start": {
+          "column": 16,
+          "line": 11
+        }
+      },
+      {
+        "defaultMessage": "!!!Upgrade account",
+        "end": {
+          "column": 3,
+          "line": 18
+        },
+        "file": "src/features/unofficialRecipes/components/LimitReachedInfobox.js",
+        "id": "premiumFeature.button.upgradeAccount",
+        "start": {
+          "column": 10,
+          "line": 15
+        }
+      }
+    ],
+    "path": "src/features/unofficialRecipes/components/LimitReachedInfobox.json"
+  },
+  {
+    "descriptors": [
+      {
         "defaultMessage": "!!!Create workspace",
         "end": {
           "column": 3,
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 6c2759dcc..8bffea63c 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -181,7 +181,13 @@
   "settings.navigation.yourServices": "Your services",
   "settings.navigation.yourWorkspaces": "Your workspaces",
   "settings.recipes.all": "All services",
-  "settings.recipes.dev": "Development",
+  "settings.recipes.custom": "Custom Services",
+  "settings.recipes.customService.headline.communityRecipes": "Community Services",
+  "settings.recipes.customService.headline.customRecipes": "Custom Service Recipes",
+  "settings.recipes.customService.headline.devRecipes": "Your Development Service Recipes",
+  "settings.recipes.customService.intro": "To add a custom service, copy the service recipe to:",
+  "settings.recipes.customService.openDevDocs": "Developer Documentation",
+  "settings.recipes.customService.openFolder": "Open folder",
   "settings.recipes.headline": "Available services",
   "settings.recipes.missingService": "Missing a service?",
   "settings.recipes.mostPopular": "Most popular",
diff --git a/src/i18n/messages/src/components/settings/recipes/RecipesDashboard.json b/src/i18n/messages/src/components/settings/recipes/RecipesDashboard.json
index 7d9ed3283..26dcd3da5 100644
--- a/src/i18n/messages/src/components/settings/recipes/RecipesDashboard.json
+++ b/src/i18n/messages/src/components/settings/recipes/RecipesDashboard.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Available Services",
     "file": "src/components/settings/recipes/RecipesDashboard.js",
     "start": {
-      "line": 15,
+      "line": 19,
       "column": 12
     },
     "end": {
-      "line": 18,
+      "line": 22,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Search service",
     "file": "src/components/settings/recipes/RecipesDashboard.js",
     "start": {
-      "line": 19,
+      "line": 23,
       "column": 17
     },
     "end": {
-      "line": 22,
+      "line": 26,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Most popular",
     "file": "src/components/settings/recipes/RecipesDashboard.js",
     "start": {
-      "line": 23,
+      "line": 27,
       "column": 22
     },
     "end": {
-      "line": 26,
+      "line": 30,
       "column": 3
     }
   },
@@ -43,24 +43,24 @@
     "defaultMessage": "!!!All services",
     "file": "src/components/settings/recipes/RecipesDashboard.js",
     "start": {
-      "line": 27,
+      "line": 31,
       "column": 14
     },
     "end": {
-      "line": 30,
+      "line": 34,
       "column": 3
     }
   },
   {
-    "id": "settings.recipes.dev",
-    "defaultMessage": "!!!Development",
+    "id": "settings.recipes.custom",
+    "defaultMessage": "!!!Custom Services",
     "file": "src/components/settings/recipes/RecipesDashboard.js",
     "start": {
-      "line": 31,
-      "column": 14
+      "line": 35,
+      "column": 17
     },
     "end": {
-      "line": 34,
+      "line": 38,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Sorry, but no service matched your search term.",
     "file": "src/components/settings/recipes/RecipesDashboard.js",
     "start": {
-      "line": 35,
+      "line": 39,
       "column": 16
     },
     "end": {
-      "line": 38,
+      "line": 42,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Service successfully added",
     "file": "src/components/settings/recipes/RecipesDashboard.js",
     "start": {
-      "line": 39,
+      "line": 43,
       "column": 31
     },
     "end": {
-      "line": 42,
+      "line": 46,
       "column": 3
     }
   },
@@ -95,11 +95,89 @@
     "defaultMessage": "!!!Missing a service?",
     "file": "src/components/settings/recipes/RecipesDashboard.js",
     "start": {
-      "line": 43,
+      "line": 47,
       "column": 18
     },
     "end": {
-      "line": 46,
+      "line": 50,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.recipes.customService.intro",
+    "defaultMessage": "!!!To add a custom service, copy the recipe folder into:",
+    "file": "src/components/settings/recipes/RecipesDashboard.js",
+    "start": {
+      "line": 51,
+      "column": 21
+    },
+    "end": {
+      "line": 54,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.recipes.customService.openFolder",
+    "defaultMessage": "!!!Open directory",
+    "file": "src/components/settings/recipes/RecipesDashboard.js",
+    "start": {
+      "line": 55,
+      "column": 14
+    },
+    "end": {
+      "line": 58,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.recipes.customService.openDevDocs",
+    "defaultMessage": "!!!Developer Documentation",
+    "file": "src/components/settings/recipes/RecipesDashboard.js",
+    "start": {
+      "line": 59,
+      "column": 15
+    },
+    "end": {
+      "line": 62,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.recipes.customService.headline.customRecipes",
+    "defaultMessage": "!!!Custom Service Recipes",
+    "file": "src/components/settings/recipes/RecipesDashboard.js",
+    "start": {
+      "line": 63,
+      "column": 25
+    },
+    "end": {
+      "line": 66,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.recipes.customService.headline.communityRecipes",
+    "defaultMessage": "!!!Community Services",
+    "file": "src/components/settings/recipes/RecipesDashboard.js",
+    "start": {
+      "line": 67,
+      "column": 28
+    },
+    "end": {
+      "line": 70,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.recipes.customService.headline.devRecipes",
+    "defaultMessage": "!!!Your Development Service Recipes",
+    "file": "src/components/settings/recipes/RecipesDashboard.js",
+    "start": {
+      "line": 71,
+      "column": 22
+    },
+    "end": {
+      "line": 74,
       "column": 3
     }
   }
diff --git a/src/stores/FeaturesStore.js b/src/stores/FeaturesStore.js
index e7832088b..0f54a50af 100644
--- a/src/stores/FeaturesStore.js
+++ b/src/stores/FeaturesStore.js
@@ -16,6 +16,7 @@ import workspaces from '../features/workspaces';
 import shareFranz from '../features/shareFranz';
 import announcements from '../features/announcements';
 import settingsWS from '../features/settingsWS';
+import communityRecipes from '../features/communityRecipes';
 
 import { DEFAULT_FEATURES_CONFIG } from '../config';
 
@@ -75,5 +76,6 @@ export default class FeaturesStore extends Store {
     shareFranz(this.stores, this.actions);
     announcements(this.stores, this.actions);
     settingsWS(this.stores, this.actions);
+    communityRecipes(this.stores, this.actions);
   }
 }
diff --git a/src/stores/index.js b/src/stores/index.js
index 1912418a2..7f89bf1fb 100644
--- a/src/stores/index.js
+++ b/src/stores/index.js
@@ -12,6 +12,7 @@ import RequestStore from './RequestStore';
 import GlobalErrorStore from './GlobalErrorStore';
 import { workspaceStore } from '../features/workspaces';
 import { announcementsStore } from '../features/announcements';
+import { communityRecipesStore } from '../features/communityRecipes';
 
 export default (api, actions, router) => {
   const stores = {};
@@ -31,6 +32,7 @@ export default (api, actions, router) => {
     globalError: new GlobalErrorStore(stores, api, actions),
     workspaces: workspaceStore,
     announcements: announcementsStore,
+    communityRecipes: communityRecipesStore,
   });
   // Initialize all stores
   Object.keys(stores).forEach((name) => {
diff --git a/src/styles/recipes.scss b/src/styles/recipes.scss
index 84222e1fe..56a248e98 100644
--- a/src/styles/recipes.scss
+++ b/src/styles/recipes.scss
@@ -12,7 +12,7 @@
     display: flex;
     flex-flow: row wrap;
     height: auto;
-    min-height: 70%;
+    // min-height: 70%;
 
     &.recipes__list--disabled {
       filter: grayscale(100%);