diff --git a/src/components/Options/ReportOptions.tsx b/src/components/Options/ReportOptions.tsx
index afae05dec46048b792334a827ae7103e5bfddb0f..9e8c687e3efb7c09c2132bea5322235458066dfe 100644
--- a/src/components/Options/ReportOptions.tsx
+++ b/src/components/Options/ReportOptions.tsx
@@ -1,16 +1,25 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
import './reportOptions.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { useSelector, useDispatch } from 'react-redux'
import { AppStore } from 'store'
+import { useClient } from 'cozy-client'
import { updateProfile } from 'store/profile/profile.actions'
import { Button } from '@material-ui/core'
import StyledSwitch from 'components/CommonKit/Switch/StyledSwitch'
+import ConsumptionDataManager from 'services/consumption.service'
+import { DateTime } from 'luxon'
+import { Dataload, TimePeriod } from 'models'
+import { TimeStep } from 'enum/timeStep.enum'
+import { FluidState, FluidType } from 'enum/fluid.enum'
const ReportOptions: React.FC = () => {
const { t } = useI18n()
+ const client = useClient()
const dispatch = useDispatch()
const profile = useSelector((state: AppStore) => state.ecolyo.profile)
+ const { fluidStatus } = useSelector((state: AppStore) => state.ecolyo.global)
+ const [maxDayData, setLastSemesterMaxDay] = useState<Dataload | null>(null)
const updateProfileReport = async (value: boolean) => {
dispatch(updateProfile({ sendAnalysisNotification: value }))
@@ -21,9 +30,13 @@ const ReportOptions: React.FC = () => {
}
const setWaterLimit = (e: React.ChangeEvent<HTMLInputElement>) => {
- dispatch(
- updateProfile({ waterDailyConsumptionLimit: parseInt(e.target.value) })
- )
+ if (e.target.value !== null && parseInt(e.target.value) > 0) {
+ dispatch(
+ updateProfile({ waterDailyConsumptionLimit: parseInt(e.target.value) })
+ )
+ } else {
+ updateProfileAlert(false)
+ }
}
const toggleAnalysisNotification = () => {
@@ -36,6 +49,41 @@ const ReportOptions: React.FC = () => {
e.target.checked ? updateProfileAlert(true) : updateProfileAlert(false)
}
+ useEffect(() => {
+ let subscribed = true
+ if (
+ profile.sendConsumptionAlert &&
+ profile.waterDailyConsumptionLimit === 0
+ ) {
+ updateProfileAlert(false)
+ }
+ async function getMaxLoadData() {
+ const timePeriod: TimePeriod = {
+ startDate: DateTime.now()
+ .minus({ month: 6 })
+ .startOf('month'),
+ endDate: DateTime.now(),
+ }
+ const consumptionService = new ConsumptionDataManager(client)
+ const lastSemesterMax = await consumptionService.getMaxLoad(
+ timePeriod,
+ TimeStep.DAY,
+ [FluidType.WATER],
+ undefined,
+ false,
+ true
+ )
+ if (lastSemesterMax) {
+ setLastSemesterMaxDay(lastSemesterMax as Dataload)
+ }
+ }
+ if (subscribed) {
+ getMaxLoadData()
+ }
+ return () => {
+ subscribed = false
+ }
+ }, [client])
return (
<div className="report-option-root">
<div className="report-option-content">
@@ -64,40 +112,55 @@ const ReportOptions: React.FC = () => {
</Button>
</div>
</div>
-
- <div className="head text-16-normal-uppercase">
- {t('profile.report.title_alert')}
- </div>
{/* Consumption Alert activation */}
- <div className="switch-container-alert">
- <StyledSwitch
- checked={profile.sendConsumptionAlert}
- onChange={handleAlertChange}
- inputProps={{
- 'aria-label': t(
- 'profile.accessibility.button_toggle_consumption_alert'
- ),
- }}
- />
- <span className="switch-label text-16-normal">
- {t('profile.report.switch_label_alert')}
- </span>
- </div>
- {profile.sendConsumptionAlert && (
- <div className="alert-inputs-display">
- <div className="head text-16-normal">Eau</div>
+ {fluidStatus[FluidType.WATER].status !== FluidState.NOT_CONNECTED && (
+ <>
+ <div className="head text-16-normal-uppercase">
+ {t('profile.report.title_alert')}
+ </div>
<div className="switch-container-alert">
- <input
- className="input-style"
- type={'number'}
- defaultValue={profile.waterDailyConsumptionLimit}
- onBlur={setWaterLimit}
- aria-label={t('profile.accessibility.input_water_alert_report')}
+ <StyledSwitch
+ checked={profile.sendConsumptionAlert}
+ onChange={handleAlertChange}
+ inputProps={{
+ 'aria-label': t(
+ 'profile.accessibility.button_toggle_consumption_alert'
+ ),
+ }}
/>
<span className="switch-label text-16-normal">
- Litre(s) par jour
+ {t('profile.report.switch_label_alert')}
</span>
</div>
+ </>
+ )}
+ {profile.sendConsumptionAlert && (
+ <div className="alert-inputs-display">
+ <div className="alert-input-row">
+ <div className="head text-16-normal">
+ {t('profile.report.input_label_alert')}
+ </div>
+ <div className="switch-container-alert">
+ <input
+ className="input-style"
+ type={'number'}
+ defaultValue={profile.waterDailyConsumptionLimit}
+ onBlur={setWaterLimit}
+ aria-label={t(
+ 'profile.accessibility.input_water_alert_report'
+ )}
+ inputMode="numeric"
+ />
+ <span className="switch-label text-16-normal">L</span>
+ </div>
+ </div>
+ {maxDayData && (
+ <div className="alert-input-subtext">
+ {t('profile.report.input_label_subtext_alert')}
+ {Math.round(maxDayData.value)}
+ {' L)'}
+ </div>
+ )}
</div>
)}
</div>
diff --git a/src/components/Options/reportOptions.scss b/src/components/Options/reportOptions.scss
index 75f31924c9cb3dc72900c6ff17b5e82d1efd8f59..78adb64fcd291ff3b933c70c44b4fe6c1cada7c7 100644
--- a/src/components/Options/reportOptions.scss
+++ b/src/components/Options/reportOptions.scss
@@ -44,12 +44,12 @@
padding-right: 0.8rem;
}
.input-style {
- width: 45px;
+ width: 60px;
text-align: center;
margin: 0.5rem;
background: $dark-light-2;
color: $white;
- border: 1px solid $gold-shadow;
+ border: 1px solid $soft-grey;
max-width: 5rem;
height: 2rem;
&:focus {
@@ -64,4 +64,12 @@
.alert-inputs-display {
padding: 0 1rem;
}
+ .alert-input-row {
+ display: flex;
+ justify-content: space-between;
+ }
+ .alert-input-subtext {
+ color: $soft-grey;
+ font-size: 14px;
+ }
}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 9ba9f83bf99e1cf7fa4888932a2eff08be40d859..b2e27fb656609ab4cccb52e2c50995e591ba79d8 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -689,10 +689,12 @@
},
"profile": {
"report": {
- "title_alert": "Notification par mail",
+ "title_alert": "Alerte fuite d'eau",
"title_bilan": "Bilan et conseils",
"switch_label_bilan": "Je reçois la lettre mensuelle contenant un bilan et des conseils sur ma consommation.",
- "switch_label_alert": "Être prévenu d'un dépassement de consommation",
+ "switch_label_alert": "Être prévenu d’un dépassement anormal de ma consommation d’eau",
+ "input_label_alert": "Si ma consommation d’eau quotidienne dépasse :",
+ "input_label_subtext_alert": "(Votre consommation quotidienne maximum sur les 6 derniers mois : ",
"activate": "Activer",
"deactivate": "Désactiver"
},