add eco-responsible pannel for desktop

config/categories.yml

@@ -1,83 +1,79 @@
 ---
-- label : _('restaurant')
+- label: _('alimentation')
+  name: eco-alimenation
+  color: '#a125be'
+  icon: grocery
+  ecoResponsible: true
+- label: _('repair cafe')
+  name: repair-cafe
+  color: '#a125be'
+  icon: hardware
+  ecoResponsible: true
+- label: _('Restaurant')
+  name: eco-restaurant
+  color: '#d76600'
+  icon: restaurant
+  ecoResponsible: true
+- label: _('public bookcase')
+  name: public_bookcase
+  color: '#e2001c'
+  icon: library
+  ecoResponsible: true
+- label: _('restaurant')
   name: restaurant
-  color: "#d76600"
-  matcher:
-    regex: restos?|restaus?|ma?c\s?do(?:nald(?:'s)?)?|burger\s+king|quick|subway|flunch|hard\s+rock\s+cafe|kfc|pizza|brioche\s+doree|five\s+guys|mezzo\s+di\s+pasta|pomme\s+de\s+pain|pret\s+a\s+manger|vapiano|starbucks|big\s+fernand|sushi|memphis\s+coffee|buffalo\s+grill|la\s+boucherie|hippopotamus|leon|pataterie|pizzeria|brasserie|fast\s+food|restauration\s+rapide|snack|creperie|kebab|sandwicherie|il\s+ristorante|le kiosque a pizzas|buffalo grill|campanile|courtepaille|burger king|la pataterie|pizza hut|au bureau|poivre rouge|la croissanterie|tutti pizza|la boite a pizza|la brioche doree|leon de bruxelles|bagelstein|columbus cafe|memphis coffee|del arte|class'croute|o'tacos|sushi shop|mezzo di pasta|pomme de pain|big fernand|pizza sprint|bistro regent|l'epicurien|tablapizza|speed burger|pat a pain|pizza bonici|firmin|l'atelier gourmand|pizza time|a la bonne heure|francesca|planet sushi|speed rabbit pizza|pegast|pizza pai|best western|crep'eat|baila pizza|waffle factory|casino cafeteria|la pizza de nico|crocodile|fresh burritos|231 east street|bagel corner|coeur de ble|dubble|eat sushi|fuxia|il ristorante|les fils a maman|nooi|pitaya|jour|les burgers de papa|bchef|chez papa|cojean|le fournil de pierre|oceane|terre et mer|bistro romain|el rancho|l'alambic|le patacrepe|pizza city|cote sushi|la maison bleue|le club sandwich cafe|les 3 brasseurs|bellota-bellota|bistrot du boucher|la tagliatella|nostrum|pizza pino|point chaud|tacos avenue|exki|garden ice cafe|green is better|le paradis du fruit|les relais d'alsace|ma campagne|mamie bigoude|pasta pizza|pizza cosy|planetalis|salad&co|tommy's diner|yogurt factory|cafe leffe|dominos pizza|indiana cafe|le comptoir du malt|lina's|mythic burger|nikki sushi|alto cafe|ankka|burger bar by quick|carre bleu|esprit sushi|feel juice|five guys
+  color: '#d76600'
   icon: restaurant
-- label : _('hotel')
+- label: _('hotel')
   name: hotel
-  color: "#6d6d76"
-  matcher:
-    regex: hotels?|campanile|premi[eè]re classe|b&b hotels|ibis budget|ibis|kyriad|mercure|fasthotel|ace hotel|best western|novotel|balladins
+  color: '#6d6d76'
   icon: lodging
-- label : _('supermarket')
+- label: _('supermarket')
   name: supermarket
-  color: "#a125be"
-  matcher:
-    regex: superettes?|epiciers?|epiceries?|8 [aà] huit|leader price express|coccimarket|naturalia|viveco|utile|proxi service|kusmi tea|votre marche|epi service|satoriz|proxi marche|spar supermarche|day by day|palais des thes|le monde du macaron|point coop|le marche d'a cote|corsaire|cali|g 20|paris store|hyper casino|les halles? de l'aveyron|rnpc|ecofrais|europrix|easy marche|ferrari|intermarche express|kelly services?|partisans? du gout|(?:super|hyper|inter)marches?|auchan|carrefour|(?:e\.)?leclerc|casino|(?:super|hyper)\s+u|monoprix|simply|u\s+express|proxi|spar|vival|lidl|leader\s+price|grand\s+frais|petit casino|leader price|picard|franprix|super u|simply market|casino shop|grand frais|netto|8 a huit|coop|monop'|proxi super|panier sympa|supermarche match|chronodrive|atac|colruyt|casino supermarche|coccinelle express|cora|sherpa|aldi|maximarche|bi1|marche u|shopi|ecomax|relais des mousquetaires|sitis|champion|intermarche contact|marche plus|score|a2pas|geant casino|norma|systeme u|jumbo score|o'tera|coccinelle supermarche|ecomarche|espace multimedia|express|intermarche super|casino drive|costco wholesale|franprix nano|galeries gourmandes|hyper champion|partisans du gout|simply city|u drive|unik market|carrefour market|intermarche
+  color: '#a125be'
   icon: grocery
-- label : _('bar')
+- label: _('bar')
   name: bar
-  color: "#d76600"
-  matcher:
-    regex: "cafes?|bars?|coffea|alto cafe|bert's|illy caffe|pub|tapas|cabarets"
+  color: '#d76600'
   icon: bar
-- label : _('pharmacy')
+- label: _('pharmacy')
   name: pharmacy
-  color: "#1777cb"
-  matcher:
-    regex: phar|parapharmacies?|parashop|pharmacies?|pharmacien(?:nes?)?
+  color: '#1777cb'
   icon: pharmacy
-- label : _('leisure')
+- label: _('leisure')
   name: leisure
-  color: "#e2001c"
-  matcher:
-    regex: "cine|leisures?|loisirs?|cin[ée](?:ma)?s?|ugc|path[ée]|th[ée]atres?|parcs?\\s+(?:(?:d')?attractions?|(de\\s+)?loisirs?)|royal kids|laser game|escape game|goolfy|laserquest|max aventure|prizoners|get out !|recreakid|kartings?"
+  color: '#e2001c'
   icon: cinema
 - label: _('administration')
   name: administrative
-  color: "#6d6d76"
+  color: '#6d6d76'
   icon: town-hall
 - label: _('health')
   name: health
-  color: "#1777cb"
-  matcher:
-    regex: "health|sante|santé|clinic|dentist|doctors?|hospital|clinique|dentiste|docteurs?|hopital|hôpital"
+  color: '#1777cb'
   icon: hospital
-- label : _('education')
+- label: _('education')
   name: education
-  color: "#6d6d76"
-  matcher:
-    regex: "educ|[eé]coles?\\s*(maternelle|primaire|elementaire)?|college|universite|fac|faculte|iut|[ée]coles?\\s+(?:de\\s+|d')(?:commerce|ingenieurs?)"
+  color: '#6d6d76'
   icon: school
-- label : _('bank')
+- label: _('bank')
   name: bank
-  color: "#6d6d76"
-  matcher:
-    regex: "bank|atm|banques?|credits?\\s+(?:mutuel|agricole|lyonnais|du\\s+nord|cooperatif|foncier)|cic|bnp|hsbc|lcl|caisse\\s+(?:d')?epargne|barclays|societe\\s+generale|axa|square habitat|societe marseillaise de credit|bancassurances|la banque postale"
+  color: '#6d6d76'
   icon: bank
 - label: _('museum')
   name: museum
-  color: "#e2001c"
-  matcher:
-    regex: "museum|musee|musée"
+  color: '#e2001c'
   icon: museum
 - label: _('sport')
   name: fitness
-  color: "#6d6d76"
-  matcher:
-    regex: "fitness|muscu(lation)?|salle de muscu(lation)?"
+  color: '#6d6d76'
   icon: basketball
 
 # Only categories with 'icon' are visible as action buttons.
 # Below are the categories that are only accessible
 # via queries (with detected intention) or URL
 - label: _('service')
   name: service
-  color: "#a125be"
-  matcher:
-    regex: "service|car repair|post office|townhall|police|fire station|garage|poste|bureau de poste|gendarmerie|pompiers|caserne de pompiers"
+  color: '#a125be'
 - label: _('french restaurant')
   name: food_french
 - label: _('pizzeria')

config/default_config.yml

@@ -2,6 +2,10 @@ PORT: 3000
 
 envName: # optional environment name (ex: 'Local', 'Dev') displayed in the page title. Keep empty for production.
 
+# Feature flags for experimental features
+features:
+  ecoResponsiblePlaces: false
+
 # Server
 server:
   maxBodySize: '5KB' # max request body size on POST

language/message/de.po

@@ -1717,4 +1717,13 @@ msgid "dojo"
 msgstr "dojo"
 
 msgid "Details"
-msgstr "Details"
+msgstr "Details"
+
+msgid "Eco-responsible places"
+msgstr "Umweltfreundliche Orte"
+
+msgid "alimentation"
+msgstr "ernährung"
+
+msgid "repair cafe"
+msgstr "reparatur-café"

language/message/en.po

@@ -1596,4 +1596,13 @@ msgid "dojo"
 msgstr ""
 
 msgid "Details"
-msgstr ""
+msgstr ""
+
+msgid "Eco-responsible places"
+msgstr ""
+
+msgid "alimentation"
+msgstr ""
+
+msgid "repair cafe"
+msgstr ""

language/message/es.po

@@ -1710,4 +1710,13 @@ msgid "dojo"
 msgstr "dojo"
 
 msgid "Details"
-msgstr "Detalles"
+msgstr "Detalles"
+
+msgid "Eco-responsible places"
+msgstr "Lugares eco-responsables"
+
+msgid "alimentation"
+msgstr "alimentos"
+
+msgid "repair cafe"
+msgstr "café de reparaciones"

language/message/fr.po

@@ -1743,4 +1743,13 @@ msgid "dojo"
 msgstr "dojo"
 
 msgid "Details"
-msgstr "Details"
+msgstr "Details"
+
+msgid "Eco-responsible places"
+msgstr "Lieux éco-responsables"
+
+msgid "alimentation"
+msgstr "alimentation"
+
+msgid "repair cafe"
+msgstr "repair café"

language/message/it.po

@@ -1715,4 +1715,13 @@ msgid "dojo"
 msgstr "dojo"
 
 msgid "Details"
-msgstr "Dettagli"
+msgstr "Dettagli"
+
+msgid "Eco-responsible places"
+msgstr "Luoghi eco-responsabili"
+
+msgid "alimentation"
+msgstr "alimentazione"
+
+msgid "repair cafe"
+msgstr ""

src/adapters/category.js

@@ -7,12 +7,12 @@ import { findIndexIgnoreCase, capitalizeFirst } from '../libs/string';
 import { CATEGORY_TYPE } from '../../config/constants.yml';
 
 export default class Category {
-  constructor(name, label, iconName, color, matcher) {
+  constructor(name, label, iconName, color, ecoResponsible) {
     this.name = name;
     this.label = _(label);
     this.iconName = iconName;
     this.color = color;
-    this.matcher = matcher;
+    this.ecoResponsible = ecoResponsible;
     this.alternativeName = _('category');
     this.type = CATEGORY_TYPE;
     this.id = `category:${name}`;
@@ -25,10 +25,6 @@ export default class Category {
   isMatching(term) {
     let matched = false;
 
-    if (this.matcher && this.matcher.regex) {
-      matched = new RegExp(`^(${this.matcher.regex})$`, 'i').test(term);
-    }
-
     const prefixLength = Math.min(4, this.label.length);
     // Match label prefix (eg: "supe" for "Supermarché", but not "supel")
     if (!matched && term.length >= prefixLength) {
@@ -48,7 +44,7 @@ export default class Category {
     const label = options?.label || '';
     const icon = options?.icon || null;
     const color = options?.color || '';
-    const matcher = options?.matcher || '';
-    return new Category(name, label, icon, color, matcher);
+    const ecoResponsible = options?.ecoResponsible || false;
+    return new Category(name, label, icon, color, ecoResponsible);
   }
 }

src/components/CategoryList.jsx

@@ -5,7 +5,7 @@ import Telemetry from 'src/libs/telemetry';
 import { getLightBackground } from 'src/libs/colors';
 import { saveQuery, getHistoryEnabled } from '../adapters/search_history';
 
-const CategoryList = ({ className, limit = Number.MAX_VALUE }) => {
+const CategoryList = ({ className, ecoResponsible = false, limit = Number.MAX_VALUE }) => {
   const searchHistoryEnabled = getHistoryEnabled();
   const handleCategoryClick = useCallback(
     category => {
@@ -21,7 +21,7 @@ const CategoryList = ({ className, limit = Number.MAX_VALUE }) => {
   return (
     <div className={className}>
       {CategoryService.getCategories()
-        .filter(c => c.iconName) // ignore categories used on detected intention only
+        .filter(c => c.iconName && c.ecoResponsible === ecoResponsible) // ignore categories used on detected intention only
         .slice(0, limit)
         .map(category => (
           <MainActionButton
@@ -34,6 +34,7 @@ const CategoryList = ({ className, limit = Number.MAX_VALUE }) => {
               color: category.color,
               backgroundColor: getLightBackground(category.color),
             }}
+            ecoResponsible={ecoResponsible}
           />
         ))}
     </div>

src/components/PlaceIcon/index.tsx

@@ -14,9 +14,6 @@ export type PlaceIconProps = {
     label: string;
     iconName: string;
     color: string;
-    matcher: {
-      regexp: string;
-    };
     alternativeName: string;
     type: string;
     id: string;

src/components/ui/MainActionButton.jsx

@@ -2,29 +2,43 @@ import React from 'react';
 import classnames from 'classnames';
 import { capitalizeFirst } from 'src/libs/string';
 import { Flex } from '@qwant/qwant-ponents';
+import { ReactComponent as IconLeaf } from '../../../public/images/leaf.svg';
 
-const MainActionButton = ({ variant, label, onClick, icon, iconStyle, className, ...rest }) => (
-  <button
-    type="button"
-    onClick={onClick}
-    className={classnames(
-      'mainActionButton',
-      {
-        [`mainActionButton--${variant}`]: variant,
-      },
-      className
-    )}
-    {...rest}
-  >
-    {typeof icon === 'string' ? (
-      <div className={`mainActionButton-icon icon-${icon}`} style={iconStyle} />
-    ) : (
-      <Flex className="mainActionButton-icon" center>
-        {icon}
-      </Flex>
-    )}
-    <div className="mainActionButton-label u-ellipsis">{capitalizeFirst(label)}</div>
-  </button>
-);
+const MainActionButton = ({
+  variant,
+  label,
+  onClick,
+  icon,
+  iconStyle,
+  className,
+  ecoResponsible,
+  ...rest
+}) => {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={classnames(
+        'mainActionButton',
+        {
+          [`mainActionButton--${variant}`]: variant,
+        },
+        className
+      )}
+      {...rest}
+    >
+      {typeof icon === 'string' ? (
+        <div className={`mainActionButton-icon icon-${icon}`} style={iconStyle}>
+          {ecoResponsible && <IconLeaf className="ecoResponsible-icon" />}
+        </div>
+      ) : (
+        <Flex className="mainActionButton-icon" center>
+          {icon}
+        </Flex>
+      )}
+      <div className="mainActionButton-label u-ellipsis">{capitalizeFirst(label)}</div>
+    </button>
+  );
+};
 
 export default MainActionButton;

src/panel/service/ServicePanelDesktop.jsx

@@ -1,21 +1,38 @@
 import React, { Fragment, useState } from 'react';
 import { Panel, Chevron } from 'src/components/ui';
 import CategoryList from 'src/components/CategoryList';
-import { useI18n } from 'src/hooks';
+import { useConfig, useI18n } from 'src/hooks';
 import { Flex, Button } from '@qwant/qwant-ponents';
 
 const ServicePanelDesktop = () => {
   const [collapsed, setCollapsed] = useState(true);
   const { _ } = useI18n();
+  const ecoResponsible = useConfig('features').ecoResponsible;
 
   return (
     <Fragment>
       <Panel className="service_panel u-mb-m">
         <h3 className="u-text--smallTitle u-mb-s">
           {_('Search around this place', 'service panel')}
         </h3>
-        <CategoryList className="service_panel__categories" limit={collapsed ? 4 : undefined} />
+        <CategoryList
+          className="service_panel__categories"
+          ecoResponsible={false}
+          limit={collapsed ? 4 : undefined}
+        />
       </Panel>
+      {ecoResponsible && (
+        <Panel className="service_panel u-mb-m">
+          <h3 className="u-text--smallTitle u-mb-s">
+            {_('Eco-responsible places', 'eco service panel')}
+          </h3>
+          <CategoryList
+            className="service_panel__categories"
+            ecoResponsible={true}
+            limit={collapsed ? 4 : undefined}
+          />
+        </Panel>
+      )}
       <Flex center>
         <div className="service_panel__category_toggle">
           <Button