From 71a523b7f6413e67cf3467fa3bf1a05a12aa46e1 Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Fri, 5 Apr 2024 11:54:39 +0200
Subject: [PATCH] update KVC when waiting for consent
---
.../ConnectionResult/ConnectionResult.tsx | 48 ++++++++------
.../Konnector/KonnectorViewerCard.tsx | 63 +++++++------------
2 files changed, 51 insertions(+), 60 deletions(-)
diff --git a/src/components/Konnector/ConnectionResult/ConnectionResult.tsx b/src/components/Konnector/ConnectionResult/ConnectionResult.tsx
index 3adc7c3dc..69c5d9128 100644
--- a/src/components/Konnector/ConnectionResult/ConnectionResult.tsx
+++ b/src/components/Konnector/ConnectionResult/ConnectionResult.tsx
@@ -5,7 +5,7 @@ import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { FluidType, KonnectorUpdate } from 'enums'
+import { FluidState, FluidType, KonnectorUpdate } from 'enums'
import { DateTime } from 'luxon'
import { Account, AccountSgeData, FluidConnection, FluidStatus } from 'models'
import React, { useCallback, useEffect, useState } from 'react'
@@ -38,6 +38,7 @@ const ConnectionResult = ({
const account: Account | null = currentFluidStatus.connection.account
const [deleting, setDeleting] = useState<boolean>(false)
+ // todo remove updating state
const [updating, setUpdating] = useState<boolean>(false)
const [lastExecutionDate, setLastExecutionDate] = useState<string | DateTime>(
'-'
@@ -46,6 +47,10 @@ const ConnectionResult = ({
const [status, setStatus] = useState<string>('')
const [outDatedDataDays, setOutDatedDataDays] = useState<number | null>(null)
+ const isWaitingForConsent =
+ fluidType === FluidType.GAS &&
+ currentFluidStatus.status === FluidState.CHALLENGE_ASKED
+
const updateKonnector = async () => {
setUpdating(true)
setStatus('')
@@ -188,12 +193,17 @@ const ConnectionResult = ({
// First check if there is partner error from backoffice
if (currentFluidStatus.maintenance) {
return (
- <div className="connection-caption text-16-normal">
- <div className="text-16-normal">
- <div className="connection-caption">
- {t('konnector_form.wait_end_issue')}
- </div>
- </div>
+ <div className="connection-caption">
+ {t('konnector_form.wait_end_issue')}
+ </div>
+ )
+ }
+
+ if (isWaitingForConsent) {
+ return (
+ <div className="connection-caption">
+ <div>{t('auth.grdfgrandlyon.waiting.validate')}</div>
+ <div>{t('auth.grdfgrandlyon.waiting.comeback')}</div>
</div>
)
}
@@ -228,19 +238,21 @@ const ConnectionResult = ({
)
}
+ const getErrorClassName = (): string => {
+ if (isWaitingForConsent) return ''
+ if (
+ status === 'errored' &&
+ !hasUpdatedToday() &&
+ !currentFluidStatus.maintenance
+ ) {
+ return 'connection-update-errored'
+ }
+ return ''
+ }
+
return (
<div className="connection-update-result">
- <div
- className={
- status === 'errored' &&
- !hasUpdatedToday() &&
- !currentFluidStatus.maintenance
- ? 'connection-update-errored'
- : ''
- }
- >
- {getConnectionStatus()}
- </div>
+ <div className={getErrorClassName()}>{getConnectionStatus()}</div>
<div className="inline-buttons">
{!consentError && (
<Button
diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx
index 6a74684c0..27056d754 100644
--- a/src/components/Konnector/KonnectorViewerCard.tsx
+++ b/src/components/Konnector/KonnectorViewerCard.tsx
@@ -90,6 +90,10 @@ const KonnectorViewerCard = ({
const [konnectorState, setKonnectorState] = useState<string | null>(null)
const [isOutdatedData, setIsOutdatedData] = useState<number | null>(null)
+ const isWaitingForConsent =
+ fluidType === FluidType.GAS &&
+ currentFluidStatus.status === FluidState.CHALLENGE_ASKED
+
const fluidService = useMemo(() => new FluidService(client), [client])
const partnersInfoService = useMemo(
() => new PartnersInfoService(client),
@@ -306,63 +310,38 @@ const KonnectorViewerCard = ({
]
)
- /** Return maintenance, error or warning status icon */
- const getStatusIcon = (
- status: FluidState,
- maintenance: boolean,
- connection: FluidConnection,
- outdatedData: number | null
- ) => {
- if (maintenance) {
- return (
- <StyledIcon
- icon={PartnersIssueNotif}
- size={24}
- className="konnector-state-picto"
- />
- )
- }
+ /** Display konnector icon & its smaller status icon in upper left corner */
+ const displayKonnectorIcon = useCallback(() => {
+ const { maintenance, status, connection } = currentFluidStatus
+ let statusIcon = null
- if (
+ if (maintenance) {
+ statusIcon = PartnersIssueNotif
+ } else if (
(status === FluidState.ERROR || status === FluidState.LOGIN_FAILED) &&
connection.account
) {
- return (
- <StyledIcon
- icon={ErrorNotif}
- size={24}
- className="konnector-state-picto"
- />
- )
+ statusIcon = ErrorNotif
+ } else if (isWaitingForConsent || (isOutdatedData && isOutdatedData > 0)) {
+ statusIcon = WarningNotif
}
- if (outdatedData && outdatedData > 0) {
- return (
- <StyledIcon
- icon={WarningNotif}
- size={24}
- className="konnector-state-picto"
- />
- )
- }
- }
-
- const displayKonnectorIcon = useCallback(() => {
return (
<div className="konnector-icon">
<Icon
icon={currentFluidStatus.connection.account ? iconType : OfflinePicto}
size={49}
/>
- {getStatusIcon(
- currentFluidStatus.status,
- currentFluidStatus.maintenance,
- currentFluidStatus.connection,
- isOutdatedData
+ {statusIcon && (
+ <StyledIcon
+ icon={statusIcon}
+ size={24}
+ className="konnector-state-picto"
+ />
)}
</div>
)
- }, [currentFluidStatus, iconType, isOutdatedData])
+ }, [currentFluidStatus, iconType, isOutdatedData, isWaitingForConsent])
const displayKonnectorHeader = useCallback(() => {
if (currentFluidStatus.maintenance) {
--
GitLab