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 { 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: { id: 'settings.recipes.headline', defaultMessage: '!!!Available Services', }, searchService: { id: 'settings.searchService', defaultMessage: '!!!Search service', }, mostPopularRecipes: { id: 'settings.recipes.mostPopular', defaultMessage: '!!!Most popular', }, allRecipes: { id: 'settings.recipes.all', defaultMessage: '!!!All services', }, customRecipes: { id: 'settings.recipes.custom', defaultMessage: '!!!Custom Services', }, nothingFound: { id: 'settings.recipes.nothingFound', defaultMessage: '!!!Sorry, but no service matched your search term.', }, servicesSuccessfulAddedInfo: { id: 'settings.recipes.servicesSuccessfulAddedInfo', defaultMessage: '!!!Service successfully added', }, missingService: { 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', }, }); 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, hasLoadedRecipes: PropTypes.bool.isRequired, showAddServiceInterface: PropTypes.func.isRequired, searchRecipes: PropTypes.func.isRequired, resetSearch: PropTypes.func.isRequired, serviceStatus: MobxPropTypes.arrayOrObservableArray.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 = { intl: intlShape, }; render() { const { recipes, isLoading, hasLoadedRecipes, showAddServiceInterface, searchRecipes, resetSearch, serviceStatus, 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 (
{intl.formatMessage(messages.customRecipeIntro)}
{intl.formatMessage(messages.nothingFound)}