From 46dd6f28175c262d1f6f83c81a203f181c60b707 Mon Sep 17 00:00:00 2001
From: Hugo NOUTS <hnouts@grandlyon.com>
Date: Tue, 9 Nov 2021 09:27:24 +0000
Subject: [PATCH] feat(HalfHour): Edited text related to half hour harvest
activation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* Changed ActivationHalfHour component to host 2 different rendering.
* Changed enedis button's css
* FluidChart now queries half hour data from 3 days prior to selectedDate when the component knows traces of half hour data exist in db. When no data are retrieved, displays consent renewal button, otherwise displays related data and/or "Donnée manquante".
---
.../ActivateHalfHourLoad.tsx | 62 +++++++++++--------
.../activateHalfHourLoad.scss | 9 +++
src/components/FluidChart/FluidChart.tsx | 18 +++++-
src/locales/fr.json | 17 +++--
src/services/consumption.service.ts | 19 ++++++
5 files changed, 92 insertions(+), 33 deletions(-)
diff --git a/src/components/ActivateHalfHourLoad/ActivateHalfHourLoad.tsx b/src/components/ActivateHalfHourLoad/ActivateHalfHourLoad.tsx
index 6c445e602..4fd9355a9 100644
--- a/src/components/ActivateHalfHourLoad/ActivateHalfHourLoad.tsx
+++ b/src/components/ActivateHalfHourLoad/ActivateHalfHourLoad.tsx
@@ -1,6 +1,5 @@
import React from 'react'
import { IuseI18n, useI18n } from 'cozy-ui/transpiled/react/I18n'
-
import ConfigService from 'services/fluidConfig.service'
import Button from '@material-ui/core/Button'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
@@ -10,37 +9,48 @@ import useExploration from 'components/Hooks/useExploration'
import { UserExplorationID } from 'enum/userExploration.enum'
import { FluidConfig } from 'models'
-const ActivateHalfHourLoad = () => {
+interface ActivateHalfHourLoadProps {
+ consentActive: boolean
+}
+
+const ActivateHalfHourLoad: React.FC<ActivateHalfHourLoadProps> = ({
+ consentActive = false,
+}: ActivateHalfHourLoadProps) => {
const { t }: IuseI18n = useI18n()
const fluidConfig: Array<FluidConfig> = new ConfigService().getFluidConfig()
const [, setValidExploration] = useExploration()
+ const tradKey: string = consentActive ? 'consent_active' : 'no_consent_active'
return (
- <div className="activatehalfhour-box">
- <div className="activatehalfhour-box-header header-text text-16-normal">
- {t('timestep.activate.enedis.info')}
- </div>
- <Button
- aria-label={t('timestep.activate.enedis.accessibility.button_activate')}
- onClick={() => {
- setValidExploration(UserExplorationID.EXPLORATION004)
- window.open(fluidConfig[0].konnectorConfig.activation, '_blank')
- }}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- >
- <div className="oauthform-button-content">
- <div className="oauthform-button-content-icon">
- <StyledIcon icon={iconEnedisLogo} size={48} />
- </div>
- <div className="oauthform-button-text text-18-bold">
- <div> {t('timestep.activate.enedis.label1')}</div>
- </div>
+ <>
+ <div className="activatehalfhour-box">
+ <div className="activatehalfhour-box-header header-text text-16-normal">
+ {t(`timestep.activate.enedis.${tradKey}.info`)}
</div>
- </Button>
- </div>
+ <Button
+ aria-label={t(
+ `timestep.activate.enedis.${tradKey}.accessibility.button_activate`
+ )}
+ onClick={() => {
+ setValidExploration(UserExplorationID.EXPLORATION004)
+ window.open(fluidConfig[0].konnectorConfig.activation, '_blank')
+ }}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-16-bold',
+ }}
+ >
+ <div className="oauthform-button-content">
+ <div className="oauthform-button-content-icon">
+ <StyledIcon icon={iconEnedisLogo} size={48} />
+ </div>
+ <div className="oauthform-button-text text-18-bold">
+ <div> {t(`timestep.activate.enedis.${tradKey}.label1`)}</div>
+ </div>
+ </div>
+ </Button>
+ </div>
+ </>
)
}
diff --git a/src/components/ActivateHalfHourLoad/activateHalfHourLoad.scss b/src/components/ActivateHalfHourLoad/activateHalfHourLoad.scss
index c8688c267..839e0e8df 100644
--- a/src/components/ActivateHalfHourLoad/activateHalfHourLoad.scss
+++ b/src/components/ActivateHalfHourLoad/activateHalfHourLoad.scss
@@ -33,4 +33,13 @@
width: 80%;
}
}
+ .oauthform-button-content {
+ display: flex;
+ @media (min-width: $width-large-desktop) {
+ display: block;
+ }
+ }
+ .oauthform-button-text {
+ align-self: center;
+ }
}
diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx
index d25aa6efa..ed3411f55 100644
--- a/src/components/FluidChart/FluidChart.tsx
+++ b/src/components/FluidChart/FluidChart.tsx
@@ -30,11 +30,12 @@ const FluidChart: React.FC<FluidChartProps> = ({
const { t } = useI18n()
const client = useClient()
const { fluidStatus } = useSelector((state: AppStore) => state.ecolyo.global)
- const { currentTimeStep } = useSelector(
+ const { currentTimeStep, selectedDate } = useSelector(
(state: AppStore) => state.ecolyo.chart
)
const [, setValidExploration] = useExploration()
const [isMinuteBlocked, setMinuteBlocked] = useState<boolean>(false)
+ const [isEnedisConsentTimeout, setEnedisConsentKO] = useState<boolean>(false)
const [isLoaded, setIsLoaded] = useState<boolean>(false)
const [showCompare, setShowCompare] = useState<boolean>(false)
@@ -51,16 +52,24 @@ const FluidChart: React.FC<FluidChartProps> = ({
useEffect(() => {
let subscribed = true
+ let isEnedisConsentValid = true
async function loadData() {
const consumptionService = new ConsumptionService(client)
const activateHalfHourLoad = await consumptionService.checkDoctypeEntries(
FluidType.ELECTRICITY,
TimeStep.HALF_AN_HOUR
)
+ if (currentTimeStep === TimeStep.HALF_AN_HOUR && activateHalfHourLoad) {
+ isEnedisConsentValid = await consumptionService.checkEnedisHalHourConsent(
+ selectedDate
+ )
+ }
+
if (subscribed) {
if (!activateHalfHourLoad) {
setMinuteBlocked(true)
}
+ setEnedisConsentKO(!isEnedisConsentValid)
setIsLoaded(true)
}
}
@@ -68,7 +77,7 @@ const FluidChart: React.FC<FluidChartProps> = ({
return () => {
subscribed = false
}
- }, [client, fluidStatus])
+ }, [client, fluidStatus, selectedDate, currentTimeStep])
useEffect(() => {
if (!isMinuteBlocked && currentTimeStep === TimeStep.HALF_AN_HOUR) {
@@ -84,7 +93,10 @@ const FluidChart: React.FC<FluidChartProps> = ({
<>
<div className="fluidchart-root">
{isMinuteBlocked && currentTimeStep === TimeStep.HALF_AN_HOUR ? (
- <ActivateHalfHourLoad />
+ <ActivateHalfHourLoad consentActive={true} />
+ ) : isEnedisConsentTimeout &&
+ currentTimeStep === TimeStep.HALF_AN_HOUR ? (
+ <ActivateHalfHourLoad consentActive={false} />
) : (
<div className="fluidchart-content">
<FluidChartSwipe
diff --git a/src/locales/fr.json b/src/locales/fr.json
index c5597da73..392ce674c 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -887,10 +887,19 @@
"today": "Aujourd'hui",
"activate": {
"enedis": {
- "info": "Pour visualiser vos consommations à la demi-heure, il vous faut d'abord valider l'activation de l'enregistrement de votre consommation horaire sur votre compte Enedis",
- "label1": "Activer sur mon compte Enedis",
- "accessibility": {
- "button_activate": "Aller sur mon compte Enedis"
+ "consent_active": {
+ "info": "Pour visualiser vos consommations à la 1/2 heure, il vous faut activer l’ENREGISTREMENT de votre consommation horaire sur votre compte Enedis",
+ "label1": "Activer sur mon compte Enedis",
+ "accessibility": {
+ "button_activate": "Aller sur mon compte Enedis"
+ }
+ },
+ "no_consent_active": {
+ "info": "Il semble que votre consentement ait expiré, il vous faut ré-activer l’enregistrement de votre consommation horaire sur votre compte Enedis",
+ "label1": "Ré-activer sur mon compte Enedis",
+ "accessibility": {
+ "button_activate": "Aller sur mon compte Enedis"
+ }
}
}
},
diff --git a/src/services/consumption.service.ts b/src/services/consumption.service.ts
index dbb0664ad..88172930e 100644
--- a/src/services/consumption.service.ts
+++ b/src/services/consumption.service.ts
@@ -374,6 +374,25 @@ export default class ConsumptionDataManager {
return false
}
+ public async checkEnedisHalHourConsent(
+ selectedDate: DateTime
+ ): Promise<boolean> {
+ const timePeriod = {
+ startDate: selectedDate.minus({ days: 3 }).startOf('day'),
+ endDate: selectedDate,
+ }
+ const data = await this._queryRunnerService.fetchFluidData(
+ timePeriod,
+ TimeStep.HALF_AN_HOUR,
+ FluidType.ELECTRICITY
+ )
+
+ if (data && data.length > 0) {
+ return true
+ }
+ return false
+ }
+
private aggregateGraphData(
singleFluidCharts: ISingleFluidChartData[]
//,withComparison: boolean = true
--
GitLab