From 0e8538b28352bf529871d00f3f5b98a321534a13 Mon Sep 17 00:00:00 2001
From: Guilhem CARRON <gcarron@grandlyon.com>
Date: Thu, 2 Dec 2021 09:39:35 +0000
Subject: [PATCH] feat(konnectors): Fix display when konnector is not installed
and prevent water consumption alert to be sent in this case
---
.../Challenge/ChallengeCardUnlocked.tsx | 8 ++-
.../Challenge/challengeCardOnGoing.scss | 2 +-
src/components/Options/ReportOptions.spec.tsx | 5 ++
src/components/Options/ReportOptions.tsx | 64 +++++++++++--------
src/utils/utils.ts | 8 ++-
5 files changed, 56 insertions(+), 31 deletions(-)
diff --git a/src/components/Challenge/ChallengeCardUnlocked.tsx b/src/components/Challenge/ChallengeCardUnlocked.tsx
index a12a13aff..d5ad1daa2 100644
--- a/src/components/Challenge/ChallengeCardUnlocked.tsx
+++ b/src/components/Challenge/ChallengeCardUnlocked.tsx
@@ -14,6 +14,7 @@ import defaultIcon from 'assets/icons/visu/challenge/challengeLocked.svg'
import { importIconbyId } from 'utils/utils'
import UsageEventService from 'services/usageEvent.service'
import { UsageEventType } from 'enum/usageEvent.enum'
+import { FluidState } from 'enum/fluid.enum'
interface ChallengeCardUnlockedProps {
userChallenge: UserChallenge
@@ -35,8 +36,11 @@ const ChallengeCardUnlocked: React.FC<ChallengeCardUnlockedProps> = ({
setopenNoFluidModal(prev => !prev)
}, [])
- fluidStatus.forEach(elem => {
- if (elem.status === 200) {
+ fluidStatus.forEach(fluid => {
+ if (
+ fluid.status !== FluidState.NOT_CONNECTED &&
+ fluid.status !== FluidState.KONNECTOR_NOT_FOUND
+ ) {
statusRequirementOk = true
}
})
diff --git a/src/components/Challenge/challengeCardOnGoing.scss b/src/components/Challenge/challengeCardOnGoing.scss
index e616648b2..73bc4b49d 100644
--- a/src/components/Challenge/challengeCardOnGoing.scss
+++ b/src/components/Challenge/challengeCardOnGoing.scss
@@ -20,7 +20,7 @@
right: 0;
margin: auto;
top: -1rem;
- background: rgba(27, 28, 34, 1);
+ background: $dark-light-2;
width: fit-content;
padding: 0 1rem;
max-width: 235px;
diff --git a/src/components/Options/ReportOptions.spec.tsx b/src/components/Options/ReportOptions.spec.tsx
index 3ca58f678..fc6cac748 100644
--- a/src/components/Options/ReportOptions.spec.tsx
+++ b/src/components/Options/ReportOptions.spec.tsx
@@ -9,6 +9,7 @@ import {
import * as profileActions from 'store/profile/profile.actions'
import { Button } from '@material-ui/core'
import StyledSwitch from 'components/CommonKit/Switch/StyledSwitch'
+import { FluidState, FluidType } from 'enum/fluid.enum'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -83,6 +84,10 @@ describe('ReportOptions component', () => {
})
it('should be rendered with sendConsumptionAlert to false', () => {
+ mockInitialEcolyoState.profile.sendAnalysisNotification = false
+ mockInitialEcolyoState.global.fluidStatus[FluidType.WATER].status =
+ FluidState.DONE
+ store = createMockStore(mockInitialEcolyoState)
const wrapper = mount(
<Provider store={store}>
<ReportOptions />
diff --git a/src/components/Options/ReportOptions.tsx b/src/components/Options/ReportOptions.tsx
index 9e8c687e3..8edbc8c24 100644
--- a/src/components/Options/ReportOptions.tsx
+++ b/src/components/Options/ReportOptions.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
import './reportOptions.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { useSelector, useDispatch } from 'react-redux'
@@ -25,9 +25,12 @@ const ReportOptions: React.FC = () => {
dispatch(updateProfile({ sendAnalysisNotification: value }))
}
- const updateProfileAlert = async (value: boolean) => {
- dispatch(updateProfile({ sendConsumptionAlert: value }))
- }
+ const updateProfileAlert = useCallback(
+ async (value: boolean) => {
+ dispatch(updateProfile({ sendConsumptionAlert: value }))
+ },
+ [dispatch]
+ )
const setWaterLimit = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.value !== null && parseInt(e.target.value) > 0) {
@@ -83,7 +86,12 @@ const ReportOptions: React.FC = () => {
return () => {
subscribed = false
}
- }, [client])
+ }, [
+ client,
+ profile.sendConsumptionAlert,
+ profile.waterDailyConsumptionLimit,
+ updateProfileAlert,
+ ])
return (
<div className="report-option-root">
<div className="report-option-content">
@@ -113,27 +121,31 @@ const ReportOptions: React.FC = () => {
</div>
</div>
{/* Consumption Alert activation */}
- {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">
- <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>
- </>
- )}
+ {fluidStatus[FluidType.WATER].status !== FluidState.NOT_CONNECTED &&
+ fluidStatus[FluidType.WATER].status !==
+ FluidState.KONNECTOR_NOT_FOUND &&
+ fluidStatus[FluidType.WATER].status !==
+ FluidState.ERROR_LOGIN_FAILED && (
+ <>
+ <div className="head text-16-normal-uppercase">
+ {t('profile.report.title_alert')}
+ </div>
+ <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="alert-input-row">
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 17322fbe9..90b97ad05 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -35,7 +35,8 @@ export function isKonnectorActive(
fluidStatus.filter(
fluid =>
fluid.status === FluidState.NOT_CONNECTED ||
- fluid.status === FluidState.ERROR_LOGIN_FAILED
+ fluid.status === FluidState.ERROR_LOGIN_FAILED ||
+ fluid.status === FluidState.KONNECTOR_NOT_FOUND
).length === 3
) {
return false
@@ -43,7 +44,10 @@ export function isKonnectorActive(
return true
}
}
- if (fluidStatus[fluidType].status === FluidState.NOT_CONNECTED) {
+ if (
+ fluidStatus[fluidType].status === FluidState.NOT_CONNECTED ||
+ fluidStatus[fluidType].status === FluidState.KONNECTOR_NOT_FOUND
+ ) {
return false
} else return true
}
--
GitLab