Add icons in ecogesture buttons

src/components/CommonKit/SVG/EcogesturesSVG.tsx

+import { EcogesturesIcon } from 'enum/ecogestureIcon.enum'
+import AccelerateurSVG from 'assets/icons/eco/picto/accelerateur.svg'
+import CasqueSVG from 'assets/icons/eco/picto/casque.svg'
+import CymbalSVG from 'assets/icons/eco/picto/cymbal.svg'
+import ElectroSVG from 'assets/icons/eco/picto/electro.svg'
+import FrerotsSVG from 'assets/icons/eco/picto/frerots.svg'
+import HibernationSVG from 'assets/icons/eco/picto/hibernation.svg'
+import PoingsSVG from 'assets/icons/eco/picto/poings.svg'
+import VaisselleSVG from 'assets/icons/eco/picto/vaisselle.svg'
+
+export const getEcogestureIconSVG = (iconName: string) => {
+  switch (iconName) {
+    case EcogesturesIcon.ACCELEREATEUR:
+      return AccelerateurSVG
+    case EcogesturesIcon.CASQUE:
+      return CasqueSVG
+    case EcogesturesIcon.CYMBAL:
+      return CymbalSVG
+    case EcogesturesIcon.ELECTRO:
+      return ElectroSVG
+    case EcogesturesIcon.FREROTS:
+      return FrerotsSVG
+    case EcogesturesIcon.HIBERNATION:
+      return HibernationSVG
+    case EcogesturesIcon.POINGS:
+      return PoingsSVG
+    case EcogesturesIcon.VAISSELLE:
+      return VaisselleSVG
+    default:
+      return null
+  }
+}

src/components/ContentComponents/EcogestureCard/EcogestureCard.tsx

@@ -2,6 +2,8 @@ import React from 'react'
 import { translate } from 'cozy-ui/react/I18n'
 import { EcogestureType } from 'services/dataChallengeContracts'
 import StyledEcogestureCard from 'components/CommonKit/Card/StyledEcogestureCard'
