diff options
Diffstat (limited to 'src/components/settings/recipes/RecipesDashboard.js')
-rw-r--r-- | src/components/settings/recipes/RecipesDashboard.js | 77 |
1 files changed, 25 insertions, 52 deletions
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js index b4e2fc05c..44ff2d0d7 100644 --- a/src/components/settings/recipes/RecipesDashboard.js +++ b/src/components/settings/recipes/RecipesDashboard.js | |||
@@ -6,15 +6,13 @@ import { Link } from 'react-router'; | |||
6 | 6 | ||
7 | import { Button, Input } from '@meetfranz/forms'; | 7 | import { Button, Input } from '@meetfranz/forms'; |
8 | import injectSheet from 'react-jss'; | 8 | import injectSheet from 'react-jss'; |
9 | import { H3, H2, ProBadge } from '@meetfranz/ui'; | 9 | import { H3, H2 } from '@meetfranz/ui'; |
10 | import SearchInput from '../../ui/SearchInput'; | 10 | import SearchInput from '../../ui/SearchInput'; |
11 | import Infobox from '../../ui/Infobox'; | 11 | import Infobox from '../../ui/Infobox'; |
12 | import RecipeItem from './RecipeItem'; | 12 | import RecipeItem from './RecipeItem'; |
13 | import Loader from '../../ui/Loader'; | 13 | import Loader from '../../ui/Loader'; |
14 | import Appear from '../../ui/effects/Appear'; | 14 | import Appear from '../../ui/effects/Appear'; |
15 | import { FRANZ_SERVICE_REQUEST } from '../../../config'; | 15 | import { FRANZ_SERVICE_REQUEST } from '../../../config'; |
16 | import LimitReachedInfobox from '../../../features/serviceLimit/components/LimitReachedInfobox'; | ||
17 | import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer'; | ||
18 | import RecipePreview from '../../../models/RecipePreview'; | 16 | import RecipePreview from '../../../models/RecipePreview'; |
19 | 17 | ||
20 | const messages = defineMessages({ | 18 | const messages = defineMessages({ |
@@ -26,10 +24,6 @@ const messages = defineMessages({ | |||
26 | id: 'settings.searchService', | 24 | id: 'settings.searchService', |
27 | defaultMessage: '!!!Search service', | 25 | defaultMessage: '!!!Search service', |
28 | }, | 26 | }, |
29 | mostPopularRecipes: { | ||
30 | id: 'settings.recipes.mostPopular', | ||
31 | defaultMessage: '!!!Most popular', | ||
32 | }, | ||
33 | allRecipes: { | 27 | allRecipes: { |
34 | id: 'settings.recipes.all', | 28 | id: 'settings.recipes.all', |
35 | defaultMessage: '!!!All services', | 29 | defaultMessage: '!!!All services', |
@@ -109,7 +103,6 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com | |||
109 | recipes: MobxPropTypes.arrayOrObservableArray.isRequired, | 103 | recipes: MobxPropTypes.arrayOrObservableArray.isRequired, |
110 | customWebsiteRecipe: PropTypes.instanceOf(RecipePreview).isRequired, | 104 | customWebsiteRecipe: PropTypes.instanceOf(RecipePreview).isRequired, |
111 | isLoading: PropTypes.bool.isRequired, | 105 | isLoading: PropTypes.bool.isRequired, |
112 | hasLoadedRecipes: PropTypes.bool.isRequired, | ||
113 | showAddServiceInterface: PropTypes.func.isRequired, | 106 | showAddServiceInterface: PropTypes.func.isRequired, |
114 | searchRecipes: PropTypes.func.isRequired, | 107 | searchRecipes: PropTypes.func.isRequired, |
115 | resetSearch: PropTypes.func.isRequired, | 108 | resetSearch: PropTypes.func.isRequired, |
@@ -120,7 +113,6 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com | |||
120 | openRecipeDirectory: PropTypes.func.isRequired, | 113 | openRecipeDirectory: PropTypes.func.isRequired, |
121 | openDevDocs: PropTypes.func.isRequired, | 114 | openDevDocs: PropTypes.func.isRequired, |
122 | classes: PropTypes.object.isRequired, | 115 | classes: PropTypes.object.isRequired, |
123 | isCommunityRecipesIncludedInCurrentPlan: PropTypes.bool.isRequired, | ||
124 | }; | 116 | }; |
125 | 117 | ||
126 | static defaultProps = { | 118 | static defaultProps = { |
@@ -137,7 +129,6 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com | |||
137 | recipes, | 129 | recipes, |
138 | customWebsiteRecipe, | 130 | customWebsiteRecipe, |
139 | isLoading, | 131 | isLoading, |
140 | hasLoadedRecipes, | ||
141 | showAddServiceInterface, | 132 | showAddServiceInterface, |
142 | searchRecipes, | 133 | searchRecipes, |
143 | resetSearch, | 134 | resetSearch, |
@@ -148,11 +139,9 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com | |||
148 | openRecipeDirectory, | 139 | openRecipeDirectory, |
149 | openDevDocs, | 140 | openDevDocs, |
150 | classes, | 141 | classes, |
151 | isCommunityRecipesIncludedInCurrentPlan, | ||
152 | } = this.props; | 142 | } = this.props; |
153 | const { intl } = this.context; | 143 | const { intl } = this.context; |
154 | 144 | ||
155 | |||
156 | const communityRecipes = recipes.filter(r => !r.isDevRecipe); | 145 | const communityRecipes = recipes.filter(r => !r.isDevRecipe); |
157 | const devRecipes = recipes.filter(r => r.isDevRecipe); | 146 | const devRecipes = recipes.filter(r => r.isDevRecipe); |
158 | 147 | ||
@@ -163,7 +152,6 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com | |||
163 | <div className="settings__header"> | 152 | <div className="settings__header"> |
164 | <h1>{intl.formatMessage(messages.headline)}</h1> | 153 | <h1>{intl.formatMessage(messages.headline)}</h1> |
165 | </div> | 154 | </div> |
166 | <LimitReachedInfobox /> | ||
167 | <div className="settings__body recipes"> | 155 | <div className="settings__body recipes"> |
168 | {serviceStatus.length > 0 && serviceStatus.includes('created') && ( | 156 | {serviceStatus.length > 0 && serviceStatus.includes('created') && ( |
169 | <Appear> | 157 | <Appear> |
@@ -190,14 +178,6 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com | |||
190 | activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`} | 178 | activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`} |
191 | onClick={() => resetSearch()} | 179 | onClick={() => resetSearch()} |
192 | > | 180 | > |
193 | {intl.formatMessage(messages.mostPopularRecipes)} | ||
194 | </Link> | ||
195 | <Link | ||
196 | to="/settings/recipes/all" | ||
197 | className="badge" | ||
198 | activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`} | ||
199 | onClick={() => resetSearch()} | ||
200 | > | ||
201 | {intl.formatMessage(messages.allRecipes)} | 181 | {intl.formatMessage(messages.allRecipes)} |
202 | </Link> | 182 | </Link> |
203 | <Link | 183 | <Link |
@@ -208,7 +188,7 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com | |||
208 | > | 188 | > |
209 | {intl.formatMessage(messages.customRecipes)} | 189 | {intl.formatMessage(messages.customRecipes)} |
210 | </Link> | 190 | </Link> |
211 | <a href={FRANZ_SERVICE_REQUEST} target="_blank" className="link recipes__service-request"> | 191 | <a href={FRANZ_SERVICE_REQUEST} target="_blank" className="link recipes__service-request" rel="noreferrer"> |
212 | {intl.formatMessage(messages.missingService)} | 192 | {intl.formatMessage(messages.missingService)} |
213 | {' '} | 193 | {' '} |
214 | <i className="mdi mdi-open-in-new" /> | 194 | <i className="mdi mdi-open-in-new" /> |
@@ -223,9 +203,6 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com | |||
223 | <> | 203 | <> |
224 | <H2> | 204 | <H2> |
225 | {intl.formatMessage(messages.headlineCustomRecipes)} | 205 | {intl.formatMessage(messages.headlineCustomRecipes)} |
226 | {!isCommunityRecipesIncludedInCurrentPlan && ( | ||
227 | <ProBadge className={classes.proBadge} /> | ||
228 | )} | ||
229 | </H2> | 206 | </H2> |
230 | <div className={classes.devRecipeIntroContainer}> | 207 | <div className={classes.devRecipeIntroContainer}> |
231 | <p> | 208 | <p> |
@@ -251,37 +228,33 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com | |||
251 | </div> | 228 | </div> |
252 | </> | 229 | </> |
253 | )} | 230 | )} |
254 | <PremiumFeatureContainer | 231 | {recipeFilter === 'dev' && communityRecipes.length > 0 && ( |
255 | condition={(recipeFilter === 'dev' && communityRecipes.length > 0) && !isCommunityRecipesIncludedInCurrentPlan} | 232 | <H3>{intl.formatMessage(messages.headlineCommunityRecipes)}</H3> |
256 | > | 233 | )} |
257 | {recipeFilter === 'dev' && communityRecipes.length > 0 && ( | 234 | <div className="recipes__list"> |
258 | <H3>{intl.formatMessage(messages.headlineCommunityRecipes)}</H3> | 235 | {recipes.length === 0 && recipeFilter !== 'dev' && ( |
259 | )} | 236 | <div className="align-middle settings__empty-state"> |
260 | <div className="recipes__list"> | 237 | <span className="emoji"> |
261 | {hasLoadedRecipes && recipes.length === 0 && recipeFilter !== 'dev' && ( | 238 | <img src="./assets/images/emoji/dontknow.png" alt="" /> |
262 | <div className="align-middle settings__empty-state"> | 239 | </span> |
263 | <span className="emoji"> | ||
264 | <img src="./assets/images/emoji/dontknow.png" alt="" /> | ||
265 | </span> | ||
266 | 240 | ||
267 | <p className="settings__empty-state-text">{intl.formatMessage(messages.nothingFound)}</p> | 241 | <p className="settings__empty-state-text">{intl.formatMessage(messages.nothingFound)}</p> |
268 | 242 | ||
269 | <RecipeItem | ||
270 | key={customWebsiteRecipe.id} | ||
271 | recipe={customWebsiteRecipe} | ||
272 | onClick={() => isLoggedIn && showAddServiceInterface({ recipeId: customWebsiteRecipe.id })} | ||
273 | /> | ||
274 | </div> | ||
275 | )} | ||
276 | {communityRecipes.map(recipe => ( | ||
277 | <RecipeItem | 243 | <RecipeItem |
278 | key={recipe.id} | 244 | key={customWebsiteRecipe.id} |
279 | recipe={recipe} | 245 | recipe={customWebsiteRecipe} |
280 | onClick={() => isLoggedIn && showAddServiceInterface({ recipeId: recipe.id })} | 246 | onClick={() => isLoggedIn && showAddServiceInterface({ recipeId: customWebsiteRecipe.id })} |
281 | /> | 247 | /> |
282 | ))} | 248 | </div> |
283 | </div> | 249 | )} |
284 | </PremiumFeatureContainer> | 250 | {communityRecipes.map(recipe => ( |
251 | <RecipeItem | ||
252 | key={recipe.id} | ||
253 | recipe={recipe} | ||
254 | onClick={() => isLoggedIn && showAddServiceInterface({ recipeId: recipe.id })} | ||
255 | /> | ||
256 | ))} | ||
257 | </div> | ||
285 | {recipeFilter === 'dev' && devRecipes.length > 0 && ( | 258 | {recipeFilter === 'dev' && devRecipes.length > 0 && ( |
286 | <div className={classes.devRecipeList}> | 259 | <div className={classes.devRecipeList}> |
287 | <H3>{intl.formatMessage(messages.headlineDevRecipes)}</H3> | 260 | <H3>{intl.formatMessage(messages.headlineDevRecipes)}</H3> |