From aafe0552bafaa97ef946ad877dcf916ddafc353a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20Dupr=C3=A9?= Date: Wed, 26 Oct 2022 12:02:03 +0200 Subject: [PATCH 1/9] add eco-responsible pannel for desktop --- config/categories.yml | 70 ++++++++++++------- src/adapters/category.js | 6 +- src/components/CategoryList.jsx | 5 +- src/components/ui/MainActionButton.jsx | 59 ++++++++++------ src/panel/service/ServicePanelDesktop.jsx | 16 ++++- .../includes/components/mainActionButton.scss | 8 +++ 6 files changed, 111 insertions(+), 53 deletions(-) diff --git a/config/categories.yml b/config/categories.yml index 9d1ba7eb5..f383d1502 100644 --- a/config/categories.yml +++ b/config/categories.yml @@ -1,73 +1,93 @@ --- -- label : _('restaurant') +- label: _('alimentation') + name: eco-alimenation + color: '#d76600' + icon: restaurant + ecoResponsible: true +- label: _('repair cafe') + name: repair-cafe + color: '#d76600' + icon: restaurant + ecoResponsible: true +- label: _('repair cafe') + name: repair-cafe + color: '#d76600' + icon: restaurant + ecoResponsible: true +- label: _('book shelf') + name: bookshelf + color: '#d76600' + icon: restaurant + ecoResponsible: true +- label: _('restaurant') name: restaurant - color: "#d76600" + 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 icon: restaurant -- label : _('hotel') +- label: _('hotel') name: hotel - color: "#6d6d76" + 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 icon: lodging -- label : _('supermarket') +- label: _('supermarket') name: supermarket - color: "#a125be" + 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 icon: grocery -- label : _('bar') +- label: _('bar') name: bar - color: "#d76600" + color: '#d76600' matcher: regex: "cafes?|bars?|coffea|alto cafe|bert's|illy caffe|pub|tapas|cabarets" icon: bar -- label : _('pharmacy') +- label: _('pharmacy') name: pharmacy - color: "#1777cb" + color: '#1777cb' matcher: regex: phar|parapharmacies?|parashop|pharmacies?|pharmacien(?:nes?)? icon: pharmacy -- label : _('leisure') +- label: _('leisure') name: leisure - color: "#e2001c" + 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?" icon: cinema - label: _('administration') name: administrative - color: "#6d6d76" + color: '#6d6d76' icon: town-hall - label: _('health') name: health - color: "#1777cb" + color: '#1777cb' matcher: - regex: "health|sante|santé|clinic|dentist|doctors?|hospital|clinique|dentiste|docteurs?|hopital|hôpital" + regex: 'health|sante|santé|clinic|dentist|doctors?|hospital|clinique|dentiste|docteurs?|hopital|hôpital' icon: hospital -- label : _('education') +- label: _('education') name: education - color: "#6d6d76" + color: '#6d6d76' matcher: regex: "educ|[eé]coles?\\s*(maternelle|primaire|elementaire)?|college|universite|fac|faculte|iut|[ée]coles?\\s+(?:de\\s+|d')(?:commerce|ingenieurs?)" icon: school -- label : _('bank') +- label: _('bank') name: bank - color: "#6d6d76" + 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" icon: bank - label: _('museum') name: museum - color: "#e2001c" + color: '#e2001c' matcher: - regex: "museum|musee|musée" + regex: 'museum|musee|musée' icon: museum - label: _('sport') name: fitness - color: "#6d6d76" + color: '#6d6d76' matcher: - regex: "fitness|muscu(lation)?|salle de muscu(lation)?" + regex: 'fitness|muscu(lation)?|salle de muscu(lation)?' icon: basketball # Only categories with 'icon' are visible as action buttons. @@ -75,9 +95,9 @@ # via queries (with detected intention) or URL - label: _('service') name: service - color: "#a125be" + color: '#a125be' matcher: - regex: "service|car repair|post office|townhall|police|fire station|garage|poste|bureau de poste|gendarmerie|pompiers|caserne de pompiers" + regex: 'service|car repair|post office|townhall|police|fire station|garage|poste|bureau de poste|gendarmerie|pompiers|caserne de pompiers' - label: _('french restaurant') name: food_french - label: _('pizzeria') diff --git a/src/adapters/category.js b/src/adapters/category.js index 074140026..dbab078fa 100644 --- a/src/adapters/category.js +++ b/src/adapters/category.js @@ -7,12 +7,13 @@ 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, matcher, 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}`; @@ -49,6 +50,7 @@ export default class Category { 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, matcher, ecoResponsible); } } diff --git a/src/components/CategoryList.jsx b/src/components/CategoryList.jsx index 93a390047..1a5051762 100644 --- a/src/components/CategoryList.jsx +++ b/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 (
{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 => ( { color: category.color, backgroundColor: getLightBackground(category.color), }} + ecoResponsible={ecoResponsible} /> ))}
diff --git a/src/components/ui/MainActionButton.jsx b/src/components/ui/MainActionButton.jsx index dfcb5b39e..fec1977dc 100644 --- a/src/components/ui/MainActionButton.jsx +++ b/src/components/ui/MainActionButton.jsx @@ -3,28 +3,41 @@ import classnames from 'classnames'; import { capitalizeFirst } from 'src/libs/string'; import { Flex } from '@qwant/qwant-ponents'; -const MainActionButton = ({ variant, label, onClick, icon, iconStyle, className, ...rest }) => ( - -); +const MainActionButton = ({ + variant, + label, + onClick, + icon, + iconStyle, + className, + ecoResponsible, + ...rest +}) => { + const extraIconClass = ecoResponsible ? 'eco-responsible-icon' : ''; + + return ( + + ); +}; export default MainActionButton; diff --git a/src/panel/service/ServicePanelDesktop.jsx b/src/panel/service/ServicePanelDesktop.jsx index 30cef5253..514345b4d 100644 --- a/src/panel/service/ServicePanelDesktop.jsx +++ b/src/panel/service/ServicePanelDesktop.jsx @@ -14,7 +14,21 @@ const ServicePanelDesktop = () => {

{_('Search around this place', 'service panel')}

- + + + +

+ {_('Eco-responsible places', 'eco service panel')} +

+
diff --git a/src/scss/includes/components/mainActionButton.scss b/src/scss/includes/components/mainActionButton.scss index ef45e7787..0cdac900f 100644 --- a/src/scss/includes/components/mainActionButton.scss +++ b/src/scss/includes/components/mainActionButton.scss @@ -18,6 +18,14 @@ margin-bottom: $spacing-xs; } + .eco-responsible-icon:after { + content: '🌳'; + font-size: 20px; + position: fixed; + margin-top: -15px; + margin-left: -5px; + } + &:active { background-color: var(--grey-050); } From fc49eb09c08b734ed319368a145073716ff9f323 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20Dupr=C3=A9?= Date: Wed, 26 Oct 2022 14:04:52 +0200 Subject: [PATCH 2/9] set color and icon for eco responsible places --- config/categories.yml | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/config/categories.yml b/config/categories.yml index f383d1502..d8d8e6588 100644 --- a/config/categories.yml +++ b/config/categories.yml @@ -1,23 +1,23 @@ --- - label: _('alimentation') name: eco-alimenation - color: '#d76600' - icon: restaurant + color: '#108048' + icon: grocery ecoResponsible: true - label: _('repair cafe') name: repair-cafe - color: '#d76600' - icon: restaurant + color: '#108048' + icon: hardware ecoResponsible: true - label: _('repair cafe') name: repair-cafe - color: '#d76600' + color: '#108048' icon: restaurant ecoResponsible: true - label: _('book shelf') name: bookshelf - color: '#d76600' - icon: restaurant + color: '#108048' + icon: library ecoResponsible: true - label: _('restaurant') name: restaurant From 92ecc839256613831381981a515f475a375ffd39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20Dupr=C3=A9?= Date: Wed, 26 Oct 2022 14:09:37 +0200 Subject: [PATCH 3/9] add eco responsible places in mobile vue --- src/panel/service/ServicePanelMobile.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/panel/service/ServicePanelMobile.jsx b/src/panel/service/ServicePanelMobile.jsx index 463a6ff28..d6d8f249f 100644 --- a/src/panel/service/ServicePanelMobile.jsx +++ b/src/panel/service/ServicePanelMobile.jsx @@ -64,9 +64,13 @@ const ServicePanelMobile = () => { )}

