Merge branch 'features/update-ecogesture' into 'dev'

update efficienty modal

See merge request web-et-numerique/llle_project/ecolyo!234

src/components/Ecogesture/EcogestureCard.tsx

@@ -4,6 +4,7 @@ import StyledEcogestureCard from 'components/CommonKit/Card/StyledEcogestureCard
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import { importIconbyId } from 'utils/utils'
 import './ecogestureCard.scss'
+import EfficientyRating from './EfficientyRating'
 interface EcogestureCardProps {
   ecogesture: Ecogesture
   handleClick?: (ecogesture: Ecogesture) => void
@@ -49,8 +50,7 @@ const EcogestureCard: React.FC<EcogestureCardProps> = ({
               {ecogesture.shortName}
             </div>
             <div className="ec-content-nwh">
-              <span className="text-16-bold">{ecogesture.nwh}</span>
-              <span className="text-16-normal"> nWh</span>
+              <EfficientyRating result={Math.round(ecogesture.nwh / 2)} />
             </div>
           </div>
         </div>

src/components/Ecogesture/EcogestureList.tsx

@@ -16,10 +16,11 @@ import OrderIcon from 'assets/icons/ico/order.svg'
 import StyledChallengeSpinner from 'components/CommonKit/Spinner/StyledEcogestureSpinner'
 import EcogestureCard from 'components/Ecogesture/EcogestureCard'
 import EcogestureModal from 'components/Ecogesture/EcogestureModal'
-import NegaWattModal from 'components/Ecogesture/NegaWattModal'
+import EfficientyModal from 'components/Ecogesture/EfficientyModal'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import MuiButton from '@material-ui/core/Button'
 import './ecogestureList.scss'
+import thunderFilled from 'assets/icons/visu/thunderFilled.svg'
 
 const EcogesturesList: React.FC = () => {
   const { t } = useI18n()
@@ -31,10 +32,10 @@ const EcogesturesList: React.FC = () => {
   const [ecogestures, setEcogestures] = useState<Ecogesture[] | null>(null)
   const [isLoaded, setisLoaded] = useState(false)
   const [openEcogestureModal, setOpenEcogestureModal] = useState(false)
-  const [openNegaWattModal, setOpenNegaWattModal] = useState(false)
   const [filterbyFluid, setfilterbyFluid] = useState<FluidType | null>(null)
   const [ascendingSort, setascendingSort] = useState(false)
   const [openDropDown, setopenDropDown] = useState(false)
+  const [openEfficientyModal, setopenEfficientyModal] = useState(false)
 
   const handleClick = (ecogesture: Ecogesture) => {
     setSelectedEcogesture(ecogesture)
@@ -45,14 +46,9 @@ const EcogesturesList: React.FC = () => {
     setOpenEcogestureModal(false)
   }, [])
 
-  const handleNegaWattClick = () => {
-    setOpenNegaWattModal(true)
+  const toggleModalEfficienty = () => {
+    setopenEfficientyModal(prev => !prev)
   }
-
-  const handleNegaWattCloseClick = () => {
-    setOpenNegaWattModal(false)
-  }
-
   const toggleDropDown = () => {
     setopenDropDown(prev => !prev)
   }
@@ -113,8 +109,8 @@ const EcogesturesList: React.FC = () => {
   return (
     <div className="ecogesture-root">
       <>
-        {openNegaWattModal && (
-          <NegaWattModal handleCloseClick={handleNegaWattCloseClick} />
+        {openEfficientyModal && (
+          <EfficientyModal handleCloseClick={toggleModalEfficienty} />
         )}
         <div className="negawatt-button-content">
           <div className="filters text-16-normal">
@@ -281,11 +277,18 @@ const EcogesturesList: React.FC = () => {
             >
               <StyledIcon icon={OrderIcon} size={28} />
             </MuiButton>
-
-            <div className="ng-question" onClick={handleNegaWattClick}>
-              {t('ECOGESTURE.QUESTION_NEGAWATT')}
-            </div>
           </div>
+          <MuiButton
+            onClick={() => {
+              toggleModalEfficienty()
+            }}
+            classes={{
+              root: 'btn-secondary-negative btn-order',
+              label: 'text-14-normal',
+            }}
+          >
+            <StyledIcon icon={thunderFilled} size={28} />
+          </MuiButton>
         </div>
         <div className="ecogesture-content">
           {!ecogestures || !isLoaded ? (

src/components/Ecogesture/NegaWattModal.tsx → src/components/Ecogesture/EfficientyModal.tsx

 import React from 'react'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import Modal from 'components/CommonKit/Modal/Modal'
-import './ecogestureModal.scss'
-interface NegaWattModalProps {
+import './efficientyModal.scss'
+import thunderFilled from 'assets/icons/visu/thunderFilled.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import EfficientyRating from './EfficientyRating'
+
+interface EfficientyModalProps {
   handleCloseClick: () => void
 }
 
-const NegaWattModal: React.FC<NegaWattModalProps> = ({
+const EfficientyModal: React.FC<EfficientyModalProps> = ({
   handleCloseClick,
-}: NegaWattModalProps) => {
+}: EfficientyModalProps) => {
   const { t } = useI18n()
   return (
     <Modal handleCloseClick={handleCloseClick}>
-      <div className="em-header text-14-normal-uppercase">
-        {t('NEGAWATT.TITLE_NEGAWATT')}
+      <div className="header-efficienty-modal text-22-bold">
+        <StyledIcon icon={thunderFilled} size={50} />
+        {t('modal_efficienty.title')}
       </div>
       <div className="em-content-box">
         <div className="em-content-box-text">
-          <div className="em-title text-19-bold ">{t('NEGAWATT.QUESTION')}</div>
-          <div className="em-description-2 text-16">
-            {t('NEGAWATT.ANSWER.BASE')}
+          <div className="em-title text-19-normal ">
+            {t('modal_efficienty.description')}
           </div>
           <div className="em-description-2 text-16">
-            <div className="em-description-3">
-              {t('NEGAWATT.ANSWER.STRONG')}
+            <div className="star-efficienty-modal">
+              <EfficientyRating result={5} />
+              {t('modal_efficienty.important_eco')}
             </div>
-            <div className="em-description-3">
-              {t('NEGAWATT.ANSWER.MEDIUM')}
+            <div className="star-efficienty-modal">
+              <EfficientyRating result={1} />
+              {t('modal_efficienty.weak_eco')}
             </div>
-            <div className="em-description-3">{t('NEGAWATT.ANSWER.WEAK')}</div>
           </div>
         </div>
       </div>
@@ -36,4 +41,4 @@ const NegaWattModal: React.FC<NegaWattModalProps> = ({
   )
 }
 
-export default NegaWattModal
+export default EfficientyModal

src/components/Ecogesture/EfficientyRating.tsx

@@ -10,26 +10,29 @@ interface EfficientyRatingProps {
 const EfficientyRating: React.FC<EfficientyRatingProps> = ({
   result,
 }: EfficientyRatingProps) => {
-  const [elements] = useState<string[]>([])
-  useEffect(() => {
-    const renderThunder = () => {
-      //To be removed when action and explorations will be done
-      if (result === 5) {
-        elements.splice(0, elements.length)
-      }
-      for (let i = 0; i < 5; i++) {
-        if (i < result) elements.push(thunderFilled)
-        else if (i >= result) elements.push(thunderEmpty)
-      }
-    }
-
-    renderThunder()
-  }, [result, elements])
+  const maxStars = [1, 2, 3, 4, 5]
 
   return (
     <div className="thunder">
-      {elements.map((star, i) => {
-        return <StyledIcon key={i} className="star" icon={star} size={15} />
+      {maxStars.map((number, i) => {
+        if (number <= result)
+          return (
+            <StyledIcon
+              key={i}
+              className="star"
+              icon={thunderFilled}
+              size={15}
+            />
+          )
+        else
+          return (
+            <StyledIcon
+              key={i}
+              className="star"
+              icon={thunderEmpty}
+              size={15}
+            />
+          )
       })}
     </div>
   )

src/components/Ecogesture/ecogestureList.scss

@@ -11,6 +11,9 @@
   .negawatt-button-content {
     max-width: 52rem;
     width: 97%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     @media #{$tablet} {
       width: 97%;
     }
@@ -27,7 +30,6 @@
     .filters {
       display: flex;
       align-items: center;
-      justify-content: space-between;
       height: 50px;
       color: white;
       position: relative;

src/components/Ecogesture/efficientyModal.scss

+.header-efficienty-modal {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    svg {
+      margin-bottom: 0.5rem;
+    }
+}
+.star-efficienty-modal {
+    padding-bottom: 0.5rem;
+    display: flex;
+    div {
+      margin-right: 1rem;
+    }
+  }
\ No newline at end of file

src/locales/fr.json

@@ -526,5 +526,11 @@
       "label": "Grâce à ces nouvelles informations, votre comparaison sera bien plus précise et pertinente !",
       "view_comparison": "Voir ma comparaison"
     }
+  },
+  "modal_efficienty": {
+    "title": "Efficacité !",
+    "description": "L’efficacité sert d'unité de mesure de vos économies d'énergie. Cette unité est purement indicative et arbitraire.",
+    "important_eco": "Économie importante",
+    "weak_eco": "Économie faible"
   }
 }