From c87bdadfb06ea8cc7da70c08d6016e510d126fd5 Mon Sep 17 00:00:00 2001
From: Hugo NOUTS <hnouts@grandlyon.com>
Date: Thu, 7 Sep 2023 09:28:36 +0000
Subject: [PATCH] feat(KonnectorCard): simplify status icon to throw warnings
and not only errors
---
src/assets/icons/ico/notif_warning.svg | 19 +++++
.../Consumption/FluidButtons/FluidButton.tsx | 17 +----
.../ConsumptionVisualizer/DataloadNoValue.tsx | 4 +-
.../ConnectionResult/ConnectionResult.tsx | 5 +-
.../ConnectionResult/connectionResult.scss | 22 +++++-
.../Konnector/KonnectorViewerCard.tsx | 73 +++++++++++++------
src/styles/components/_buttons.scss | 7 +-
7 files changed, 96 insertions(+), 51 deletions(-)
create mode 100644 src/assets/icons/ico/notif_warning.svg
diff --git a/src/assets/icons/ico/notif_warning.svg b/src/assets/icons/ico/notif_warning.svg
new file mode 100644
index 000000000..d34d26560
--- /dev/null
+++ b/src/assets/icons/ico/notif_warning.svg
@@ -0,0 +1,19 @@
+<svg width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_15041_508)">
+<circle cx="13.5" cy="11" r="11" fill="#E3B82A"/>
+<circle cx="13.5" cy="11" r="10.5" stroke="white"/>
+</g>
+<path d="M12.634 4.5C13.0189 3.83333 13.9811 3.83333 14.366 4.5L20.4282 15C20.8131 15.6667 20.332 16.5 19.5622 16.5H7.43782C6.66802 16.5 6.1869 15.6667 6.5718 15L12.634 4.5Z" fill="#1B1C22"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4001 7.5001C14.4001 7.00304 13.9972 6.6001 13.5001 6.6001C13.003 6.6001 12.6001 7.00304 12.6001 7.5001V12.0001C12.6001 12.4972 13.003 12.9001 13.5001 12.9001C13.9972 12.9001 14.4001 12.4972 14.4001 12.0001L14.4001 7.5001ZM14.4001 14.7001C14.4001 14.203 13.9972 13.8001 13.5001 13.8001C13.003 13.8001 12.6001 14.203 12.6001 14.7001C12.6001 15.1972 13.003 15.6001 13.5001 15.6001C13.9972 15.6001 14.4001 15.1972 14.4001 14.7001Z" fill="#E3B82A"/>
+<defs>
+<filter id="filter0_d_15041_508" x="0.5" y="0" width="26" height="26" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_15041_508"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_15041_508" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/components/Consumption/FluidButtons/FluidButton.tsx b/src/components/Consumption/FluidButtons/FluidButton.tsx
index f2d4db17c..0d78a7cc3 100644
--- a/src/components/Consumption/FluidButtons/FluidButton.tsx
+++ b/src/components/Consumption/FluidButtons/FluidButton.tsx
@@ -6,7 +6,6 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { FluidState, FluidType, UsageEventType } from 'enums'
import React, { useCallback, useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
-import DateChartService from 'services/dateChart.service'
import UsageEventService from 'services/usageEvent.service'
import { useAppSelector } from 'store/hooks'
import { getNavPicto } from 'utils/picto'
@@ -42,15 +41,6 @@ const FluidButton = ({ fluidType, isActive }: FluidButtonProps) => {
return false
}, [fluidStatus, fluidType])
- const isOutdated = useCallback(() => {
- const dateChartService = new DateChartService()
-
- return dateChartService.isDataOutdated(
- fluidStatus[fluidType].lastDataDate,
- fluidType
- )
- }, [fluidStatus, fluidType])
-
const iconType = getNavPicto(fluidType, isActive, isConnected())
const goToFluid = useCallback(async () => {
@@ -69,13 +59,10 @@ const FluidButton = ({ fluidType, isActive }: FluidButtonProps) => {
useEffect(() => {
// Show errors only on connected konnectors that are in error, outdated, with no data (specific case), and not in multifluid
- if (
- (fluidType !== FluidType.MULTIFLUID && isConnected() && isErrored()) ||
- (fluidType !== FluidType.MULTIFLUID && isConnected() && isOutdated())
- ) {
+ if (fluidType !== FluidType.MULTIFLUID && isConnected() && isErrored()) {
setShowError(true)
}
- }, [fluidStatus, fluidType, isConnected, isErrored, isOutdated])
+ }, [fluidStatus, fluidType, isConnected, isErrored])
return (
<div
className={`fluid-title ${FluidType[
diff --git a/src/components/ConsumptionVisualizer/DataloadNoValue.tsx b/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
index d75126664..0d377feb7 100644
--- a/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
@@ -66,9 +66,7 @@ const DataloadNoValue = ({
return (
<div
onClick={handleToggleKonnectionCard}
- className={classNames('dataloadvisualizer-content text-22-normal', {
- ['error']: fluidType !== FluidType.MULTIFLUID,
- })}
+ className={classNames('dataloadvisualizer-content text-22-normal')}
>
{t('consumption_visualizer.missing_data')}
</div>
diff --git a/src/components/Konnector/ConnectionResult/ConnectionResult.tsx b/src/components/Konnector/ConnectionResult/ConnectionResult.tsx
index efac612a4..01fc8d2df 100644
--- a/src/components/Konnector/ConnectionResult/ConnectionResult.tsx
+++ b/src/components/Konnector/ConnectionResult/ConnectionResult.tsx
@@ -1,4 +1,5 @@
import Button from '@material-ui/core/Button'
+import warningDark from 'assets/icons/ico/warning-dark.svg'
import warningWhite from 'assets/icons/ico/warning-white.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import Loader from 'components/Loader/Loader'
@@ -431,9 +432,9 @@ const DisplayAlreadyUpdatedToday = ({
const DisplayManualUpdate = () => {
const { t } = useI18n()
return (
- <div className="connection-caption-errored connection-update-errored warning-white text-16-normal">
+ <div className="connection-caption-warning connection-update-errored warning-white text-16-normal">
<StyledIcon
- icon={warningWhite}
+ icon={warningDark}
size={36}
className="warning-icon"
role="img"
diff --git a/src/components/Konnector/ConnectionResult/connectionResult.scss b/src/components/Konnector/ConnectionResult/connectionResult.scss
index f508a2399..05a0a1365 100644
--- a/src/components/Konnector/ConnectionResult/connectionResult.scss
+++ b/src/components/Konnector/ConnectionResult/connectionResult.scss
@@ -27,6 +27,26 @@
margin-right: 1rem;
}
}
+ .connection-caption-warning {
+ background-color: $gold-shadow;
+ margin: 0 -2.5rem;
+ padding: 0.4rem 2.5rem;
+ display: flex;
+ align-items: center;
+ color: $dark-2;
+ @media #{$tablet} {
+ margin: 0 -1.2rem;
+ padding: 0.4rem 1.2rem;
+ }
+
+ .warning-icon {
+ min-width: 20px;
+ margin-right: 1rem;
+ }
+ .warning-white {
+ margin-right: 1rem;
+ }
+ }
.connection-caption {
color: $grey-bright;
}
@@ -42,7 +62,7 @@
gap: 1rem;
button.btn-secondary-positive {
span:first-child {
- color: $red-primary !important;
+ color: $white !important;
}
}
}
diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx
index d7498a3c1..e0e44542b 100644
--- a/src/components/Konnector/KonnectorViewerCard.tsx
+++ b/src/components/Konnector/KonnectorViewerCard.tsx
@@ -7,6 +7,7 @@ import {
import chevronDown from 'assets/icons/ico/chevron-down.svg'
import ErrorNotif from 'assets/icons/ico/notif_error.svg'
import PartnersIssueNotif from 'assets/icons/ico/notif_maintenance.svg'
+import WarningNotif from 'assets/icons/ico/notif_warning.svg'
import OfflinePicto from 'assets/icons/visu/offline-param.svg'
import classNames from 'classnames'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
@@ -381,6 +382,48 @@ const KonnectorViewerCard = ({
updateGlobalFluidStatus,
]
)
+
+ const getIconForStatus = (
+ status: FluidState,
+ maintenance: boolean,
+ connection: FluidConnection,
+ outdatedData: number | null
+ ) => {
+ if (maintenance) {
+ return (
+ <StyledIcon
+ icon={PartnersIssueNotif}
+ size={24}
+ className="konnector-state-picto"
+ />
+ )
+ }
+
+ if (
+ (status === FluidState.ERROR ||
+ status === FluidState.ERROR_LOGIN_FAILED) &&
+ connection.account
+ ) {
+ return (
+ <StyledIcon
+ icon={ErrorNotif}
+ size={24}
+ className="konnector-state-picto"
+ />
+ )
+ }
+
+ if (outdatedData && outdatedData > 0) {
+ return (
+ <StyledIcon
+ icon={WarningNotif}
+ size={24}
+ className="konnector-state-picto"
+ />
+ )
+ }
+ }
+
const displayKonnectorIcon = useCallback(() => {
return (
<div className="konnector-icon">
@@ -388,33 +431,15 @@ const KonnectorViewerCard = ({
icon={currentFluidStatus.connection.account ? iconType : OfflinePicto}
size={49}
/>
- {currentFluidStatus.maintenance ? (
- <StyledIcon
- icon={PartnersIssueNotif}
- size={24}
- className="konnector-state-picto"
- />
- ) : (
- (currentFluidStatus.status === FluidState.ERROR ||
- isOutdatedData ||
- currentFluidStatus.status === FluidState.ERROR_LOGIN_FAILED) &&
- currentFluidStatus.connection.account && (
- <StyledIcon
- icon={ErrorNotif}
- size={24}
- className="konnector-state-picto"
- />
- )
+ {getIconForStatus(
+ currentFluidStatus.status,
+ currentFluidStatus.maintenance,
+ currentFluidStatus.connection,
+ isOutdatedData
)}
</div>
)
- }, [
- currentFluidStatus.connection.account,
- currentFluidStatus.maintenance,
- currentFluidStatus.status,
- iconType,
- isOutdatedData,
- ])
+ }, [currentFluidStatus, iconType, isOutdatedData])
const displayKonnectorHeader = useCallback(() => {
if (currentFluidStatus.maintenance) {
diff --git a/src/styles/components/_buttons.scss b/src/styles/components/_buttons.scss
index 8c91fc207..210658472 100644
--- a/src/styles/components/_buttons.scss
+++ b/src/styles/components/_buttons.scss
@@ -32,12 +32,7 @@ button {
@include button(transparent, $gold-euro, 1px solid $grey-dark);
}
&.btn-secondary-positive {
- @include button(
- transparent,
- $grey-bright,
- 1px solid $dark-light-2,
- transparent
- ) {
+ @include button(transparent, $grey-bright, 1px solid $white, transparent) {
background-color: rgba($dark-light-2, 0.2);
span:first-child {
color: rgba($grey-bright, 0.7);
--
GitLab