Merge branch 'dev' of...

Merge branch 'dev' of https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo into features/refac_buttons

src/assets/icons/visu/thunderEmpty.svg

+<svg width="12" height="19" viewBox="0 0 12 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.07817 1.44859C6.34673 1.02657 7 1.21681 7 1.71703V10.5C7 10.7761 6.77614 11 6.5 11H0.910837C0.516291 11 0.277184 10.5644 0.489006 10.2316L6.07817 1.44859Z" fill="#121212"/>
+<path d="M5.93189 17.4025C5.67473 17.8433 5 17.6609 5 17.1505V7.5C5 7.22386 5.22386 7 5.5 7H11.1295C11.5154 7 11.7558 7.41861 11.5614 7.75194L5.93189 17.4025Z" fill="#121212"/>
+</svg>

src/assets/icons/visu/thunderFilled.svg

+<svg width="12" height="19" viewBox="0 0 12 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.07817 1.44859C6.34673 1.02657 7 1.21681 7 1.71703V10.5C7 10.7761 6.77614 11 6.5 11H0.910837C0.516291 11 0.277184 10.5644 0.489006 10.2316L6.07817 1.44859Z" fill="#E3B82A"/>
+<path d="M5.93189 17.4025C5.67473 17.8433 5 17.6609 5 17.1505V7.5C5 7.22386 5.22386 7 5.5 7H11.1295C11.5154 7 11.7558 7.41861 11.5614 7.75194L5.93189 17.4025Z" fill="#E3B82A"/>
+</svg>

src/components/Ecogesture/EcogestureCard.spec.tsx

+import React from 'react'
+import { shallow } from 'enzyme'
+import EcogestureCard from 'components/Ecogesture/EcogestureCard'
+import { ecogesturesData } from '../../../test/__mocks__/ecogesturesData.mock'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+  return {
+    useI18n: jest.fn(() => {
+      return {
+        t: (str: string) => str,
+      }
+    }),
+  }
+})
+
+describe('EcogestureCard component', () => {
+  it('should be rendered correctly', () => {
+    const component = shallow(
+      <EcogestureCard ecogesture={ecogesturesData[0]} />
+    ).getElement
+    expect(component).toMatchSnapshot()
+  })
+})

src/components/Ecogesture/EcogestureList.spec.tsx

+import React from 'react'
+import { shallow } from 'enzyme'
+import EcogestureList from 'components/Ecogesture/EcogestureList'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+  return {
+    useI18n: jest.fn(() => {
+      return {
+        t: (str: string) => str,
+      }
+    }),
+  }
+})
+
+describe('EcogesturesList component', () => {
+  it('should be rendered correctly', () => {
+    const component = shallow(<EcogestureList />).getElement
+    expect(component).toMatchSnapshot()
+  })
+})

src/components/Ecogesture/EcogestureList.tsx

@@ -322,6 +322,7 @@ const EcogesturesList: React.FC = () => {
       {openEcogestureModal && selectedEcogesture && (
         <EcogestureModal
           ecogesture={selectedEcogesture}
+          isAction={false}
           handleCloseClick={handleCloseClick}
         />
       )}

src/components/Ecogesture/EcogestureModal.spec.tsx

+import React from 'react'
+import { mount } from 'enzyme'
+import EcogestureModal from 'components/Ecogesture/EcogestureModal'
+import { ecogesturesData } from '../../../test/__mocks__/ecogesturesData.mock'
+import configureStore from 'redux-mock-store'
+import { globalStateData } from '../../../test/__mocks__/globalStateData.mock'
+import { challengeStateData } from '../../../test/__mocks__/challengeStateData.mock'
+import { Provider } from 'react-redux'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+  return {
+    useI18n: jest.fn(() => {
+      return {
+        t: (str: string) => str,
+      }
+    }),
+  }
+})
+
+const mockStore = configureStore([])
+
+describe('EcogestureModal component', () => {
+  it('should be rendered correctly', () => {
+    const store = mockStore({
+      ecolyo: {
+        global: globalStateData,
+        challenge: challengeStateData,
+      },
+    })
+    const wrapper = mount(
+      <Provider store={store}>
+        <EcogestureModal
+          ecogesture={ecogesturesData[0]}
+          isAction={false}
+          handleCloseClick={jest.fn()}
+        />
+      </Provider>
+    )
+    expect(wrapper.find('.em-title').text()).toEqual(
+      ecogesturesData[0].shortName
+    )
+  })
+})

src/components/Ecogesture/EcogestureModal.tsx

