diff --git a/src/components/Analysis/AnalysisError.spec.tsx b/src/components/Analysis/AnalysisError.spec.tsx new file mode 100644 index 0000000000000000000000000000000000000000..937a2919de0420ff0ac0197bb088774e91afcfa8 --- /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 0000000000000000000000000000000000000000..ed6a2f9dde6c9d8c27798aab1ada1a184b5a85e6 --- /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 e2afa088834ba3b67fcb0c05ef2b0bae52387a53..b546161eb981f3997546c2135bdea1244eb362fd 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 0000000000000000000000000000000000000000..6a10238b229200c3ef628d40ebc946222f515944 --- /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 0392cede2f372d7b349d9337ec8fe35c1503d350..1149a9be91ff3bc835c0b66dc7cf6efd573d55db 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 0000000000000000000000000000000000000000..62e3b6632f5e41978ec7da41b584de0e1238b4c1 --- /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 8ff833ad6dcba46257a30454f993cf1337430941..231cfa1abffa3a3db04ba394b492f03f1ab67035 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 e2ef29d85868d6eba25ae9a905270d3e80317211..29ae370c42282c26b282c1e515d9acb9b5743c86 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": {