diff --git a/src/components/Ecogesture/EcogestureError.spec.tsx b/src/components/Ecogesture/EcogestureError.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5a09f10ebe982378ea29deb9a8641058a4fe013e
--- /dev/null
+++ b/src/components/Ecogesture/EcogestureError.spec.tsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import configureStore from 'redux-mock-store'
+import { profileData } from '../../../test/__mocks__/profile.mock'
+import { globalStateData } from '../../../test/__mocks__/globalStateData.mock'
+import { Provider } from 'react-redux'
+import MuiButton from '@material-ui/core/Button'
+import EcogestureError from './EcogestureError'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+const mockHistoryPush = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useHistory: () => ({
+ push: mockHistoryPush,
+ }),
+}))
+const mockStore = configureStore([])
+
+describe('EcogestureError component', () => {
+ it('should be rendered correctly', () => {
+ const store = mockStore({
+ ecolyo: {
+ profile: profileData,
+ global: globalStateData,
+ },
+ })
+ const wrapper = mount(
+ <Provider store={store}>
+ <EcogestureError />
+ </Provider>
+ )
+ expect(wrapper.find(MuiButton).exists()).toBeTruthy()
+ })
+ it('should redirect to profile type form', () => {
+ const store = mockStore({
+ ecolyo: {
+ profile: profileData,
+ global: globalStateData,
+ },
+ })
+ const wrapper = mount(
+ <Provider store={store}>
+ <EcogestureError />
+ </Provider>
+ )
+ wrapper
+ .find('.btn-highlight')
+ .first()
+ .simulate('click')
+ })
+})
diff --git a/src/components/Ecogesture/EcogestureError.tsx b/src/components/Ecogesture/EcogestureError.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2437b70133c1eaf37017003ff01c17b3aad445da
--- /dev/null
+++ b/src/components/Ecogesture/EcogestureError.tsx
@@ -0,0 +1,33 @@
+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
diff --git a/src/components/Ecogesture/EcogestureList.tsx b/src/components/Ecogesture/EcogestureList.tsx
index dffc99f19275df81267a85ac3840a23374d6b496..85a1c431ded90c783faf5754c4e0a27a0cf4cfa3 100644
--- a/src/components/Ecogesture/EcogestureList.tsx
+++ b/src/components/Ecogesture/EcogestureList.tsx
@@ -330,8 +330,17 @@ const EcogesturesList: React.FC = () => {
</div>
))
)}
+ <div className="ec-filter-error">
+ <div className="text-16-normal">
+ {t('ECOGESTURE.NO_ECOGESTURE_FILTER.TEXT_1')}
+ </div>
+ <div className="text-16-italic">
+ {t('ECOGESTURE.NO_ECOGESTURE_FILTER.TEXT_2')}
+ </div>
+ </div>
</div>
</>
+
{openEcogestureModal && selectedEcogesture && (
<EcogestureModal
ecogesture={selectedEcogesture}
diff --git a/src/components/Ecogesture/EcogestureView.tsx b/src/components/Ecogesture/EcogestureView.tsx
index 3d5e9122af92d3b35b1ecfc66e0c4a86446517a5..e296ec93c4c6038877248ba478df4c23b0eb9400 100644
--- a/src/components/Ecogesture/EcogestureView.tsx
+++ b/src/components/Ecogesture/EcogestureView.tsx
@@ -7,6 +7,9 @@ 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'
const EcogestureView: React.FC = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
@@ -14,7 +17,7 @@ const EcogestureView: React.FC = () => {
setHeaderHeight(height)
}
const { t } = useI18n()
-
+ const profile = useSelector((state: AppStore) => state.ecolyo.profile)
const [value, setValue] = useState<number>(0)
const handleChange = () => {
@@ -84,7 +87,11 @@ const EcogestureView: React.FC = () => {
<EcogesturesList />
</TabPanel>
<TabPanel value={value} index={1}>
- <EcogesturesList />
+ {profile.isProfileTypeCompleted ? (
+ <EcogesturesList />
+ ) : (
+ <EcogestureError />
+ )}
</TabPanel>
</Content>
</>
diff --git a/src/components/Ecogesture/ecogestureError.scss b/src/components/Ecogesture/ecogestureError.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c89ffaf796a6b7d8602260cea1c5e0f76be76487
--- /dev/null
+++ b/src/components/Ecogesture/ecogestureError.scss
@@ -0,0 +1,25 @@
+@import '../../styles/base/color';
+@import '../../styles/base/breakpoint';
+
+.ec-error-container {
+ margin-top: 6rem;
+ @media (min-width: $width-phone) {
+ margin-top: 2rem;
+ }
+ .ec-error-content {
+ color: $grey-bright;
+ text-align: center;
+ padding: 0 0.5rem;
+ margin: 0 auto;
+ max-width: 80%;
+ @media (min-width: $width-phone) {
+ max-width: 45%;
+ }
+ @media (min-width: $width-desktop) {
+ max-width: 35%;
+ }
+ }
+ .ec-error-title {
+ padding: 0 1.5rem;
+ }
+}
diff --git a/src/components/Ecogesture/ecogestureList.scss b/src/components/Ecogesture/ecogestureList.scss
index 49b100c5a2af8140e909dcf76f5632beea737051..30c8038dd5aff82423181ac2c417baf3983aa5c9 100644
--- a/src/components/Ecogesture/ecogestureList.scss
+++ b/src/components/Ecogesture/ecogestureList.scss
@@ -158,4 +158,12 @@
animation: appear 600ms ease;
}
}
+ .ec-filter-error {
+ color: $grey-bright;
+ text-align: center;
+ margin-top: 2rem;
+ div:first-child {
+ margin-bottom: 1rem;
+ }
+ }
}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 6843f9495359c897e037f3376aee89e9fe3ca5c0..4e3a2f32816c44148ec9eee3eaf25e174705b691 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -198,11 +198,19 @@
"FILTER_TITLE": "Tous les ecogestes",
"SECOND_TAB": "Ecogestes adaptés à votre profil",
"TITLE_ECOGESTURE": "Ecogeste",
- "NO_ECOGESTURE": "Pas d'ecogeste",
+ "NO_ECOGESTURE": "Aucun écogeste ne correspond à votre filtre",
"QUESTION_NEGAWATT": "nWh ?",
"EFFICIENCY": "Efficacité",
"SHOW_LESS": "Je veux moins d’infos",
- "SHOW_MORE": "Je veux plus d’infos"
+ "SHOW_MORE": "Je veux plus d’infos",
+ "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"
+ }
},
"NEGAWATT": {
"TITLE_NEGAWATT": "NégaWatt",