diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx index d5e335507007941e2b40dd7dcb92b1dff872a3d6..9416d41d843378bddbc9c0af606affe1a0e0486a 100644 --- a/src/components/FluidChart/FluidChart.tsx +++ b/src/components/FluidChart/FluidChart.tsx @@ -6,6 +6,7 @@ import useExploration from 'components/Hooks/useExploration' import { useClient } from 'cozy-client' import { useI18n } from 'cozy-ui/transpiled/react/I18n' import { FluidType, TimeStep, UserExplorationID } from 'enums' +import { DateTime } from 'luxon' import React, { useCallback, useEffect, useState } from 'react' import { useNavigate } from 'react-router-dom' import ConsumptionService from 'services/consumption.service' @@ -20,7 +21,8 @@ import { useAppDispatch, useAppSelector } from 'store/hooks' import { openConnectionModal } from 'store/modal/modal.slice' import { getFluidName, getKonnectorSlug, isKonnectorActive } from 'utils/utils' import FluidChartSwipe from './FluidChartSwipe' -import HalfHourNoData from './HalfHourNoData/HalfHourNoData' +import HalfHourNoDataFailure from './HalfHourNoDataFailure/HalfHourNoDataFailure' +import HalfHourUpcoming from './HalfHourUpcoming/HalfHourUpcoming' import TimeStepSelector from './TimeStepSelector/TimeStepSelector' import './fluidChart.scss' @@ -147,11 +149,20 @@ const FluidChart = ({ fluidType, setActive }: FluidChartProps) => { </div> ) + const isKonnectorUpdatedWithinLastThreeDays = + DateTime.fromISO( + currentFluidStatus?.connection.konnector?.updated_at || '' + ) >= DateTime.local().minus({ days: 3 }) + return ( <div className="fluidchart-root"> {!isFluidConnected && LastDataValid} {currentTimeStep === TimeStep.HALF_AN_HOUR && !containsHalfHourData ? ( - <HalfHourNoData /> + isKonnectorUpdatedWithinLastThreeDays ? ( + <HalfHourUpcoming /> + ) : ( + <HalfHourNoDataFailure /> + ) ) : ( <> <div className="fluidchart-content"> diff --git a/src/components/FluidChart/HalfHourNoData/HalfHourNoData.spec.tsx b/src/components/FluidChart/HalfHourNoData/HalfHourNoData.spec.tsx deleted file mode 100644 index 1537a11b753767682c686bbb366a335502d47520..0000000000000000000000000000000000000000 --- a/src/components/FluidChart/HalfHourNoData/HalfHourNoData.spec.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render } from '@testing-library/react' -import React from 'react' -import HalfHourNoData from './HalfHourNoData' - -describe('HalfHourNoData component', () => { - it('should render correctly HalfHourNoData', () => { - const { container } = render(<HalfHourNoData />) - expect(container).toMatchSnapshot() - }) -}) diff --git a/src/components/FluidChart/HalfHourNoDataFailure/HalfHourNoDataFailure.spec.tsx b/src/components/FluidChart/HalfHourNoDataFailure/HalfHourNoDataFailure.spec.tsx new file mode 100644 index 0000000000000000000000000000000000000000..dc46692ede36bd2f7e9f5672915b259417f4f72c --- /dev/null +++ b/src/components/FluidChart/HalfHourNoDataFailure/HalfHourNoDataFailure.spec.tsx @@ -0,0 +1,10 @@ +import { render } from '@testing-library/react' +import React from 'react' +import HalfHourNoDataFailure from './HalfHourNoDataFailure' + +describe('HalfHourNoDataFailure component', () => { + it('should render correctly HalfHourNoDataFailure', () => { + const { container } = render(<HalfHourNoDataFailure />) + expect(container).toMatchSnapshot() + }) +}) diff --git a/src/components/FluidChart/HalfHourNoDataFailure/HalfHourNoDataFailure.tsx b/src/components/FluidChart/HalfHourNoDataFailure/HalfHourNoDataFailure.tsx new file mode 100644 index 0000000000000000000000000000000000000000..116c1929971e8942dd38f039343bd255218df7fd --- /dev/null +++ b/src/components/FluidChart/HalfHourNoDataFailure/HalfHourNoDataFailure.tsx @@ -0,0 +1,20 @@ +import failureIcon from 'assets/icons/visu/duelResult/CHALLENGE0001-0.svg' +import { useI18n } from 'cozy-ui/transpiled/react/I18n' +import Icon from 'cozy-ui/transpiled/react/Icon' +import React from 'react' +import '../HalfHourUpcoming/HalfHourUpcoming.scss' + +const HalfHourNoDataFailure = () => { + const { t } = useI18n() + + return ( + <div className="halfHour"> + <Icon className="imgResult" icon={failureIcon} size={180} /> + <h2 className="text-20-bold halfHourFailure"> + {t('timestep.half_an_hour.gather_data_failure')} + </h2> + </div> + ) +} + +export default HalfHourNoDataFailure diff --git a/src/components/FluidChart/HalfHourNoDataFailure/__snapshots__/HalfHourNoDataFailure.spec.tsx.snap b/src/components/FluidChart/HalfHourNoDataFailure/__snapshots__/HalfHourNoDataFailure.spec.tsx.snap new file mode 100644 index 0000000000000000000000000000000000000000..aeeb024a2da8612aa4ee029c46c778c387c4e867 --- /dev/null +++ b/src/components/FluidChart/HalfHourNoDataFailure/__snapshots__/HalfHourNoDataFailure.spec.tsx.snap @@ -0,0 +1,24 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`HalfHourNoDataFailure component should render correctly HalfHourNoDataFailure 1`] = ` +<div> + <div + class="halfHour" + > + <svg + class="imgResult styles__icon___23x3R" + height="180" + width="180" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + <h2 + class="text-20-bold halfHourFailure" + > + timestep.half_an_hour.gather_data_failure + </h2> + </div> +</div> +`; diff --git a/src/components/FluidChart/HalfHourNoData/halfHourNoData.scss b/src/components/FluidChart/HalfHourUpcoming/HalfHourUpcoming.scss similarity index 84% rename from src/components/FluidChart/HalfHourNoData/halfHourNoData.scss rename to src/components/FluidChart/HalfHourUpcoming/HalfHourUpcoming.scss index 2691c324d3d3ee41a7d1075eb27ee0a7bbe8f57a..bb465b93241b3578b2bdb02fc6410b6adbf32092 100644 --- a/src/components/FluidChart/HalfHourNoData/halfHourNoData.scss +++ b/src/components/FluidChart/HalfHourUpcoming/HalfHourUpcoming.scss @@ -17,6 +17,10 @@ h2 { color: $elec-color; margin-bottom: 3rem; + &.halfHourFailure { + color: $white; + margin-bottom: 0; + } } p { diff --git a/src/components/FluidChart/HalfHourUpcoming/HalfHourUpcoming.spec.tsx b/src/components/FluidChart/HalfHourUpcoming/HalfHourUpcoming.spec.tsx new file mode 100644 index 0000000000000000000000000000000000000000..d1d43df102ca2571c0c2b6ca5dfd2b6dbc1e3262 --- /dev/null +++ b/src/components/FluidChart/HalfHourUpcoming/HalfHourUpcoming.spec.tsx @@ -0,0 +1,10 @@ +import { render } from '@testing-library/react' +import React from 'react' +import HalfHourUpcoming from './HalfHourUpcoming' + +describe('HalfHourUpcoming component', () => { + it('should render correctly HalfHourUpcoming', () => { + const { container } = render(<HalfHourUpcoming />) + expect(container).toMatchSnapshot() + }) +}) diff --git a/src/components/FluidChart/HalfHourNoData/HalfHourNoData.tsx b/src/components/FluidChart/HalfHourUpcoming/HalfHourUpcoming.tsx similarity index 75% rename from src/components/FluidChart/HalfHourNoData/HalfHourNoData.tsx rename to src/components/FluidChart/HalfHourUpcoming/HalfHourUpcoming.tsx index 9b88e93c8be5701cc0f803d608d9f5d0fe006258..e0e8b853ee5a34c3c3ec134670daddba92c05b10 100644 --- a/src/components/FluidChart/HalfHourNoData/HalfHourNoData.tsx +++ b/src/components/FluidChart/HalfHourUpcoming/HalfHourUpcoming.tsx @@ -1,8 +1,8 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n' import React from 'react' -import './halfHourNoData.scss' +import './HalfHourUpcoming.scss' -const HalfHourNoData = () => { +const HalfHourUpcoming = () => { const { t } = useI18n() return ( <div className="halfHour"> @@ -12,4 +12,4 @@ const HalfHourNoData = () => { ) } -export default HalfHourNoData +export default HalfHourUpcoming diff --git a/src/components/FluidChart/HalfHourNoData/__snapshots__/HalfHourNoData.spec.tsx.snap b/src/components/FluidChart/HalfHourUpcoming/__snapshots__/HalfHourUpcoming.spec.tsx.snap similarity index 73% rename from src/components/FluidChart/HalfHourNoData/__snapshots__/HalfHourNoData.spec.tsx.snap rename to src/components/FluidChart/HalfHourUpcoming/__snapshots__/HalfHourUpcoming.spec.tsx.snap index af114a46a58eb8a87647400a2fbfe1ee201f4751..8e2f91004314c5d361da49061726b846b1bcbc7d 100644 --- a/src/components/FluidChart/HalfHourNoData/__snapshots__/HalfHourNoData.spec.tsx.snap +++ b/src/components/FluidChart/HalfHourUpcoming/__snapshots__/HalfHourUpcoming.spec.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`HalfHourNoData component should render correctly HalfHourNoData 1`] = ` +exports[`HalfHourUpcoming component should render correctly HalfHourUpcoming 1`] = ` <div> <div class="halfHour" diff --git a/src/locales/fr.json b/src/locales/fr.json index aaa7ba6178120bb88490fa4a7efca43999fdc018..0b5cf3e020212a984bda76bbc814a648d3d48006 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -1277,6 +1277,7 @@ "current": "jour actuel", "last": "jour précédent", "gather_data_subtitle": "Votre connexion a bien été prise en compte mais un délai de 24h est en général nécessaire à l’obtention de vos données.\nÀ demain !", + "gather_data_failure": "Il semblerait que votre compteur ne nous permette pas d'accéder à des données de consommation plus fines.", "analysis_waiting_data": "Pour bénéficier d'une analyse approfondie de votre consommation électrique, il nous faut récupérer vos données de consommation horaires. La récupération de ces données prend environ 24h. A\u00a0bientôt\u00a0!" }, "accessibility": { diff --git a/src/models/konnector.model.ts b/src/models/konnector.model.ts index 11bf9229b32fcb5a4d1734580813efdebf7d6ca0..84e19affac4d462e1bfe5810d8fdafa11fc6029f 100644 --- a/src/models/konnector.model.ts +++ b/src/models/konnector.model.ts @@ -3,4 +3,5 @@ export interface Konnector { name: string slug: string state: string + updated_at: string }