diff --git a/src/components/Ecogesture/EcogestureError.spec.tsx b/src/components/Ecogesture/EcogestureError.spec.tsx index 99cbf65bdd0565f9ae86004c625775269216a37c..810c48e44d2a1d9730401002edb515f2a455fa86 100644 --- a/src/components/Ecogesture/EcogestureError.spec.tsx +++ b/src/components/Ecogesture/EcogestureError.spec.tsx @@ -4,7 +4,7 @@ import configureStore from 'redux-mock-store' import { profileData } from '../../../tests/__mocks__/profile.mock' import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock' import { Provider } from 'react-redux' -import MuiButton from '@material-ui/core/Button' +import Button from '@material-ui/core/Button' import EcogestureError from './EcogestureError' jest.mock('cozy-ui/transpiled/react/I18n', () => { @@ -38,7 +38,7 @@ describe('EcogestureError component', () => { <EcogestureError /> </Provider> ) - expect(wrapper.find(MuiButton).exists()).toBeTruthy() + expect(wrapper.find(Button).exists()).toBeTruthy() }) it('should redirect to profile type form', () => { const store = mockStore({ diff --git a/src/components/Ecogesture/EcogestureError.tsx b/src/components/Ecogesture/EcogestureError.tsx index 2437b70133c1eaf37017003ff01c17b3aad445da..8dc6110cc007442dbe4f91e3884d29f70487fcc1 100644 --- a/src/components/Ecogesture/EcogestureError.tsx +++ b/src/components/Ecogesture/EcogestureError.tsx @@ -1,33 +1,34 @@ -import React from 'react' -import { useI18n } from 'cozy-ui/transpiled/react/I18n' -import { useHistory } from 'react-router-dom' -import MuiButton from '@material-ui/core/Button' -import './ecogestureError.scss' - -const EcogestureError: React.FC = () => { - const { t } = useI18n() - const history = useHistory() - const goToForm = () => { - history.push('/profileType') - } - return ( - <div className="ec-error-container"> - <div className="ec-error-content"> - <div className="ec-error-title text-16-normal"> - {t('ECOGESTURE.ADJUST_PROFIL.DESCRIPTION')} - </div> - <MuiButton - onClick={goToForm} - classes={{ - root: 'btn-highlight', - label: 'text-16-bold', - }} - > - {t('ECOGESTURE.ADJUST_PROFIL.BTN_TEXT')} - </MuiButton> - </div> - </div> - ) -} - -export default EcogestureError +import React from 'react' +import { useI18n } from 'cozy-ui/transpiled/react/I18n' +import { useHistory } from 'react-router-dom' +import Button from '@material-ui/core/Button' +import './ecogestureError.scss' + +const EcogestureError: React.FC = () => { + const { t } = useI18n() + const history = useHistory() + const goToForm = () => { + history.push('/profileType') + } + return ( + <div className="ec-error-container"> + <div className="ec-error-content"> + <div className="ec-error-title text-16-normal"> + {t('ecogesture.adjust_profil.description')} + </div> + <Button + aria-label={t('ecogesture.accessibility.button_go_to_profil')} + onClick={goToForm} + classes={{ + root: 'btn-highlight', + label: 'text-16-bold', + }} + > + {t('ecogesture.adjust_profil.button_go_to_profil')} + </Button> + </div> + </div> + ) +} + +export default EcogestureError diff --git a/src/components/Ecogesture/EcogestureList.tsx b/src/components/Ecogesture/EcogestureList.tsx index 641297978cd1f4d8beb8a3828f4b9bfa223f8d01..dd6c18f36ff7f7f4ad2406ae69ba64156c4a5119 100644 --- a/src/components/Ecogesture/EcogestureList.tsx +++ b/src/components/Ecogesture/EcogestureList.tsx @@ -13,7 +13,7 @@ import StyledChallengeSpinner from 'components/CommonKit/Spinner/StyledEcogestur import EcogestureCard from 'components/Ecogesture/EcogestureCard' import EcogestureModal from 'components/Ecogesture/EcogestureModal' import StyledIcon from 'components/CommonKit/Icon/StyledIcon' -import MuiButton from '@material-ui/core/Button' +import Button from '@material-ui/core/Button' import './ecogestureList.scss' import { ProfileType } from 'models/profileType.model' import { Usage } from 'enum/ecogesture.enum' @@ -82,10 +82,10 @@ const EcogestureList: React.FC<EcogestureListProps> = ({ return ( <div className="ec-filter-error"> <div className="text-16-normal"> - {t('ECOGESTURE.NO_ECOGESTURE_FILTER.TEXT_1')} + {t('ecogesture.no_ecogesture_filter.text1')} </div> <div className="text-16-italic"> - {t('ECOGESTURE.NO_ECOGESTURE_FILTER.TEXT_2')} + {t('ecogesture.no_ecogesture_filter.text2')} </div> </div> ) @@ -128,7 +128,7 @@ const EcogestureList: React.FC<EcogestureListProps> = ({ if (e.relatedTarget === null) toggleDropDown() }} > - <MuiButton + <Button classes={{ root: 'btn-secondary-negative', label: 'text-14-normal', @@ -144,9 +144,9 @@ const EcogestureList: React.FC<EcogestureListProps> = ({ openDropDown ? 'ecogestures opened' : 'ecogestures' } > - {t(`ECOGESTURE.${activeFilter}`)} + {t(`ecogesture.${activeFilter}`)} </span> - </MuiButton> + </Button> <Menu anchorEl={anchorEl} keepMounted @@ -171,7 +171,7 @@ const EcogestureList: React.FC<EcogestureListProps> = ({ selected={usage === activeFilter} onClick={() => closeMenu(usage)} > - {t(`ECOGESTURE.${usage}`)} + {t(`ecogesture.${usage}`)} {usage === activeFilter && ( <ListItemIcon classes={{ root: 'filter-menu-icon' }}> <StyledIcon icon={CheckIcon} size={13} /> @@ -185,7 +185,7 @@ const EcogestureList: React.FC<EcogestureListProps> = ({ </div> </div> {filteredByProfile && ( - <MuiButton + <Button classes={{ root: 'btn-secondary-negative btn-info', label: 'text-14-normal', @@ -196,7 +196,7 @@ const EcogestureList: React.FC<EcogestureListProps> = ({ variant="contained" > <StyledIcon icon={QuestionIcon} size={40} /> - </MuiButton> + </Button> )} </div> <div className="ecogesture-content"> @@ -218,7 +218,7 @@ const EcogestureList: React.FC<EcogestureListProps> = ({ ) : ( <div className="ec-filter-error"> <div className="text-16-normal"> - {t('ECOGESTURE.NO_ECOGESTURE')} + {t('ecogesture.no_ecogesture')} </div> </div> )} diff --git a/src/components/Ecogesture/EcogestureModal.tsx b/src/components/Ecogesture/EcogestureModal.tsx index b157ad8200be49fa4fe8f36f5cc4364070619e8c..9d52eade53ee17cd1de2e4ff5029d8ca91a6f90c 100644 --- a/src/components/Ecogesture/EcogestureModal.tsx +++ b/src/components/Ecogesture/EcogestureModal.tsx @@ -13,7 +13,7 @@ import { Ecogesture } from 'models' import Icon from 'cozy-ui/transpiled/react/Icon' import Dialog from '@material-ui/core/Dialog' import IconButton from '@material-ui/core/IconButton' -import MuiButton from '@material-ui/core/Button' +import Button from '@material-ui/core/Button' import StyledIcon from 'components/CommonKit/Icon/StyledIcon' import EfficientyRating from './EfficientyRating' import CloseIcon from 'assets/icons/ico/close.svg' @@ -115,7 +115,7 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({ </div> <div className="long-name">{ecogesture.longName}</div> {isAction ? ( - <MuiButton + <Button aria-label={t( 'ecogesture_modal.accessibility.button_select_action' )} @@ -126,7 +126,7 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({ onClick={selectEcogesture} > {t('ecogesture_modal.select_action')} - </MuiButton> + </Button> ) : ( <> <div @@ -136,7 +136,7 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({ > {ecogesture.longDescription} </div> - <MuiButton + <Button aria-label={t( 'ecogesture_modal.accessibility.button_see_more_detail' )} @@ -149,7 +149,7 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({ {isMoreDetail ? t('ecogesture_modal.show_less') : t('ecogesture_modal.show_more')} - </MuiButton> + </Button> </> )} </div> diff --git a/src/components/Ecogesture/EcogestureView.tsx b/src/components/Ecogesture/EcogestureView.tsx index b57f8e4f22e4d3e8fe97ed8e6c2dc4dfc1246421..240d812c7a494104c989688cb7ea1324299a9a80 100644 --- a/src/components/Ecogesture/EcogestureView.tsx +++ b/src/components/Ecogesture/EcogestureView.tsx @@ -1,106 +1,106 @@ -import React, { useState } from 'react' -import EcogestureList from 'components/Ecogesture/EcogestureList' -import CozyBar from 'components/Header/CozyBar' -import Header from 'components/Header/Header' -import Content from 'components/Content/Content' -import { Tabs, Tab } from '@material-ui/core' -import './ecogestureView.scss' -import classNames from 'classnames' -import { useI18n } from 'cozy-ui/transpiled/react/I18n' -import EcogestureError from './EcogestureError' -import { useSelector } from 'react-redux' -import { AppStore } from 'store' - -interface TabPanelProps { - children?: React.ReactNode - index: number - value: number -} -const TabPanel: React.FC<TabPanelProps> = ({ - children, - index, - value, -}: TabPanelProps) => { - return ( - <div - role="tabpanel" - hidden={value !== index} - id={`simple-tabpanel-${index}`} - aria-labelledby={`simple-tab-${index}`} - > - {children} - </div> - ) -} - -const EcogestureView: React.FC = () => { - const [headerHeight, setHeaderHeight] = useState<number>(0) - const defineHeaderHeight = (height: number) => { - setHeaderHeight(height) - } - const { t } = useI18n() - const profile = useSelector((state: AppStore) => state.ecolyo.profile) - const [value, setValue] = useState<number>(0) - - const handleChange = () => { - value === 0 ? setValue(1) : setValue(0) - } - - const tabProps = (index: number) => { - return { - id: `simple-tab-${index}`, - 'aria-controls': `simple-tabpanel-${index}`, - } - } - - return ( - <> - <CozyBar titleKey={'COMMON.APP_ECO_GESTURE_TITLE'} /> - <Header - setHeaderHeight={defineHeaderHeight} - desktopTitleKey={'COMMON.APP_ECO_GESTURE_TITLE'} - > - <Tabs - value={value} - className="ecogestures-tabs" - aria-label="ecogestures-tabs" - onChange={handleChange} - TabIndicatorProps={{ className: 'indicator-tab' }} - centered={true} - > - <Tab - label={t('ECOGESTURE.FILTER_TITLE')} - className={classNames('single-tab', { - ['active']: value === 0, - })} - {...tabProps(0)} - ></Tab> - <Tab - label={t('ECOGESTURE.SECOND_TAB')} - className={classNames('single-tab', { - ['active']: value === 1, - })} - {...tabProps(1)} - ></Tab> - </Tabs> - </Header> - <Content height={headerHeight}> - <TabPanel value={value} index={0}> - <EcogestureList filteredByProfile={false} /> - </TabPanel> - <TabPanel value={value} index={1}> - {profile.isProfileTypeCompleted ? ( - <EcogestureList - filteredByProfile={true} - profileType={profile.profileType} - /> - ) : ( - <EcogestureError /> - )} - </TabPanel> - </Content> - </> - ) -} - -export default EcogestureView +import React, { useState } from 'react' +import EcogestureList from 'components/Ecogesture/EcogestureList' +import CozyBar from 'components/Header/CozyBar' +import Header from 'components/Header/Header' +import Content from 'components/Content/Content' +import { Tabs, Tab } from '@material-ui/core' +import './ecogestureView.scss' +import classNames from 'classnames' +import { useI18n } from 'cozy-ui/transpiled/react/I18n' +import EcogestureError from './EcogestureError' +import { useSelector } from 'react-redux' +import { AppStore } from 'store' + +interface TabPanelProps { + children?: React.ReactNode + index: number + value: number +} +const TabPanel: React.FC<TabPanelProps> = ({ + children, + index, + value, +}: TabPanelProps) => { + return ( + <div + role="tabpanel" + hidden={value !== index} + id={`simple-tabpanel-${index}`} + aria-labelledby={`simple-tab-${index}`} + > + {children} + </div> + ) +} + +const EcogestureView: React.FC = () => { + const [headerHeight, setHeaderHeight] = useState<number>(0) + const defineHeaderHeight = (height: number) => { + setHeaderHeight(height) + } + const { t } = useI18n() + const profile = useSelector((state: AppStore) => state.ecolyo.profile) + const [value, setValue] = useState<number>(0) + + const handleChange = () => { + value === 0 ? setValue(1) : setValue(0) + } + + const tabProps = (index: number) => { + return { + id: `simple-tab-${index}`, + 'aria-controls': `simple-tabpanel-${index}`, + } + } + + return ( + <> + <CozyBar titleKey={'COMMON.APP_ECO_GESTURE_TITLE'} /> + <Header + setHeaderHeight={defineHeaderHeight} + desktopTitleKey={'COMMON.APP_ECO_GESTURE_TITLE'} + > + <Tabs + value={value} + className="ecogestures-tabs" + aria-label="ecogestures-tabs" + onChange={handleChange} + TabIndicatorProps={{ className: 'indicator-tab' }} + centered={true} + > + <Tab + label={t('ecogesture.title_tab_1')} + className={classNames('single-tab', { + ['active']: value === 0, + })} + {...tabProps(0)} + ></Tab> + <Tab + label={t('ecogesture.title_tab_2')} + className={classNames('single-tab', { + ['active']: value === 1, + })} + {...tabProps(1)} + ></Tab> + </Tabs> + </Header> + <Content height={headerHeight}> + <TabPanel value={value} index={0}> + <EcogestureList filteredByProfile={false} /> + </TabPanel> + <TabPanel value={value} index={1}> + {profile.isProfileTypeCompleted ? ( + <EcogestureList + filteredByProfile={true} + profileType={profile.profileType} + /> + ) : ( + <EcogestureError /> + )} + </TabPanel> + </Content> + </> + ) +} + +export default EcogestureView diff --git a/src/locales/fr.json b/src/locales/fr.json index a4cd6cbda701c2ef73d9e094a9f11add4248921a..1c93c8dd13eccf81eb5ca62cbec80029ab42dd3c 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -199,50 +199,6 @@ "TITLE_LEGAL": "Mentions légales", "READ_LEGAL": "Lire les mentions légales" }, - "ECOGESTURE": { - "FILTER_TITLE": "Tous les ecogestes", - "SECOND_TAB": "Ecogestes adaptés à votre profil", - "ALL": "Tous les usages", - "HEATING": "Chauffage", - "AIR_CONDITIONING": "Climatisation", - "ECS": "Eau chaude", - "COLD_WATER": "Eau froide", - "ELECTRICITY_SPECIFIC": "Electricité courante", - "COOKING": "Cuisson", - "NO_ECOGESTURE": "Aucun écogeste ne correspond à votre filtre", - "ADJUST_PROFIL": { - "DESCRIPTION": "Pour une sélection d’écogestes appropriés à votre consommation, vous pouvez ajuster votre profil.", - "BTN_TEXT": "Ajuster mon profil" - }, - "NO_ECOGESTURE_FILTER": { - "TEXT_1": "Nous n'avons pas trouvé d'écogestes adaptés à votre profil dans cette catégorie.", - "TEXT_2": "En effet, de part votre profil et vos modes de chauffage, d'eau ou d'eau chaude sanitaire, nous n'avons pas identifié d'éco-gestes vous permettant de diminuer vos factures à titre individuel. Toutefois, vous pouvez toujours agir pour préserver les ressources en appliquant et diffusant autour de vous les autres bonnes pratiques présentées dans la partie \"Tous les écogestes\". La planète vous en remercie" - } - }, - "ecogesture_modal": { - "title_ecogesture": "Ecogeste", - "title_action": "Action", - "efficiency": "Efficacité", - "show_less": "Je veux moins d’infos", - "show_more": "Je veux plus d’infos", - "select_action": "Je choisis cette action", - "accessibility": { - "window_title_ecogesture": "Fenètre ecogeste", - "window_title_action": "Fenètre action", - "button_close": "Fermer la fenètre", - "button_select_action": "Selectionner cette action", - "button_see_more_detail": "Afficher plus de détail" - } - }, - "ecogesture_info_modal": { - "header": "Comment sont choisis les écogestes adaptés à votre profil ?", - "text": "Les écogestes adaptés à votre profil sont aujourd'hui choisis en fonction des compteurs individuels que vous possédez (communicants ou non). Ceux présentés ici vous permettent d'agir sur vos consommations individuelles. Des modes de tri plus personnalisables seront proposés à l'avenir.", - "button_close": "J'ai compris", - "accessibility": { - "window_title": "Fenètre d'information", - "button_close": "Fermer la fenètre" - } - }, "auth": { "enedisgrandlyon": { "connect": { @@ -475,6 +431,53 @@ "button_validate": "Retouner au menu des duels" } }, + "ecogesture": { + "title_tab_1": "Tous les ecogestes", + "title_tab_2": "Ecogestes adaptés à votre profil", + "ALL": "Tous les usages", + "HEATING": "Chauffage", + "AIR_CONDITIONING": "Climatisation", + "ECS": "Eau chaude", + "COLD_WATER": "Eau froide", + "ELECTRICITY_SPECIFIC": "Electricité courante", + "COOKING": "Cuisson", + "no_ecogesture": "Aucun écogeste ne correspond à votre filtre", + "no_ecogesture_filter": { + "text1": "Nous n'avons pas trouvé d'écogestes adaptés à votre profil dans cette catégorie.", + "text2": "En effet, de part votre profil et vos modes de chauffage, d'eau ou d'eau chaude sanitaire, nous n'avons pas identifié d'éco-gestes vous permettant de diminuer vos factures à titre individuel. Toutefois, vous pouvez toujours agir pour préserver les ressources en appliquant et diffusant autour de vous les autres bonnes pratiques présentées dans la partie \"Tous les écogestes\". La planète vous en remercie" + }, + "adjust_profil": { + "description": "Pour une sélection d’écogestes appropriés à votre consommation, vous pouvez ajuster votre profil.", + "button_go_to_profil": "Ajuster mon profil" + }, + "accessibility": { + "button_go_to_profil": "Aller à la page de profil" + } + }, + "ecogesture_modal": { + "title_ecogesture": "Ecogeste", + "title_action": "Action", + "efficiency": "Efficacité", + "show_less": "Je veux moins d’infos", + "show_more": "Je veux plus d’infos", + "select_action": "Je choisis cette action", + "accessibility": { + "window_title_ecogesture": "Fenètre ecogeste", + "window_title_action": "Fenètre action", + "button_close": "Fermer la fenètre", + "button_select_action": "Selectionner cette action", + "button_see_more_detail": "Afficher plus de détail" + } + }, + "ecogesture_info_modal": { + "header": "Comment sont choisis les écogestes adaptés à votre profil ?", + "text": "Les écogestes adaptés à votre profil sont aujourd'hui choisis en fonction des compteurs individuels que vous possédez (communicants ou non). Ceux présentés ici vous permettent d'agir sur vos consommations individuelles. Des modes de tri plus personnalisables seront proposés à l'avenir.", + "button_close": "J'ai compris", + "accessibility": { + "window_title": "Fenètre d'information", + "button_close": "Fermer la fenètre" + } + }, "quiz": { "explanation": "Répondez correctement aux 5 questions et remportez 5 des 15 étoiles nécessaires pour débloquer le duel final", "score_final": "SCORE FINAL",