From ae413b41ab21ea469322d389171a465d8c37a1a7 Mon Sep 17 00:00:00 2001
From: HAUTBOIS Aurelie <aurelie.hautbois@ext.soprasteria.com>
Date: Tue, 9 Feb 2021 10:37:31 +0100
Subject: [PATCH] feat: add error msg on graph
---
.../Analysis/AnalysisError.spec.tsx | 20 +++++++++++
src/components/Analysis/AnalysisError.tsx | 33 +++++++++++++++++++
src/components/Analysis/MonthlyAnalysis.tsx | 16 ++++++---
.../__snapshots__/AnalysisError.spec.tsx.snap | 28 ++++++++++++++++
.../Analysis/analysisConsumption.scss | 8 ++++-
src/components/Analysis/analysisError.scss | 21 ++++++++++++
.../Options/AnalysisOptions.spec.tsx | 2 +-
src/locales/fr.json | 4 ++-
8 files changed, 124 insertions(+), 8 deletions(-)
create mode 100644 src/components/Analysis/AnalysisError.spec.tsx
create mode 100644 src/components/Analysis/AnalysisError.tsx
create mode 100644 src/components/Analysis/__snapshots__/AnalysisError.spec.tsx.snap
create mode 100644 src/components/Analysis/analysisError.scss
diff --git a/src/components/Analysis/AnalysisError.spec.tsx b/src/components/Analysis/AnalysisError.spec.tsx
new file mode 100644
index 000000000..937a2919d
--- /dev/null
+++ b/src/components/Analysis/AnalysisError.spec.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import AnalysisError from 'components/Analysis/AnalysisError'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+
+describe('DuelError component', () => {
+ it('should be rendered correctly', () => {
+ const component = shallow(<AnalysisError />).getElement()
+ expect(component).toMatchSnapshot()
+ })
+})
diff --git a/src/components/Analysis/AnalysisError.tsx b/src/components/Analysis/AnalysisError.tsx
new file mode 100644
index 000000000..ed6a2f9dd
--- /dev/null
+++ b/src/components/Analysis/AnalysisError.tsx
@@ -0,0 +1,33 @@
+import React, { useCallback } from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useHistory } from 'react-router-dom'
+import MuiButton from '@material-ui/core/Button'
+import './analysisError.scss'
+
+const AnalysisError: React.FC = () => {
+ const { t } = useI18n()
+ const history = useHistory()
+
+ const goToOptions = useCallback(() => {
+ history.push('/options')
+ }, [history])
+
+ return (
+ <div className="analyis-error-container">
+ <div className="analyis-error-message">{t('analysis.error_message')}</div>
+ <div className="analyis-error-button">
+ <MuiButton
+ onClick={goToOptions}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-16-bold',
+ }}
+ >
+ {t('analysis.go_to_options')}
+ </MuiButton>
+ </div>
+ </div>
+ )
+}
+
+export default AnalysisError
diff --git a/src/components/Analysis/MonthlyAnalysis.tsx b/src/components/Analysis/MonthlyAnalysis.tsx
index e2afa0888..b546161eb 100644
--- a/src/components/Analysis/MonthlyAnalysis.tsx
+++ b/src/components/Analysis/MonthlyAnalysis.tsx
@@ -22,6 +22,7 @@ import MuiButton from '@material-ui/core/Button'
import AnalysisConsumption from './AnalysisConsumption'
import { useHistory } from 'react-router-dom'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
+import AnalysisError from './AnalysisError'
const MonthlyAnalysis: React.FC = () => {
const { t } = useI18n()
@@ -127,11 +128,16 @@ const MonthlyAnalysis: React.FC = () => {
<StyledIcon icon={ProfileEditIcon} size={40} />
</MuiButton>
</div>
- <AnalysisConsumption
- aggregatedPerformanceIndicator={aggregatedPerformanceIndicators}
- peformanceIndicator={performanceIndicators}
- fluidTypes={fluidTypes}
- />
+ {fluidTypes.length >= 1 ? (
+ <AnalysisConsumption
+ aggregatedPerformanceIndicator={
+ aggregatedPerformanceIndicators
+ }
+ peformanceIndicator={performanceIndicators}
+ />
+ ) : (
+ <AnalysisError />
+ )}
</div>
</div>
<div className="analysis-root">
diff --git a/src/components/Analysis/__snapshots__/AnalysisError.spec.tsx.snap b/src/components/Analysis/__snapshots__/AnalysisError.spec.tsx.snap
new file mode 100644
index 000000000..6a10238b2
--- /dev/null
+++ b/src/components/Analysis/__snapshots__/AnalysisError.spec.tsx.snap
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DuelError component should be rendered correctly 1`] = `
+<div
+ className="analyis-error-container"
+>
+ <div
+ className="analyis-error-message"
+ >
+ analysis.error_message
+ </div>
+ <div
+ className="analyis-error-button"
+ >
+ <WithStyles(Button)
+ classes={
+ Object {
+ "label": "text-16-bold",
+ "root": "btn-highlight",
+ }
+ }
+ onClick={[Function]}
+ >
+ analysis.go_to_options
+ </WithStyles(Button)>
+ </div>
+</div>
+`;
diff --git a/src/components/Analysis/analysisConsumption.scss b/src/components/Analysis/analysisConsumption.scss
index 0392cede2..1149a9be9 100644
--- a/src/components/Analysis/analysisConsumption.scss
+++ b/src/components/Analysis/analysisConsumption.scss
@@ -196,7 +196,7 @@
border: 1px solid $multi-color;
border-radius: 4px;
padding: 1.5rem;
- margin-bottom: 1rem;
+ margin: 0 auto 1rem;
color: $grey-bright;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.75);
background: $grey-linear-gradient-background;
@@ -204,5 +204,11 @@
color: $red-primary;
margin-bottom: 1rem;
}
+ @media (min-width: $width-phone) {
+ width: 60%;
+ }
+ @media (min-width: $width-large-phone) {
+ width: 45%;
+ }
}
}
diff --git a/src/components/Analysis/analysisError.scss b/src/components/Analysis/analysisError.scss
new file mode 100644
index 000000000..62e3b6632
--- /dev/null
+++ b/src/components/Analysis/analysisError.scss
@@ -0,0 +1,21 @@
+@import '../../styles/base/color';
+@import '../../styles/base/breakpoint';
+
+.analyis-error-container {
+ margin: 4rem auto;
+ border: 1px solid $multi-color;
+ border-radius: 4px;
+ padding: 1.5rem;
+ margin-bottom: 1rem;
+ color: $grey-bright;
+ box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.75);
+ background: $grey-linear-gradient-background;
+ color: $grey-bright;
+ text-align: center;
+ @media (min-width: $width-phone) {
+ width: 60%;
+ }
+ @media (min-width: $width-large-phone) {
+ width: 45%;
+ }
+}
diff --git a/src/components/Options/AnalysisOptions.spec.tsx b/src/components/Options/AnalysisOptions.spec.tsx
index 8ff833ad6..231cfa1ab 100644
--- a/src/components/Options/AnalysisOptions.spec.tsx
+++ b/src/components/Options/AnalysisOptions.spec.tsx
@@ -20,7 +20,7 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
const updateProfileSpy = jest.spyOn(profileActions, 'updateProfile')
-describe('ReportOptions component', () => {
+describe('AnalysisOptions component', () => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let store: any
beforeEach(() => {
diff --git a/src/locales/fr.json b/src/locales/fr.json
index e2ef29d85..29ae370c4 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -317,7 +317,9 @@
"ideal_home": "Foyer idéal",
"approximate_title": "Cette comparaison est très approximative.",
"approximative_description": "Pour une comparaison plus précise, vous pouvez ajuster votre profil de consommation :",
- "adjust_profile": "Ajuster mon profil"
+ "adjust_profile": "Ajuster mon profil",
+ "error_message": "Veuillez vous connecter au moins à un fluide pour effectuer l'analyse",
+ "go_to_options": "Options"
},
"challenge": {
"noFluidModal": {
--
GitLab