From 739ef4e2d3a2dd5f5484948795853994936a68d3 Mon Sep 17 00:00:00 2001
From: HAUTBOIS Aurelie <aurelie.hautbois@ext.soprasteria.com>
Date: Wed, 17 Feb 2021 18:59:43 +0100
Subject: [PATCH] feat: add error messages
---
.../Ecogesture/EcogestureError.spec.tsx | 60 +++++++++++++++++++
src/components/Ecogesture/EcogestureError.tsx | 33 ++++++++++
src/components/Ecogesture/EcogestureList.tsx | 9 +++
src/components/Ecogesture/EcogestureView.tsx | 11 +++-
.../Ecogesture/ecogestureError.scss | 25 ++++++++
src/components/Ecogesture/ecogestureList.scss | 8 +++
src/locales/fr.json | 12 +++-
7 files changed, 154 insertions(+), 4 deletions(-)
create mode 100644 src/components/Ecogesture/EcogestureError.spec.tsx
create mode 100644 src/components/Ecogesture/EcogestureError.tsx
create mode 100644 src/components/Ecogesture/ecogestureError.scss
diff --git a/src/components/Ecogesture/EcogestureError.spec.tsx b/src/components/Ecogesture/EcogestureError.spec.tsx
new file mode 100644
index 000000000..5a09f10eb
--- /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 000000000..2437b7013
--- /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 dffc99f19..85a1c431d 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 3d5e9122a..e296ec93c 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 000000000..c89ffaf79
--- /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 49b100c5a..30c8038dd 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 6843f9495..4e3a2f328 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",
--
GitLab