@@ -13,24 +13,35 @@ import useExploration from 'components/Hooks/useExploration'
 import { UserExplorationID } from 'enum/userExploration.enum'
 import { AppStore } from 'store'
 import { useSelector } from 'react-redux'
+import StyledStopButton from 'components/CommonKit/Button/StyledStopButton'
+import EfficientyRating from './EfficientyRating'
+import classNames from 'classnames'
 
 interface EcogestureModalProps {
   ecogesture: Ecogesture
+  isAction: boolean
   handleCloseClick: () => void
 }
 
 const EcogestureModal: React.FC<EcogestureModalProps> = ({
   ecogesture,
+  isAction,
   handleCloseClick,
 }: EcogestureModalProps) => {
   const { t } = useI18n()
   const [ecogestureIcon, setEcogestureIcon] = useState(defaultIcon)
+  const [isMoreDetail, setIsMoreDetail] = useState(false)
   const { currentChallenge } = useSelector(
     (state: AppStore) => state.ecolyo.challenge
   )
 
   const [, setValidExploration] = useExploration()
-
+  const selectAction = () => {
+    console.log('selectAction')
+  }
+  const toggleMoreDetail = () => {
+    setIsMoreDetail(prev => !prev)
+  }
   useEffect(() => {
     if (ecogesture) {
       importIconbyId(ecogesture.id, 'ecogesture').then(icon => {
@@ -48,7 +59,7 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
   return (
     <Modal border={true} handleCloseClick={handleCloseClick}>
       <div className="em-header text-14-normal-uppercase">
-        {t('ECOGESTURE.TITLE_ECOGESTURE')}
+        {isAction ? t('action.title_action') : t('ECOGESTURE.TITLE_ECOGESTURE')}
       </div>
       <div className="em-root">
         <div className="em-content">
@@ -60,8 +71,10 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
           <div className="em-title text-24-bold ">{ecogesture.shortName}</div>
           <div className="em-detail">
             <div className="em-detail-nwh">
-              <span className="text-16-bold">{ecogesture.nwh} </span>
-              <span className="em-detail-nwh-unit text-16-normal">nWh</span>
+              <span className="em-efficiency">
+                {t('ECOGESTURE.EFFICIENCY')}
+              </span>
+              <EfficientyRating result={Math.round(ecogesture.nwh / 2)} />
             </div>
             <div className="em-picto-flow">
               {ecogesture.fluidTypes.map((fluid, index) => (
@@ -76,9 +89,34 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
             </div>
           </div>
           <div className="long-name">{ecogesture.longName}</div>
-          <div className="em-description text-16-normal-150">
-            {ecogesture.longDescription}
-          </div>
+          {isAction ? (
+            <StyledStopButton
+              color="secondary"
+              onClick={selectAction}
+              className="btn-modal-ecogesture"
+            >
+              {t('action.select_action')}
+            </StyledStopButton>
+          ) : (
+            <>
+              <div
+                className={classNames('em-description text-16-normal-150', {
+                  ['block']: isMoreDetail === true,
+                })}
+              >
+                {ecogesture.longDescription}
+              </div>
+              <StyledStopButton
+                color="secondary"
+                onClick={toggleMoreDetail}
+                className="btn-modal-ecogesture"
+              >
+                {isMoreDetail
+                  ? t('ECOGESTURE.SHOW_LESS')
+                  : t('ECOGESTURE.SHOW_MORE')}
+              </StyledStopButton>
+            </>
+          )}
         </div>
       </div>
     </Modal>

src/components/Ecogesture/EcogestureView.spec.tsx

+import React from 'react'
+import { shallow } from 'enzyme'
+import EcogestureView from 'components/Ecogesture/EcogestureView'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+  return {
+    useI18n: jest.fn(() => {
+      return {
+        t: (str: string) => str,
+      }
+    }),
+  }
+})
+
+describe('EcogestureView component', () => {
+  it('should be rendered correctly', () => {
+    const component = shallow(<EcogestureView />).getElement
+    expect(component).toMatchSnapshot()
+  })
+})

src/components/Ecogesture/EfficientyRating.spec.tsx

+import React from 'react'
+import { shallow } from 'enzyme'
+import EfficientyRating from 'components/Ecogesture/EfficientyRating'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+  return {
+    useI18n: jest.fn(() => {
+      return {
+        t: (str: string) => str,
+      }
+    }),
+  }
+})
+
+describe('EfficientyRating component', () => {
+  it('should be rendered correctly', () => {
+    const component = shallow(<EfficientyRating result={3} />).getElement
+    expect(component).toMatchSnapshot()
+  })
+})

src/components/Ecogesture/EfficientyRating.tsx

+import React, { useEffect, useState } from 'react'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import thunderFilled from 'assets/icons/visu/thunderFilled.svg'
+import thunderEmpty from 'assets/icons/visu/thunderEmpty.svg'
+
+interface EfficientyRatingProps {
+  result: number
+}
+
+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])
+
+  return (
+    <div className="thunder">
+      {elements.map((star, i) => {
+        return <StyledIcon key={i} className="star" icon={star} size={15} />
+      })}
+    </div>
+  )
+}
+
+export default EfficientyRating

src/components/Ecogesture/__snapshots__/EcogestureCard.spec.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EcogestureCard component should be rendered correctly 1`] = `[Function]`;

src/components/Ecogesture/__snapshots__/EcogestureList.spec.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EcogesturesList component should be rendered correctly 1`] = `[Function]`;

src/components/Ecogesture/__snapshots__/EcogestureView.spec.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EcogestureView component should be rendered correctly 1`] = `[Function]`;

src/components/Ecogesture/__snapshots__/EfficientyRating.spec.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EfficientyRating component should be rendered correctly 1`] = `[Function]`;

src/components/Ecogesture/ecogestureModal.scss

@@ -29,6 +29,7 @@
   }
   .em-content {
     padding: 1.5rem 2.5rem 0;
+    width: 100%;
 
     @media #{$large-phone} {
       width: 100%;
@@ -65,18 +66,28 @@
         }
       }
     }
