diff --git a/src/components/Analysis/AnalysisConsumptionRow.tsx b/src/components/Analysis/AnalysisConsumptionRow.tsx
index 64e667d5824689ad63ff765383ea7b1f5f505067..ee96f105dc44a1cb6510efdaf87bb46717b771f9 100644
--- a/src/components/Analysis/AnalysisConsumptionRow.tsx
+++ b/src/components/Analysis/AnalysisConsumptionRow.tsx
@@ -104,7 +104,9 @@ const AnalysisConsumptionRow: React.FC<AnalysisConsumptionRowProps> = ({
}
}
return (
- <div className={`consumption-${FluidType[fluid].toLowerCase()}`}>
+ <div
+ className={`consumption-${FluidType[fluid].toLowerCase()} analysisRow`}
+ >
<div className="user-graph">
<div
className={classNames('price', 'text-15-bold', {
diff --git a/src/components/Analysis/analysisConsumptionRow.scss b/src/components/Analysis/analysisConsumptionRow.scss
index 460c2c58fa955f442f0e35791607781fc3b74556..2079dd10bcb6a4e410822290a0603ced17ab7d36 100644
--- a/src/components/Analysis/analysisConsumptionRow.scss
+++ b/src/components/Analysis/analysisConsumptionRow.scss
@@ -90,15 +90,18 @@
}
}
}
-.icon-container {
- flex-basis: 10%;
- display: flex;
- justify-content: center;
- svg {
- align-self: center;
- width: 40px;
+.analysisRow {
+ .icon-container {
+ flex-basis: 10%;
+ display: flex;
+ justify-content: center;
+ svg {
+ align-self: center;
+ width: 40px;
+ }
}
}
+
.container-graph {
flex-basis: 50%;
display: flex;
diff --git a/src/components/Ecogesture/EcogestureCard.tsx b/src/components/Ecogesture/EcogestureCard.tsx
index 082e2727d97993fba473cfe580ef7fb9f51a1b21..a462309dc1ac2cd66d7cf9a8605804537f756576 100644
--- a/src/components/Ecogesture/EcogestureCard.tsx
+++ b/src/components/Ecogesture/EcogestureCard.tsx
@@ -8,13 +8,16 @@ import EfficientyRating from './EfficientyRating'
import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
import { Link as RouterLink } from 'react-router-dom'
import { Link } from '@material-ui/core/'
+import { EcogestureStatus } from 'enum/ecogesture.enum'
interface EcogestureCardProps {
ecogesture: Ecogesture
+ currentTab: EcogestureStatus
}
const EcogestureCard: React.FC<EcogestureCardProps> = ({
ecogesture,
+ currentTab,
}: EcogestureCardProps) => {
const [ecogestureIcon, setEcogestureIcon] = useState<string>('')
useEffect(() => {
@@ -33,7 +36,7 @@ const EcogestureCard: React.FC<EcogestureCardProps> = ({
return (
<Link
- to={`/ecogestures/${ecogesture.id}`}
+ to={`/ecogesture/${ecogesture.id}/${currentTab}`}
component={RouterLink}
className="ecogesture-list-item"
>
diff --git a/src/components/Ecogesture/EcogestureEmptyList.tsx b/src/components/Ecogesture/EcogestureEmptyList.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a8468b47f72e09cd8b16ee07af55376cea16020f
--- /dev/null
+++ b/src/components/Ecogesture/EcogestureEmptyList.tsx
@@ -0,0 +1,67 @@
+import React from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Button from '@material-ui/core/Button'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import doingIcon from 'assets/icons/ico/doing-enabled.svg'
+import objectiveIcon from 'assets/icons/ico/objective-enabled.svg'
+
+import './ecogestureEmptyList.scss'
+
+interface EcogestureEmptyListProps {
+ setTab: React.Dispatch<React.SetStateAction<number>>
+ isObjective: boolean
+}
+const EcogestureEmptyList: React.FC<EcogestureEmptyListProps> = ({
+ setTab,
+ isObjective,
+}: EcogestureEmptyListProps) => {
+ const { t } = useI18n()
+
+ return (
+ <div className="ec-empty-container">
+ <div className="ec-empty-content">
+ <StyledIcon
+ className="icon-big"
+ icon={isObjective ? objectiveIcon : doingIcon}
+ size={150}
+ />
+ <div className="text-16-normal text">
+ {isObjective
+ ? t('ecogesture.emptyList.obj1')
+ : t('ecogesture.emptyList.doing1')}
+ </div>
+ <div className="text-16-normal text">
+ {isObjective
+ ? t('ecogesture.emptyList.obj2')
+ : t('ecogesture.emptyList.doing2')}
+ </div>
+ <div className="btn-container">
+ <Button
+ aria-label={t('ecogesture.emptyList.btn1')}
+ onClick={() => setTab(3)}
+ classes={{
+ root: 'btn-secondary-negative btn1',
+ label: 'text-16-bold',
+ }}
+ >
+ {t('ecogesture.emptyList.btn1')}
+ </Button>
+ <Button
+ aria-label={t('ecogesture.emptyList.btn2')}
+ onClick={() => {
+ console.log('tinder')
+ }}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-16-bold',
+ }}
+ >
+ {t('ecogesture.emptyList.btn2')}
+ </Button>
+ </div>
+ </div>
+ </div>
+ )
+}
+
+export default EcogestureEmptyList
diff --git a/src/components/Ecogesture/EcogestureError.spec.tsx b/src/components/Ecogesture/EcogestureError.spec.tsx
index 810c48e44d2a1d9730401002edb515f2a455fa86..906a5407fdf306b27410cdf77cfaffabe58252b6 100644
--- a/src/components/Ecogesture/EcogestureError.spec.tsx
+++ b/src/components/Ecogesture/EcogestureError.spec.tsx
@@ -5,7 +5,7 @@ import { profileData } from '../../../tests/__mocks__/profile.mock'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { Provider } from 'react-redux'
import Button from '@material-ui/core/Button'
-import EcogestureError from './EcogestureError'
+import EcogestureError from './EcogestureEmptyList'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
diff --git a/src/components/Ecogesture/EcogestureError.tsx b/src/components/Ecogesture/EcogestureError.tsx
deleted file mode 100644
index 8dc6110cc007442dbe4f91e3884d29f70487fcc1..0000000000000000000000000000000000000000
--- a/src/components/Ecogesture/EcogestureError.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-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/EcogestureInfoModal.spec.tsx b/src/components/Ecogesture/EcogestureInfoModal.spec.tsx
deleted file mode 100644
index aa58956ee7579e83a06c2193f67edfb489a7224c..0000000000000000000000000000000000000000
--- a/src/components/Ecogesture/EcogestureInfoModal.spec.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react'
-import { mount } from 'enzyme'
-import EcogestureInfoModal from './EcogestureInfoModal'
-import Button from '@material-ui/core/Button'
-import toJson from 'enzyme-to-json'
-
-jest.mock('cozy-ui/transpiled/react/I18n', () => {
- return {
- useI18n: jest.fn(() => {
- return {
- t: (str: string) => str,
- }
- }),
- }
-})
-
-const mockHandleCloseClick = jest.fn()
-
-describe('EcogestureInfoModal component', () => {
- it('should be rendered correctly', () => {
- const wrapper = mount(
- <EcogestureInfoModal
- open={true}
- handleCloseClick={mockHandleCloseClick}
- />
- )
- expect(toJson(wrapper)).toMatchSnapshot()
- expect(wrapper.find('.info-header').exists()).toBeTruthy()
- expect(wrapper.find('.info-title').exists()).toBeTruthy()
- expect(wrapper.find('.info-detail').exists()).toBeTruthy()
- expect(wrapper.find(Button).exists()).toBeTruthy()
- })
-
- it('should be call handleCloseClick when click on button', () => {
- const wrapper = mount(
- <EcogestureInfoModal
- open={true}
- handleCloseClick={mockHandleCloseClick}
- />
- )
- wrapper
- .find(Button)
- .first()
- .simulate('click')
- expect(mockHandleCloseClick).toHaveBeenCalled()
- })
-})
diff --git a/src/components/Ecogesture/EcogestureInfoModal.tsx b/src/components/Ecogesture/EcogestureInfoModal.tsx
deleted file mode 100644
index f346c70f6fe42f6f72181a7effa826f9b233e771..0000000000000000000000000000000000000000
--- a/src/components/Ecogesture/EcogestureInfoModal.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react'
-import './ecogestureInfoModal.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import Button from '@material-ui/core/Button'
-import Dialog from '@material-ui/core/Dialog'
-import HeaderQuestion from 'assets/icons/ico/header-question.svg'
-
-interface EcogestureInfoModalProps {
- open: boolean
- handleCloseClick: () => void
-}
-
-const EcogestureInfoModal: React.FC<EcogestureInfoModalProps> = ({
- open,
- handleCloseClick,
-}: EcogestureInfoModalProps) => {
- const { t } = useI18n()
- return (
- <Dialog
- open={open}
- onClose={handleCloseClick}
- aria-labelledby={'accessibility-title'}
- classes={{
- root: 'modal-root',
- paper: 'modal-paper',
- }}
- >
- <div id={'accessibility-title'}>
- {t('ecogesture_info_modal.accessibility.window_title')}
- </div>
- <div className="info-header">
- <Icon icon={HeaderQuestion} size={80} />
- </div>
- <div className="info-content">
- <div className="info-title text-20-bold">
- {t('ecogesture_info_modal.header')}
- </div>
- <div className="info-detail text-16-normal">
- {t('ecogesture_info_modal.text')}
- </div>
- <Button
- aria-label={t('ecogesture_info_modal.accessibility.button_close')}
- onClick={handleCloseClick}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-14-normal',
- }}
- >
- {t('ecogesture_info_modal.button_close')}
- </Button>
- </div>
- </Dialog>
- )
-}
-
-export default EcogestureInfoModal
diff --git a/src/components/Ecogesture/EcogestureList.tsx b/src/components/Ecogesture/EcogestureList.tsx
index 94e9a62855499a070d229742e21a5f75ea055333..c5f4551a22e283eb6fddb5f9678ab4a95d162b40 100644
--- a/src/components/Ecogesture/EcogestureList.tsx
+++ b/src/components/Ecogesture/EcogestureList.tsx
@@ -1,49 +1,31 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useClient } from 'cozy-client'
-
import { Ecogesture } from 'models'
-import EcogestureService from 'services/ecogesture.service'
+
import { Menu, MenuItem, ListItemIcon } from '@material-ui/core/'
import SortIcon from 'assets/icons/ico/sort.svg'
import CheckIcon from 'assets/icons/ico/check.svg'
-import QuestionIcon from 'assets/icons/ico/efficiency-question.svg'
-import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import EcogestureCard from 'components/Ecogesture/EcogestureCard'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import Button from '@material-ui/core/Button'
import './ecogestureList.scss'
-import { ProfileType } from 'models/profileType.model'
-import { Usage } from 'enum/ecogesture.enum'
-import EcogestureInfoModal from './EcogestureInfoModal'
-import { getSeason } from 'utils/utils'
-import { FluidType } from 'enum/fluid.enum'
+import { EcogestureStatus, Usage } from 'enum/ecogesture.enum'
interface EcogestureListProps {
- filteredByProfile: boolean
- profileType?: ProfileType
+ list: Ecogesture[]
+ currentTab: EcogestureStatus
}
const EcogestureList: React.FC<EcogestureListProps> = ({
- filteredByProfile,
- profileType,
+ list,
+ currentTab,
}: EcogestureListProps) => {
const { t } = useI18n()
- const client = useClient()
-
- const [ecogestures, setEcogestures] = useState<Ecogesture[] | null>(null)
- const [isLoaded, setisLoaded] = useState(false)
const [activeFilter, setactiveFilter] = useState<string>(Usage[Usage.ALL])
const [openDropDown, setopenDropDown] = useState<boolean>(false)
- const [openInfoModal, setOpenInfoModal] = useState<boolean>(false)
-
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
- const toggleInfoModal = () => {
- setOpenInfoModal(prev => !prev)
- }
-
const toggleDropDown = () => {
setopenDropDown(prev => !prev)
}
@@ -61,7 +43,7 @@ const EcogestureList: React.FC<EcogestureListProps> = ({
.filter(ecogesture => Usage[ecogesture.usage] === activeFilter)
.map((ecogesture, index) => (
<div key={index} className="ecogesture-list-item">
- <EcogestureCard ecogesture={ecogesture} />
+ <EcogestureCard ecogesture={ecogesture} currentTab={currentTab} />
</div>
))
if (filtered.length > 0) {
@@ -80,29 +62,6 @@ const EcogestureList: React.FC<EcogestureListProps> = ({
}
}
- useEffect(() => {
- let subscribed = true
- async function loadEcogestures() {
- const ecogestureService = new EcogestureService(client)
- const dataAll = await ecogestureService.getAllEcogestures(getSeason())
- if (subscribed && dataAll) {
- setEcogestures(dataAll)
- if (filteredByProfile && profileType) {
- setEcogestures(
- EcogestureService.getEcogestureListByProfile(dataAll, profileType)
- )
- } else {
- setEcogestures(dataAll)
- }
- }
- setisLoaded(true)
- }
- loadEcogestures()
- return () => {
- subscribed = false
- }
- }, [client, filteredByProfile, profileType])
-
return (
<div className="ecogesture-root">
<>
@@ -175,32 +134,18 @@ const EcogestureList: React.FC<EcogestureListProps> = ({
</Menu>
</div>
</div>
- {filteredByProfile && (
- <Button
- classes={{
- root: 'btn-secondary-negative btn-info',
- label: 'text-14-normal',
- }}
- aria-controls="ecogesture-info"
- aria-haspopup="true"
- onClick={toggleInfoModal}
- variant="contained"
- >
- <StyledIcon icon={QuestionIcon} size={40} />
- </Button>
- )}
</div>
<div className="ecogesture-content">
- {!ecogestures || !isLoaded ? (
- <div className="ecogesture-content-loading">
- <StyledSpinner size="5em" fluidType={FluidType.MULTIFLUID} />
- </div>
- ) : ecogestures && activeFilter === Usage[Usage.ALL] ? (
- ecogestures.map((ecogesture, index) => (
- <EcogestureCard ecogesture={ecogesture} key={index} />
+ {list && activeFilter === Usage[Usage.ALL] ? (
+ list.map((ecogesture, index) => (
+ <EcogestureCard
+ ecogesture={ecogesture}
+ key={index}
+ currentTab={currentTab}
+ />
))
- ) : ecogestures && activeFilter !== Usage[Usage.ALL] ? (
- filterEcogesture(ecogestures)
+ ) : list && activeFilter !== Usage[Usage.ALL] ? (
+ filterEcogesture(list)
) : (
<div className="ec-filter-error">
<div className="text-16-normal">
@@ -210,10 +155,6 @@ const EcogestureList: React.FC<EcogestureListProps> = ({
)}
</div>
</>
- <EcogestureInfoModal
- open={openInfoModal}
- handleCloseClick={toggleInfoModal}
- />
</div>
)
}
diff --git a/src/components/Ecogesture/EcogestureView.tsx b/src/components/Ecogesture/EcogestureView.tsx
index 160f7c9733bfac26169401901b1debea80838a66..25bc0f1e6d2a96d165345c5e6fed75044650ddbc 100644
--- a/src/components/Ecogesture/EcogestureView.tsx
+++ b/src/components/Ecogesture/EcogestureView.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useClient } from 'cozy-client'
import EcogestureList from 'components/Ecogesture/EcogestureList'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
@@ -7,9 +8,19 @@ 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'
+import { Ecogesture } from 'models'
+import EcogestureService from 'services/ecogesture.service'
+import { getSeason } from 'utils/utils'
+import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
+import { FluidType } from 'enum/fluid.enum'
+import EcogestureEmptyList from './EcogestureEmptyList'
+import { EcogestureStatus } from 'enum/ecogesture.enum'
+
+interface EcogestureViewProps {
+ match: { params: { tab: string } }
+}
interface TabPanelProps {
children?: React.ReactNode
@@ -33,18 +44,30 @@ const TabPanel: React.FC<TabPanelProps> = ({
)
}
-const EcogestureView: React.FC = () => {
+const EcogestureView: React.FC<EcogestureViewProps> = ({
+ match,
+}: EcogestureViewProps) => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
const defineHeaderHeight = (height: number) => {
setHeaderHeight(height)
}
const { t } = useI18n()
- const profile = useSelector((state: AppStore) => state.ecolyo.profile)
+ const client = useClient()
const profileType = useSelector((state: AppStore) => state.ecolyo.profileType)
- const [value, setValue] = useState<number>(0)
+ const [value, setValue] = useState<EcogestureStatus>(
+ match.params.tab ? parseInt(match.params.tab) : EcogestureStatus.ALL
+ )
+ const [isLoaded, setIsLoaded] = useState<boolean>(false)
+ const [allEcogestureList, setAllEcogestureList] = useState<Ecogesture[]>([])
+ const [doingEcogestureList, setDoingEcogestureList] = useState<Ecogesture[]>(
+ []
+ )
+ const [objectiveEcogestureList, setObjectiveEcogestureList] = useState<
+ Ecogesture[]
+ >([])
- const handleChange = () => {
- value === 0 ? setValue(1) : setValue(0)
+ const handleChange = (event: React.ChangeEvent<{}>, newValue: any) => {
+ setValue(newValue)
}
const tabProps = (index: number) => {
@@ -53,53 +76,127 @@ const EcogestureView: React.FC = () => {
'aria-controls': `simple-tabpanel-${index}`,
}
}
+ const getLabel = (tab: number) => {
+ return (
+ <>
+ {t(`ecogesture.title_tab_${tab}`)}
+ <br></br>
+ {tab === EcogestureStatus.OBJECTIVE &&
+ `(${objectiveEcogestureList.length})`}
+ {tab === EcogestureStatus.DOING && `(${doingEcogestureList.length})`}
+ {tab === EcogestureStatus.ALL && `(${allEcogestureList.length})`}
+ </>
+ )
+ }
+
+ useEffect(() => {
+ let subscribed = true
+ async function loadEcogestures() {
+ const ecogestureService = new EcogestureService(client)
+ const dataAll = await ecogestureService.getAllEcogestures(getSeason())
+ if (subscribed && dataAll) {
+ setAllEcogestureList(dataAll)
+ const doing = dataAll.filter(ecogesture => ecogesture.doing === true)
+ const objective = dataAll.filter(
+ ecogesture => ecogesture.objective === true
+ )
+ setObjectiveEcogestureList(objective)
+ setDoingEcogestureList(doing)
+ // if (profileType) {
+ // setAllEcogestureList(
+ // EcogestureService.getEcogestureListByProfile(dataAll, profileType)
+ // )
+ // } else {
+ // setAllEcogestureList(dataAll)
+ // }
+ }
+ setIsLoaded(true)
+ }
+ loadEcogestures()
+ return () => {
+ subscribed = false
+ }
+ }, [client, profileType])
return (
<>
<CozyBar titleKey={'common.title_ecogestures'} />
- <Header
- setHeaderHeight={defineHeaderHeight}
- desktopTitleKey={'common.title_ecogestures'}
- >
- <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={profileType}
- />
- ) : (
- <EcogestureError />
- )}
- </TabPanel>
- </Content>
+ {!isLoaded ? (
+ <Content height={headerHeight}>
+ <div className="ecogesture-spinner" aria-busy="true">
+ <StyledSpinner size="5em" fluidType={FluidType.MULTIFLUID} />
+ </div>
+ </Content>
+ ) : (
+ <>
+ <Header
+ setHeaderHeight={defineHeaderHeight}
+ desktopTitleKey={'common.title_ecogestures'}
+ >
+ <Tabs
+ value={value}
+ className="ecogestures-tabs"
+ aria-label="ecogestures-tabs"
+ onChange={handleChange}
+ TabIndicatorProps={{ className: 'indicator-tab' }}
+ centered={true}
+ >
+ <Tab
+ label={getLabel(EcogestureStatus.OBJECTIVE)}
+ className={classNames('single-tab', {
+ ['active']: value === EcogestureStatus.OBJECTIVE,
+ })}
+ {...tabProps(EcogestureStatus.OBJECTIVE)}
+ ></Tab>
+ <Tab
+ label={getLabel(EcogestureStatus.DOING)}
+ className={classNames('single-tab', {
+ ['active']: value === EcogestureStatus.DOING,
+ })}
+ {...tabProps(EcogestureStatus.DOING)}
+ ></Tab>
+ <Tab
+ label={getLabel(EcogestureStatus.ALL)}
+ className={classNames('single-tab', {
+ ['active']: value === EcogestureStatus.ALL,
+ })}
+ {...tabProps(EcogestureStatus.ALL)}
+ ></Tab>
+ </Tabs>
+ </Header>
+ <Content height={headerHeight}>
+ <TabPanel value={value} index={EcogestureStatus.OBJECTIVE}>
+ {objectiveEcogestureList.length ? (
+ <EcogestureList
+ list={objectiveEcogestureList}
+ currentTab={EcogestureStatus.OBJECTIVE}
+ />
+ ) : (
+ <EcogestureEmptyList setTab={setValue} isObjective={true} />
+ )}
+ </TabPanel>
+
+ <TabPanel value={value} index={EcogestureStatus.DOING}>
+ {doingEcogestureList.length ? (
+ <EcogestureList
+ list={doingEcogestureList}
+ currentTab={EcogestureStatus.DOING}
+ />
+ ) : (
+ <EcogestureEmptyList setTab={setValue} isObjective={false} />
+ )}
+ </TabPanel>
+ <TabPanel value={value} index={EcogestureStatus.ALL}>
+ {allEcogestureList.length && (
+ <EcogestureList
+ list={allEcogestureList}
+ currentTab={EcogestureStatus.ALL}
+ />
+ )}
+ </TabPanel>
+ </Content>
+ </>
+ )}
</>
)
}
diff --git a/src/components/Ecogesture/SingleEcogesture.tsx b/src/components/Ecogesture/SingleEcogesture.tsx
index 4b1236c285ff69ff1f19014a2632b278e8f5d22e..40a36c89de28150d7ca8fde13b96e68dd0f85244 100644
--- a/src/components/Ecogesture/SingleEcogesture.tsx
+++ b/src/components/Ecogesture/SingleEcogesture.tsx
@@ -24,9 +24,10 @@ import { useClient } from 'cozy-client'
import ErrorPage from 'components/CommonKit/ErrorPage/ErrorPage'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import { FluidType } from 'enum/fluid.enum'
+import { EcogestureStatus } from 'enum/ecogesture.enum'
interface SingleEcogestureProps {
- match: { params: { id: string } }
+ match: { params: { id: string; tab: EcogestureStatus } }
}
const SingleEcogesture: React.FC<SingleEcogestureProps> = ({
@@ -133,12 +134,14 @@ const SingleEcogesture: React.FC<SingleEcogestureProps> = ({
titleKey={ecogesture && ecogesture.shortName}
isNotKey={true}
displayBackArrow={true}
+ tab={match.params.tab}
/>
<Header
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={ecogesture && ecogesture.shortName}
displayBackArrow={true}
isNotKey={true}
+ tab={match.params.tab}
></Header>
<Content height={headerHeight}>
<div className="single-ecogesture">
diff --git a/src/components/Ecogesture/ecogestureError.scss b/src/components/Ecogesture/ecogestureEmptyList.scss
similarity index 64%
rename from src/components/Ecogesture/ecogestureError.scss
rename to src/components/Ecogesture/ecogestureEmptyList.scss
index c89ffaf796a6b7d8602260cea1c5e0f76be76487..1326c2218c7732de283dd89296326555b3de8ee0 100644
--- a/src/components/Ecogesture/ecogestureError.scss
+++ b/src/components/Ecogesture/ecogestureEmptyList.scss
@@ -1,12 +1,10 @@
@import '../../styles/base/color';
@import '../../styles/base/breakpoint';
-.ec-error-container {
+.ec-empty-container {
margin-top: 6rem;
- @media (min-width: $width-phone) {
- margin-top: 2rem;
- }
- .ec-error-content {
+
+ .ec-empty-content {
color: $grey-bright;
text-align: center;
padding: 0 0.5rem;
@@ -18,8 +16,14 @@
@media (min-width: $width-desktop) {
max-width: 35%;
}
- }
- .ec-error-title {
- padding: 0 1.5rem;
+ .text {
+ margin: 1rem 0;
+ }
+ .btn-container {
+ display: flex;
+ button.btn1 {
+ margin-right: 1rem;
+ }
+ }
}
}
diff --git a/src/components/Ecogesture/ecogestureInfoModal.scss b/src/components/Ecogesture/ecogestureInfoModal.scss
deleted file mode 100644
index dd1033c0e872746bf451d18993b06493b6fd9f13..0000000000000000000000000000000000000000
--- a/src/components/Ecogesture/ecogestureInfoModal.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@import 'src/styles/base/breakpoint';
-@import 'src/styles/base/color';
-
-.info-header {
- margin: 1rem;
-}
-
-.info-content {
- margin: 0 1.25rem 2.125rem;
- text-align: center;
- .info-title {
- color: $white;
- text-indent: -10px;
- }
- .info-detail {
- margin: 1rem 0;
- color: $grey-bright;
- }
-}
-
-#accessibility-title {
- display: none;
-}
diff --git a/src/components/Ecogesture/ecogestureView.scss b/src/components/Ecogesture/ecogestureView.scss
index 4752507bd50e2272c66694025864d32b80368ade..048a4fc2dc699f97f56575fa67bf073335b58de8 100644
--- a/src/components/Ecogesture/ecogestureView.scss
+++ b/src/components/Ecogesture/ecogestureView.scss
@@ -1,5 +1,12 @@
@import 'src/styles/base/color';
+.ecogesture-spinner {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ min-height: inherit;
+}
.ecogestures-tabs {
background: transparent;
color: $soft-grey;
@@ -8,7 +15,7 @@
margin: 0 1rem;
box-sizing: border-box;
.single-tab {
- width: 50%;
+ width: 32%;
text-transform: initial;
font-size: 1rem;
font-weight: 400;
diff --git a/src/components/Header/CozyBar.tsx b/src/components/Header/CozyBar.tsx
index fa14912e2d9559517ef9ce6ed659cce759c4aa9e..8bb8ff265adf2d110e7cb8a7760493483db0b028 100644
--- a/src/components/Header/CozyBar.tsx
+++ b/src/components/Header/CozyBar.tsx
@@ -12,12 +12,14 @@ import HammerRight from 'assets/icons/ico/hammer-right.svg'
import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
import FeedbacksIcon from 'assets/icons/ico/feedbacks.svg'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+import { EcogestureStatus } from 'enum/ecogesture.enum'
interface CozyBarProps {
titleKey?: string
displayBackArrow?: boolean
isBuilding?: boolean
isNotKey?: boolean
+ tab?: EcogestureStatus
}
const CozyBar = ({
@@ -25,6 +27,7 @@ const CozyBar = ({
displayBackArrow = false,
isBuilding,
isNotKey,
+ tab,
}: CozyBarProps) => {
const { t } = useI18n()
const history = useHistory()
@@ -33,7 +36,8 @@ const CozyBar = ({
const { screenType } = useSelector((state: AppStore) => state.ecolyo.global)
const handleClickBack = () => {
- history.goBack()
+ console.log('tab', tab)
+ tab ? history.push(`/ecogestures/${tab}`) : history.goBack()
}
const handleClickFeedbacks = () => {
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 85bdd9e7cd7afd0372b5ed083e87c3c2b9befb57..c5cb38086284f955e40a86fb5c5de0b50ac2c81d 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -14,6 +14,7 @@ import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
import FeedbacksIcon from 'assets/icons/ico/feedbacks.svg'
import HammerLeft from 'assets/icons/ico/hammer-left.svg'
import HammerRight from 'assets/icons/ico/hammer-right.svg'
+import { EcogestureStatus } from 'enum/ecogesture.enum'
interface HeaderProps {
textKey?: string
@@ -23,6 +24,7 @@ interface HeaderProps {
setHeaderHeight(height: number): void
isBuilding?: boolean
isNotKey?: boolean
+ tab?: EcogestureStatus
}
const Header: React.FC<HeaderProps> = ({
@@ -33,6 +35,7 @@ const Header: React.FC<HeaderProps> = ({
setHeaderHeight,
isBuilding,
isNotKey,
+ tab,
}: HeaderProps) => {
const { t } = useI18n()
const history = useHistory()
@@ -44,8 +47,9 @@ const Header: React.FC<HeaderProps> = ({
const headerBottomHeight = 8
const handleClickBack = useCallback(() => {
- history.goBack()
- }, [history])
+ console.log('tab', tab)
+ tab ? history.push(`/ecogestures/${tab}`) : history.goBack()
+ }, [history, tab])
const handleClickFeedbacks = () => {
dispatch(updateModalIsFeedbacksOpen(true))
diff --git a/src/components/Routes/Routes.tsx b/src/components/Routes/Routes.tsx
index 76ce704b67bd22b59be4853190110ea818df6ef9..4bb0ae74d41dc26bf00ab385d73036f60edcca1d 100644
--- a/src/components/Routes/Routes.tsx
+++ b/src/components/Routes/Routes.tsx
@@ -9,6 +9,7 @@ import ActionView from 'components/Action/ActionView'
import UnSubscribe from 'components/Options/UnSubscribe'
import TermsView from 'components/Terms/TermsView'
import { TermsStatus } from 'models'
+import { EcogestureStatus } from 'enum/ecogesture.enum'
const ConsumptionView = lazy(() => import('components/Home/ConsumptionView'))
@@ -63,8 +64,10 @@ const Routes: React.FC<RouteProps> = ({ termsStatus }: RouteProps) => {
<Route path={`/challenges/action`} exact component={ActionView} />
<Route path={`/challenges/`} component={ChallengeView} exact />
- <Route path="/ecogestures/:id" component={SingleEcogesture} />
- <Route path="/ecogestures" component={EcogestureView} />
+ <Route path="/ecogesture/:id/:tab" component={SingleEcogesture} />
+ <Route path="/ecogesture/:id" component={SingleEcogesture} />
+ <Route path={`/ecogestures/:tab`} component={EcogestureView} />
+ <Route path={`/ecogestures`} component={EcogestureView} />
<Route path={'/options/FAQ'} component={FAQView} />
<Route path={`/options/legalnotice`} component={LegalNoticeView} />
<Route path={`/options/gcu`} component={GCUView} />
diff --git a/src/enum/ecogesture.enum.ts b/src/enum/ecogesture.enum.ts
index 7cb2f7c697701f193fde6e3c1bf170819448f85a..4ea5854e53f7a2591949440cee0991260b281071 100644
--- a/src/enum/ecogesture.enum.ts
+++ b/src/enum/ecogesture.enum.ts
@@ -42,3 +42,9 @@ export enum EquipmentType {
BOILER = 16,
HYDRAULIC_HEATING = 17,
}
+
+export enum EcogestureStatus {
+ OBJECTIVE = 0,
+ DOING = 1,
+ ALL = 2,
+}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 3ebb61e7f2a2e803824a22da93dda5cdf39160bc..cf440a0ba531e44686b4ae657572671d06389f6e 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -341,8 +341,9 @@
}
},
"ecogesture": {
- "title_tab_1": "Tous les écogestes",
- "title_tab_2": "Écogestes adaptés à votre profil",
+ "title_tab_0": "Objectifs",
+ "title_tab_1": "Je fais déjà",
+ "title_tab_2": "Tous",
"MENU_TITLE": "Filtrer",
"ALL": "Tous les usages",
"HEATING": "Chauffage",
@@ -364,7 +365,15 @@
"button_go_to_profil": "Aller à la page de profil"
},
"doing": "Je fais déjà",
- "objective": "Objectif"
+ "objective": "Objectif",
+ "emptyList": {
+ "obj1": "Les écogestes sont des actions qui vous permettent de réduire vos consommations et donc vos factures.",
+ "obj2": "Vous pouvez sélectionner ceux à mettre en objectifs et ceux que vous appliquez déjà.",
+ "doing1": "Aucun écogeste n’est indiqué comme déjà appliqué actuellement.",
+ "doing2": "Vous pouvez consulter tous les écogestes et ajouter les gestes que vous mettez déjà en pratique dans cette section.",
+ "btn1": "Voir tous les écogestes",
+ "btn2": "Sélectionner"
+ }
},
"ecogesture_modal": {
"title_ecogesture": "Écogeste",