diff --git a/src/components/ActivateHalfHourLoad/ActivateHalfHourLoad.tsx b/src/components/ActivateHalfHourLoad/ActivateHalfHourLoad.tsx index 6c445e602801c3ef52b2b4b93da49326680bb45a..4fd9355a9eb04f669eb9421da973a36d389afcf5 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 c8688c267273175d1e30322b59a22d30287aa07c..839e0e8df7c9b30bfd86cc8464f4d7f687d628b6 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 d25aa6efad6ed3793f4b5daccd0a7018850442c6..ed3411f552746f4838572b50c28db27e2c84c932 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 c5597da739a13dcf3597c1f093a1df67f20ddca8..392ce674c1bd857edfb6383e8b9eb2a00ab01480 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 dbb0664ad28d5f79f0ed2424c8706ec22af18309..88172930e53edb2b47acb451c8f68c76a97147e4 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