Add custom recipe limitation

2 files changed, 159 insertions, 37 deletions

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>