From 13a691195a93d96e01bf252fe76646c649557e58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marl=C3=A8ne=20SIMONDANT?= <msimondant@grandlyon.com>
Date: Mon, 5 Feb 2024 14:55:41 +0000
Subject: [PATCH] feat(FluidChart): new screen when halfHour data retrieval has
failed for more than 3 days
---
src/components/FluidChart/FluidChart.tsx | 15 ++++++++++--
.../HalfHourNoData/HalfHourNoData.spec.tsx | 10 --------
.../HalfHourNoDataFailure.spec.tsx | 10 ++++++++
.../HalfHourNoDataFailure.tsx | 20 ++++++++++++++++
.../HalfHourNoDataFailure.spec.tsx.snap | 24 +++++++++++++++++++
.../HalfHourUpcoming.scss} | 4 ++++
.../HalfHourUpcoming.spec.tsx | 10 ++++++++
.../HalfHourUpcoming.tsx} | 6 ++---
.../HalfHourUpcoming.spec.tsx.snap} | 2 +-
src/locales/fr.json | 1 +
src/models/konnector.model.ts | 1 +
11 files changed, 87 insertions(+), 16 deletions(-)
delete mode 100644 src/components/FluidChart/HalfHourNoData/HalfHourNoData.spec.tsx
create mode 100644 src/components/FluidChart/HalfHourNoDataFailure/HalfHourNoDataFailure.spec.tsx
create mode 100644 src/components/FluidChart/HalfHourNoDataFailure/HalfHourNoDataFailure.tsx
create mode 100644 src/components/FluidChart/HalfHourNoDataFailure/__snapshots__/HalfHourNoDataFailure.spec.tsx.snap
rename src/components/FluidChart/{HalfHourNoData/halfHourNoData.scss => HalfHourUpcoming/HalfHourUpcoming.scss} (84%)
create mode 100644 src/components/FluidChart/HalfHourUpcoming/HalfHourUpcoming.spec.tsx
rename src/components/FluidChart/{HalfHourNoData/HalfHourNoData.tsx => HalfHourUpcoming/HalfHourUpcoming.tsx} (75%)
rename src/components/FluidChart/{HalfHourNoData/__snapshots__/HalfHourNoData.spec.tsx.snap => HalfHourUpcoming/__snapshots__/HalfHourUpcoming.spec.tsx.snap} (73%)
diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx
index d5e335507..9416d41d8 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 1537a11b7..000000000
--- 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 000000000..dc46692ed
--- /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 000000000..116c19299
--- /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 000000000..aeeb024a2
--- /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 2691c324d..bb465b932 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 000000000..d1d43df10
--- /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 9b88e93c8..e0e8b853e 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 af114a46a..8e2f91004 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 aaa7ba617..0b5cf3e02 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 11bf9229b..84e19affa 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
}
--
GitLab