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" } }