- {_('Services nearby', 'service panel')} + {_('Eco-responsible places', 'eco service panel')}

+ +

+ {_('Services nearby', 'service panel')} +

); From b782ada2f2a44d00ed8a4dea28e656a3d3468e9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20Dupr=C3=A9?= Date: Wed, 26 Oct 2022 14:30:02 +0200 Subject: [PATCH 4/9] add feature flag features_ecoResponsible --- config/default_config.yml | 4 ++++ src/panel/service/ServicePanelDesktop.jsx | 27 ++++++++++++++--------- src/panel/service/ServicePanelMobile.jsx | 13 +++++++---- 3 files changed, 29 insertions(+), 15 deletions(-) diff --git a/config/default_config.yml b/config/default_config.yml index 3ffcbdd31..bb2c50902 100644 --- a/config/default_config.yml +++ b/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 diff --git a/src/panel/service/ServicePanelDesktop.jsx b/src/panel/service/ServicePanelDesktop.jsx index 514345b4d..505790049 100644 --- a/src/panel/service/ServicePanelDesktop.jsx +++ b/src/panel/service/ServicePanelDesktop.jsx @@ -1,12 +1,13 @@ 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 ( @@ -20,16 +21,20 @@ const ServicePanelDesktop = () => { limit={collapsed ? 4 : undefined} /> - -

- {_('Eco-responsible places', 'eco service panel')} -

- - + {ecoResponsible && ( + <> + +

+ {_('Eco-responsible places', 'eco service panel')} +

+ + + + )}