diff --git a/src/components/Connection/GRDFConnect/GrdfWaitConsent.scss b/src/components/Connection/GRDFConnect/GrdfWaitConsent.scss index fa3c86e2e7d542b51429f74f20f2d246d760198b..a1e3cbbf8ff4bd038a8c10dfd3be4812a141077c 100644 --- a/src/components/Connection/GRDFConnect/GrdfWaitConsent.scss +++ b/src/components/Connection/GRDFConnect/GrdfWaitConsent.scss @@ -1,12 +1,15 @@ @import 'src/styles/base/color'; .grdfWait { + margin: auto; + margin-top: 16px; display: flex; flex-direction: column; - gap: 0.5rem; + gap: 16px; align-items: center; text-align: center; padding-inline: 1rem; + max-width: 600px; .green { color: $gas-color; diff --git a/src/components/Connection/GRDFConnect/GrdfWaitConsent.tsx b/src/components/Connection/GRDFConnect/GrdfWaitConsent.tsx index 80f21a0f0304b1ac226a27e871d525303d8b2d69..361ef2f0571e256217144ec323e85564dfb09e8e 100644 --- a/src/components/Connection/GRDFConnect/GrdfWaitConsent.tsx +++ b/src/components/Connection/GRDFConnect/GrdfWaitConsent.tsx @@ -1,10 +1,8 @@ -import { Button, Dialog, IconButton } from '@material-ui/core' -import CloseIcon from 'assets/icons/ico/close.svg' +import { Button } from '@material-ui/core' import GRDFMail from 'assets/icons/visu/onboarding/grdf-mail.svg' import StyledIcon from 'components/CommonKit/Icon/StyledIcon' import useUserInstanceSettings from 'components/Hooks/useUserInstanceSettings' import { useI18n } from 'cozy-ui/transpiled/react/I18n' -import Icon from 'cozy-ui/transpiled/react/Icon' import { FluidType } from 'enums' import { FluidConnection } from 'models' import React, { useEffect, useState } from 'react' @@ -62,37 +60,3 @@ export const GrdfWaitConsent = () => { </div> ) } - -export const GrdfWaitConsentModal = ({ - open, - setOpen, -}: { - open: boolean - setOpen: React.Dispatch<React.SetStateAction<boolean>> -}) => { - const { t } = useI18n() - - return ( - <Dialog - open={open} - onClose={() => setOpen(false)} - aria-labelledby="accessibility-title" - classes={{ - root: 'modal-root', - paper: 'modal-paper', - }} - > - <div id="accessibility-title"> - {t('consumption_visualizer.modal.window_title')} - </div> - <IconButton - aria-label={t('consumption_visualizer.modal.close')} - className="modal-paper-close-button" - onClick={() => setOpen(false)} - > - <Icon icon={CloseIcon} size={16} /> - </IconButton> - <GrdfWaitConsent /> - </Dialog> - ) -} diff --git a/src/components/Consumption/ConsumptionView.tsx b/src/components/Consumption/ConsumptionView.tsx index e4b33245e173ecfe9f71c17f441ba7d543916043..0e2a292dde483e283687c6dd6efbbc8da658afbd 100644 --- a/src/components/Consumption/ConsumptionView.tsx +++ b/src/components/Consumption/ConsumptionView.tsx @@ -1,5 +1,5 @@ import ExpiredConsentModal from 'components/Connection/ExpiredConsentModal/ExpiredConsentModal' -import { GrdfWaitConsentModal } from 'components/Connection/GRDFConnect/GrdfWaitConsent' +import { GrdfWaitConsent } from 'components/Connection/GRDFConnect/GrdfWaitConsent' import Content from 'components/Content/Content' import CustomPopupModal from 'components/CustomPopup/CustomPopupModal' import DateNavigator from 'components/DateNavigator/DateNavigator' @@ -49,11 +49,11 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => { const currentFluidStatus = fluidStatus[fluidType] const dateChartService = new DateChartService() + /** Show wait consent screen when consent is "A valider" */ const isWaitingForConsent = fluidType === FluidType.GAS && currentFluidStatus.status === FluidState.CHALLENGE_ASKED - const [waitConsent, setWaitConsent] = useState(isWaitingForConsent) const [openExpiredConsentModal, setOpenExpiredConsentModal] = useState(true) const [openReleaseNoteModal, setOpenReleaseNoteModal] = useState<boolean>( releaseNotes.show @@ -62,11 +62,6 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => { [] ) - /** Show wait consent modal when navigating and consent is "A valider" */ - useEffect(() => { - setWaitConsent(isWaitingForConsent) - }, [isWaitingForConsent]) - const updateKey = fluidType !== FluidType.MULTIFLUID && currentFluidStatus.lastDataDate ? `${currentFluidStatus.lastDataDate.toLocaleString()} + ${ @@ -234,10 +229,16 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => { <Content> <FluidButtons activeFluid={fluidType} key={updateKey} /> - {showOfflineData && ( + {isWaitingForConsent ? ( + <GrdfWaitConsent /> + ) : ( <> - <FluidChart fluidType={fluidType} key={lastDataDateKey} /> - <ConsumptionDetails fluidType={fluidType} /> + {showOfflineData && ( + <> + <FluidChart fluidType={fluidType} key={lastDataDateKey} /> + <ConsumptionDetails fluidType={fluidType} /> + </> + )} </> )} {!isMulti && <KonnectorViewerCard fluidType={fluidType} />} @@ -278,9 +279,6 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => { toggleModal={() => setOpenExpiredConsentModal(prev => !prev)} /> ))} - - {/* GRDF Waiting screen */} - <GrdfWaitConsentModal open={waitConsent} setOpen={setWaitConsent} /> </> ) } diff --git a/src/components/Konnector/ConnectionResult/ConnectionResult.tsx b/src/components/Konnector/ConnectionResult/ConnectionResult.tsx index c3d282151157b8a732c1e4265f7e684845609c56..6907cc99ff3dbfad069752f1dcf94c6ed76a43d3 100644 --- a/src/components/Konnector/ConnectionResult/ConnectionResult.tsx +++ b/src/components/Konnector/ConnectionResult/ConnectionResult.tsx @@ -4,7 +4,7 @@ import warningWhite from 'assets/icons/ico/warning-white.svg' import StyledIcon from 'components/CommonKit/Icon/StyledIcon' import { useClient } from 'cozy-client' import { useI18n } from 'cozy-ui/transpiled/react/I18n' -import { FluidState, FluidType, KonnectorUpdate } from 'enums' +import { FluidType, KonnectorUpdate } from 'enums' import { DateTime } from 'luxon' import { Account, AccountSgeData, FluidConnection, FluidStatus } from 'models' import React, { useCallback, useEffect, useState } from 'react' @@ -44,10 +44,6 @@ 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 () => { setStatus('') setLastExecutionDate('-') @@ -194,14 +190,6 @@ const ConnectionResult = ({ ) } - if (isWaitingForConsent) { - return ( - <div className="connection-caption"> - <div>{t('auth.grdfgrandlyon.waiting.validate')}</div> - <div>{t('auth.grdfgrandlyon.waiting.comeback')}</div> - </div> - ) - } // Else check if konnector is in error state if (status === 'errored') { return ( @@ -234,7 +222,6 @@ const ConnectionResult = ({ } const getErrorClassName = (): string => { - if (isWaitingForConsent) return '' if ( status === 'errored' && !hasUpdatedToday() && diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx index 27056d7547d2a8cd37f89bf53cb67087b404a9e8..4b202499a778641e3ad7646a2c0199c749f6474d 100644 --- a/src/components/Konnector/KonnectorViewerCard.tsx +++ b/src/components/Konnector/KonnectorViewerCard.tsx @@ -322,7 +322,7 @@ const KonnectorViewerCard = ({ connection.account ) { statusIcon = ErrorNotif - } else if (isWaitingForConsent || (isOutdatedData && isOutdatedData > 0)) { + } else if (isOutdatedData && isOutdatedData > 0) { statusIcon = WarningNotif } @@ -341,7 +341,7 @@ const KonnectorViewerCard = ({ )} </div> ) - }, [currentFluidStatus, iconType, isOutdatedData, isWaitingForConsent]) + }, [currentFluidStatus, iconType, isOutdatedData]) const displayKonnectorHeader = useCallback(() => { if (currentFluidStatus.maintenance) { @@ -447,7 +447,7 @@ const KonnectorViewerCard = ({ return ( <div className="konnector-section-root"> {!showOfflineData && <Connection fluidType={fluidType} />} - {showOfflineData && ( + {showOfflineData && !isWaitingForConsent && ( <Accordion expanded={showConnectionDetails} onChange={toggleAccordion}