feat(konnectors): Fix display when konnector is not installed and prevent...

feat(konnectors): Fix display when konnector is not installed and prevent water consumption alert to be sent in this case

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
     }
   })

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;

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 />

src/components/Options/ReportOptions.tsx

-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">

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
 }