diff --git a/src/assets/icons/visu/thunderEmpty.svg b/src/assets/icons/visu/thunderEmpty.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b6b398e1ec6670eeca70c2ccd7a50751bcd9d9a2
--- /dev/null
+++ b/src/assets/icons/visu/thunderEmpty.svg
@@ -0,0 +1,4 @@
+<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>
diff --git a/src/assets/icons/visu/thunderFilled.svg b/src/assets/icons/visu/thunderFilled.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a1685f68460bfc0c87f9ba9f212759a58c402f2f
--- /dev/null
+++ b/src/assets/icons/visu/thunderFilled.svg
@@ -0,0 +1,4 @@
+<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>
diff --git a/src/components/Ecogesture/EcogestureCard.spec.tsx b/src/components/Ecogesture/EcogestureCard.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..51726ea344138dbbb1b1297a981747898684d58b
--- /dev/null
+++ b/src/components/Ecogesture/EcogestureCard.spec.tsx
@@ -0,0 +1,23 @@
+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()
+ })
+})
diff --git a/src/components/Ecogesture/EcogestureList.spec.tsx b/src/components/Ecogesture/EcogestureList.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..17008dbf5d51c47e47fc6e2b333d8e5901ade063
--- /dev/null
+++ b/src/components/Ecogesture/EcogestureList.spec.tsx
@@ -0,0 +1,20 @@
+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()
+ })
+})
diff --git a/src/components/Ecogesture/EcogestureList.tsx b/src/components/Ecogesture/EcogestureList.tsx
index f1b223d6ad9f2c6c3b3f82f8bbbc082857447ef9..a2352369d86afac65f7d2c887565cd6b24d52fd1 100644
--- a/src/components/Ecogesture/EcogestureList.tsx
+++ b/src/components/Ecogesture/EcogestureList.tsx
@@ -322,6 +322,7 @@ const EcogesturesList: React.FC = () => {
{openEcogestureModal && selectedEcogesture && (
<EcogestureModal
ecogesture={selectedEcogesture}
+ isAction={false}
handleCloseClick={handleCloseClick}
/>
)}
diff --git a/src/components/Ecogesture/EcogestureModal.spec.tsx b/src/components/Ecogesture/EcogestureModal.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9566235baaae8bb1843ff196986c97a37a2e6311
--- /dev/null
+++ b/src/components/Ecogesture/EcogestureModal.spec.tsx
@@ -0,0 +1,43 @@
+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
+ )
+ })
+})
diff --git a/src/components/Ecogesture/EcogestureModal.tsx b/src/components/Ecogesture/EcogestureModal.tsx
index 5ec2612895adfa0c465c5c4af3485b33a832d96d..d9bb59db60b91c167868eb7730ee8f8db6fed3b0 100644
--- a/src/components/Ecogesture/EcogestureModal.tsx
+++ b/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>
diff --git a/src/components/Ecogesture/EcogestureView.spec.tsx b/src/components/Ecogesture/EcogestureView.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4034d18d771f55a0b6494a8dbfb33164d44f335b
--- /dev/null
+++ b/src/components/Ecogesture/EcogestureView.spec.tsx
@@ -0,0 +1,20 @@
+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()
+ })
+})
diff --git a/src/components/Ecogesture/EfficientyRating.spec.tsx b/src/components/Ecogesture/EfficientyRating.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e167effc6d036e47862ad27703d9492928490aee
--- /dev/null
+++ b/src/components/Ecogesture/EfficientyRating.spec.tsx
@@ -0,0 +1,20 @@
+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()
+ })
+})
diff --git a/src/components/Ecogesture/EfficientyRating.tsx b/src/components/Ecogesture/EfficientyRating.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..83999e38f618132e4591c4c688dc12c9c9c047af
--- /dev/null
+++ b/src/components/Ecogesture/EfficientyRating.tsx
@@ -0,0 +1,38 @@
+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
diff --git a/src/components/Ecogesture/__snapshots__/EcogestureCard.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureCard.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..f8e50719fc6b0aae73189e91184e0b20f98f1a2a
--- /dev/null
+++ b/src/components/Ecogesture/__snapshots__/EcogestureCard.spec.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EcogestureCard component should be rendered correctly 1`] = `[Function]`;
diff --git a/src/components/Ecogesture/__snapshots__/EcogestureList.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureList.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..4c3198174675b06385c194ab5626a78dab91b7ca
--- /dev/null
+++ b/src/components/Ecogesture/__snapshots__/EcogestureList.spec.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EcogesturesList component should be rendered correctly 1`] = `[Function]`;
diff --git a/src/components/Ecogesture/__snapshots__/EcogestureView.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureView.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..fc6e32501bbe907a96d59c9b9335a6710c6adfc3
--- /dev/null
+++ b/src/components/Ecogesture/__snapshots__/EcogestureView.spec.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EcogestureView component should be rendered correctly 1`] = `[Function]`;
diff --git a/src/components/Ecogesture/__snapshots__/EfficientyRating.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EfficientyRating.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..514760e51c31ec3de4e71e066683136b173bdb5d
--- /dev/null
+++ b/src/components/Ecogesture/__snapshots__/EfficientyRating.spec.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EfficientyRating component should be rendered correctly 1`] = `[Function]`;
diff --git a/src/components/Ecogesture/ecogestureModal.scss b/src/components/Ecogesture/ecogestureModal.scss
index 0956bc70a4333dcdb938b0e682c687ae37d6c17a..77d8ea0b087b465f63e7d4c78071df93c88d94cb 100644
--- a/src/components/Ecogesture/ecogestureModal.scss
+++ b/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
diff --git a/src/constants/connectionWaitingText.json b/src/constants/connectionWaitingText.json
index a961f11462badf607a7a1fd83f02d15260b64d66..ab0c5e9cbb51436bca49d794d9e1972095882793 100644
--- a/src/constants/connectionWaitingText.json
+++ b/src/constants/connectionWaitingText.json
@@ -1,4 +1,8 @@
[
+ {
+ "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 !"
diff --git a/src/db/explorationEntity.json b/src/db/explorationEntity.json
index e4e0cbf2ae12441c36d3b0441ba90ad19653a460..3731d6206f2c8eab773aa091353638a0ffa12d00 100644
--- a/src/db/explorationEntity.json
+++ b/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",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index ff8692a106d46e5ff099f5cc10d1d40989553425..a6950b410203e2fd17834df5469556c11eb3f615 100644
--- a/src/locales/fr.json
+++ b/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"
}
}