+import Icon from 'cozy-ui/react/Icon'
+import { getEcogestureIconSVG } from '../../CommonKit/SVG/EcogesturesSVG'
 
 interface EcogestureCardProps {
   ecogesture: EcogestureType
@@ -19,11 +21,21 @@ const EcogestureCard: React.FC<EcogestureCardProps> = ({
   const handleCardclick = () => {
     handleClick && ecogesture ? handleClick(ecogesture) : null
   }
+
   return (
     <>
       {challengeEcogesture ? (
         <div className={`cp-eg-${challengeEcogesture}`}>
           <StyledEcogestureCard border={true} onClick={handleCardclick}>
+            {ecogesture.iconName && (
+              <div>
+                <Icon
+                  className="Icon"
+                  icon={getEcogestureIconSVG(ecogesture.iconName)}
+                  size={64}
+                />
+              </div>
+            )}
             <div className="challenge-eg">
               {ecogesture.shortName}
               {/* {`${t('CHALLENGE.ECOGESTURE')} ${challengeEcogesture}`} */}
@@ -37,6 +49,15 @@ const EcogestureCard: React.FC<EcogestureCardProps> = ({
         >
           <div className="ec">
             <div className="ec-content">
+              {ecogesture.iconName && (
+                <div>
+                  <Icon
+                    className="Icon"
+                    icon={getEcogestureIconSVG(ecogesture.iconName)}
+                    size={64}
+                  />
+                </div>
+              )}
               <div className="ec-content-short-name text-16-bold">
                 {ecogesture.shortName}
               </div>

src/components/ContentComponents/EcogestureModal/EcogestureModal.tsx

@@ -4,6 +4,8 @@ import Modal from 'components/CommonKit/Modal/Modal'
 import { getPicto } from 'utils/utils'
 import { EcogestureType } from 'services/dataChallengeContracts'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import Icon from 'cozy-ui/react/Icon'
+import { getEcogestureIconSVG } from 'components/CommonKit/SVG/EcogesturesSVG'
 
 interface EcogestureModalProps {
   opened: boolean
@@ -32,6 +34,15 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
           </div>
           <div className="em-content-box">
             <div className="em-content-box-text">
+              {ecogesture.iconName !== '' && (
+                <div>
+                  <Icon
+                    className="icon"
+                    icon={getEcogestureIconSVG(ecogesture.iconName)}
+                    size={100}
+                  />
+                </div>
+              )}
               <div className="em-title text-24-bold ">
                 {ecogesture.shortName}
               </div>

src/db/ecogestureData.json

@@ -8,7 +8,8 @@
     "usage": "Eau chaude sanitaire",
     "fluidTypes": [0],
     "pack": 8,
-    "nwh": 6
+    "nwh": 6,
+    "iconName" : ""
   },
   {
     "_id": "0034",
@@ -19,7 +20,8 @@
     "usage": "Eau chaude sanitaire",
     "fluidTypes": [1],
     "pack": 6,
-    "nwh": 5
+    "nwh": 5,
+    "iconName" : ""
   },
   {
     "_id": "0037",
@@ -30,7 +32,8 @@
     "usage": "Eau chaude sanitaire",
     "fluidTypes": [1],
     "pack": 0,
-    "nwh": 4
+    "nwh": 4,
+    "iconName" : ""
   },
   {
     "_id": "0038",
@@ -41,7 +44,8 @@
     "usage": "Eau chaude sanitaire",
     "fluidTypes": [0, 2],
     "pack": 0,
-    "nwh": 2
+    "nwh": 2,
+    "iconName" : ""
   },
   {
     "_id": "0040",
@@ -52,7 +56,8 @@
     "usage": "Eau chaude sanitaire",
     "fluidTypes": [0],
     "pack": 0,
-    "nwh": 6
+    "nwh": 6,
+    "iconName" : ""
   },
   {
     "_id": "0041",
@@ -63,7 +68,8 @@
     "usage": "Eau chaude sanitaire",
     "fluidTypes": [1],
     "pack": 7,
-    "nwh": 6
+    "nwh": 6,
+    "iconName" : ""
   },
   {
     "_id": "0042",
@@ -74,7 +80,8 @@
     "usage": "Eau chaude sanitaire",
     "fluidTypes": [1],
     "pack": 5,
-    "nwh": 5
+    "nwh": 5,
+    "iconName" : ""
   },
   {
     "_id": "0043",
@@ -85,7 +92,8 @@
     "usage": "Eau chaude sanitaire",
     "fluidTypes": [0, 2],
     "pack": 3,
-    "nwh": 3
+    "nwh": 3,
+    "iconName" : "poings"
   },
   {
     "_id": "0044",
@@ -96,7 +104,8 @@
     "usage": "Eau chaude sanitaire",
     "fluidTypes": [1],
     "pack": 0,
-    "nwh": 3
+    "nwh": 3,
+    "iconName" : ""
   },
   {
     "_id": "0045",
@@ -107,7 +116,8 @@
     "usage": "Eau chaude sanitaire",
     "fluidTypes": [0, 2],
     "pack": 2,
-    "nwh": 3
+    "nwh": 3,
+    "iconName" : "vaisselle"
   },
   {
     "_id": "0046",
@@ -118,7 +128,8 @@
     "usage": "Eau froide",
     "fluidTypes": [1],
     "pack": 0,
-    "nwh": 6
+    "nwh": 6,
+    "iconName" : ""
   },
   {
     "_id": "0048",
@@ -129,7 +140,8 @@
     "usage": "Eau froide",
     "fluidTypes": [1],
     "pack": 0,
-    "nwh": 6
+    "nwh": 6,
+    "iconName" : ""
   },
   {
     "_id": "0050",
@@ -140,7 +152,8 @@
     "usage": "Froid",
     "fluidTypes": [0],
     "pack": 4,
-    "nwh": 3
+    "nwh": 3,
+    "iconName" : ""
   },
   {
     "_id": "0052",
@@ -151,7 +164,8 @@
     "usage": "Froid",
     "fluidTypes": [0],
     "pack": 0,
-    "nwh": 2
+    "nwh": 2,
+    "iconName" : ""
   },
   {
     "_id": "0053",
@@ -162,7 +176,8 @@
     "usage": "Froid",
     "fluidTypes": [0],
     "pack": 0,
-    "nwh": 1
+    "nwh": 1,
+    "iconName" : ""
   },
   {
     "_id": "0054",
@@ -173,7 +188,8 @@
     "usage": "Froid",
     "fluidTypes": [0],
     "pack": 0,
-    "nwh": 1
+    "nwh": 1,
+    "iconName" : ""
   },
   {
     "_id": "0055",
@@ -184,7 +200,8 @@
     "usage": "Froid",
     "fluidTypes": [0],
     "pack": 0,
-    "nwh": 1
+    "nwh": 1,
+    "iconName" : ""
   },
   {
     "_id": "0056",
@@ -195,7 +212,8 @@
     "usage": "Froid",
     "fluidTypes": [0],
     "pack": 0,
-    "nwh": 1
+    "nwh": 1,
+    "iconName" : ""
   },
   {
     "_id": "0057",
@@ -206,7 +224,8 @@
     "usage": "Froid",
     "fluidTypes": [0],
     "pack": 0,
-    "nwh": 1
+    "nwh": 1,
+    "iconName" : ""
   },
   {
     "_id": "0058",
@@ -217,7 +236,8 @@
     "usage": "Froid",
     "fluidTypes": [0],
     "pack": 5,
-    "nwh": 2
+    "nwh": 2,
+    "iconName" : ""
   },
   {
     "_id": "0059",
@@ -228,7 +248,8 @@
     "usage": "Froid",
     "fluidTypes": [0],
     "pack": 0,
-    "nwh": 1
+    "nwh": 1,
+    "iconName" : ""
   },
   {
     "_id": "0061",
@@ -239,7 +260,8 @@
     "usage": "Froid",
     "fluidTypes": [0],
     "pack": 0,
-    "nwh": 1
+    "nwh": 1,
+    "iconName" : ""
   },
   {
     "_id": "0064",
@@ -250,7 +272,8 @@
     "usage": "Audiovisuel, Petit électroménager, Hi-Fi, Informatique",
     "fluidTypes": [0],
     "pack": 2,
-    "nwh": 3
+    "nwh": 3,
+    "iconName" : "electro"
   },
   {
     "_id": "0065",
@@ -261,7 +284,8 @@
     "usage": "Audiovisuel, Petit électroménager, Hi-Fi, Informatique",
     "fluidTypes": [0],
     "pack": 0,
-    "nwh": 1
+    "nwh": 1,
+    "iconName" : ""
   },
   {
     "_id": "0066",
@@ -272,7 +296,8 @@
     "usage": "Audiovisuel, Petit électroménager, Hi-Fi, Informatique",
     "fluidTypes": [0],
     "pack": 6,
-    "nwh": 3
+    "nwh": 3,
+    "iconName" : ""
   },
   {
     "_id": "0068",
@@ -283,7 +308,8 @@
     "usage": "Audiovisuel, Petit électroménager, Hi-Fi, Informatique",
     "fluidTypes": [0],
     "pack": 0,
-    "nwh": 1
+    "nwh": 1,
+    "iconName" : ""
   },
   {
     "_id": "0071",
@@ -294,7 +320,8 @@
     "usage": "Lavage",
     "fluidTypes": [0, 1],
     "pack": 3,
-    "nwh": 2
+    "nwh": 2,
+    "iconName" : ""
   },
   {
     "_id": "0072",
@@ -305,7 +332,8 @@
     "usage": "Lavage",
     "fluidTypes": [0, 1],
     "pack": 0,
-    "nwh": 2
+    "nwh": 2,
+    "iconName" : ""
   },
   {
     "_id": "0074",
@@ -316,7 +344,8 @@
     "usage": "Lavage",
     "fluidTypes": [0, 1],
     "pack": 0,
-    "nwh": 1
+    "nwh": 1,
+    "iconName" : ""
   },
   {
     "_id": "0077",
@@ -327,7 +356,8 @@
     "usage": "Lavage",
     "fluidTypes": [0],
     "pack": 0,
-    "nwh": 1
+    "nwh": 1,
+    "iconName" : ""
   },
   {
     "_id": "0078",
@@ -338,7 +368,8 @@
     "usage": "Lavage",
     "fluidTypes": [0],
     "pack": 8,
-    "nwh": 3
+    "nwh": 3,
+    "iconName" : ""
   },
   {
     "_id": "0082",
@@ -349,7 +380,8 @@
     "usage": "Eclairage",
     "fluidTypes": [0],
     "pack": 7,
-    "nwh": 3
+    "nwh": 3,
+    "iconName" : ""
   },
   {
     "_id": "0085",
@@ -360,7 +392,8 @@
     "usage": "Eclairage",
     "fluidTypes": [0],
     "pack": 1,
-    "nwh": 2
+    "nwh": 2,
+    "iconName" : "frerots"
   },
   {
     "_id": "0086",
@@ -371,7 +404,8 @@
     "usage": "Eclairage",
     "fluidTypes": [0],
     "pack": 0,
-    "nwh": 1
+    "nwh": 1,
+    "iconName" : ""
   },
   {
     "_id": "0087",
@@ -382,7 +416,8 @@
     "usage": "Eclairage",
     "fluidTypes": [0],
     "pack": 0,
-    "nwh": 1
+    "nwh": 1,
+    "iconName" : ""
   },
   {
     "_id": "0092",
@@ -393,7 +428,8 @@
     "usage": "Cuisson",
     "fluidTypes": [0, 2],
     "pack": 1,
-    "nwh": 3
+    "nwh": 3,
+    "iconName" : "cymbal"
   },
   {
     "_id": "0093",
@@ -404,7 +440,8 @@
     "usage": "Cuisson",
     "fluidTypes": [0],
     "pack": 4,
-    "nwh": 3
+    "nwh": 3,
+    "iconName" : "casque"
   },
   {
     "_id": "0097",
@@ -415,6 +452,7 @@
     "usage": "Cuisson",
     "fluidTypes": [0],
     "pack": 0,
-    "nwh": 2
+    "nwh": 2,
+    "iconName" : ""
   }
-]
+]
\ No newline at end of file

src/enum/ecogestureIcon.enum.ts

+export enum EcogesturesIcon {
+  ACCELEREATEUR = 'accelerateur',
+  CASQUE = 'casque',
+  CYMBAL = 'cymbal',
+  ELECTRO = 'electro',
+  FREROTS = 'frerots',
+  HIBERNATION = 'hibernation',
+  POINGS = 'poings',
+  VAISSELLE = 'vaisselle',
+}

src/services/dataChallengeContracts.ts

@@ -47,6 +47,7 @@ export class EcogestureType {
   fluidTypes: FluidType[]
   nwh: number
   pack: number
+  iconName: string
   unlocked?: boolean
 
   constructor(
@@ -59,6 +60,7 @@ export class EcogestureType {
     fluidTypes: FluidType[],
     nwh: number,
     pack: number,
+    iconName: string,
     unlocked?: boolean
   ) {
     this.id = id
@@ -70,6 +72,7 @@ export class EcogestureType {
     this.fluidTypes = fluidTypes
     this.nwh = nwh
     this.pack = pack
+    this.iconName = iconName
     this.unlocked = unlocked
   }
 }