+    .em-efficiency {
+      margin: 0 0.5rem 0 0.25rem;
+    }
     .em-title {
       margin-bottom: 0;
       text-align: center;
     }
-
     .long-name {
       font-weight: bold;
       line-height: 150%;
-      margin: 0.5rem 0 1rem;
+      background: radial-gradient(60.65% 30.62% at 50% 3.13%, #2A2B30 0%, #1B1C22 100%);
+      border-radius: 6px;
+      border: 2px solid $blue-40;
+      padding: 2.5rem 0.5rem 1rem 0.5rem;
+      border-radius: 90% 90% 10px 10px / 60% 60% 6px 6px;
+      text-align: center;
+      margin: 1.5rem 0 1rem
     }
     .em-description {
-      padding-bottom: 2rem;
+      display: none;
+      margin: 0.5rem;
+      text-align: left;
     }
   }
 }
@@ -99,4 +110,11 @@
   .em-title {
     margin-bottom: 0;
   }
+
+}
+.block {
+  display: block!important;
 }
+.btn-modal-ecogesture {
+  margin: 1rem 0 1.5rem!important;
+}
\ No newline at end of file

src/constants/connectionWaitingText.json

 [
+  {
+    "first": "Attente..",
+    "second": "Cette opération peut être un peu longue la première fois, cela sera plus rapide ensuite"
+  },
   {
     "first": "Le saviez-vous ?",
     "second": "Pour acheminer l’eau sur Lyon (Lugdunum !) l’acqueduc de Gier faisait 86 km à l’époque Romaine !"

src/db/explorationEntity.json

@@ -63,7 +63,7 @@
     "date": null,
     "ecogesture_id": "",
     "fluid_condition": [0],
-    "message_success": "Vous avez consulté les données électricité à la demi-heure"
+    "message_success": "Vous avez consulté ou déverouillé les données électricité à la demi-heure"
   },
   {
     "_id": "EXPLORATION006_0",

src/locales/fr.json

@@ -202,7 +202,10 @@
     "FILTER_TITLE": "Tous les ecogestes",
     "TITLE_ECOGESTURE": "Ecogeste",
     "NO_ECOGESTURE": "Pas d'ecogeste",
-    "QUESTION_NEGAWATT": "nWh ?"
+    "QUESTION_NEGAWATT": "nWh ?",
+    "EFFICIENCY": "Efficacité",
+    "SHOW_LESS": "Je veux moins d’infos",
+    "SHOW_MORE": "Je veux plus d’infos"
   },
   "NEGAWATT": {
     "TITLE_NEGAWATT": "NégaWatt",
@@ -398,5 +401,9 @@
     "interval": {
       "explanation": "Vous pouvez vérifier cette informations sur l'écran Conso."
     }
+  },
+  "action": {
+    "title_action": "Action",
+    "select_action" : "Je choisis cette action"
   }
 }