diff --git a/src/components/Connection/GRDFConnect/GrdfWaitConsent.tsx b/src/components/Connection/GRDFConnect/GrdfWaitConsent.tsx index bd8a60e41fd24aee5a4441c4899825aad8c5b150..3718fa18e41cd50ca41813f370e8ec87a7819ba0 100644 --- a/src/components/Connection/GRDFConnect/GrdfWaitConsent.tsx +++ b/src/components/Connection/GRDFConnect/GrdfWaitConsent.tsx @@ -1,8 +1,10 @@ -import { Button } from '@material-ui/core' +import { Button, Dialog, IconButton } from '@material-ui/core' +import CloseIcon from 'assets/icons/ico/close.svg' 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' @@ -61,3 +63,37 @@ 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 3e3be1aa95673bb98eb367b3894eee43e34b9d23..5918c371380cc51ff4d0ad3dc44e85d06a3ff48e 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 { GrdfWaitConsent } from 'components/Connection/GRDFConnect/GrdfWaitConsent' +import { GrdfWaitConsentModal } from 'components/Connection/GRDFConnect/GrdfWaitConsent' import Content from 'components/Content/Content' import CustomPopupModal from 'components/CustomPopup/CustomPopupModal' import DateNavigator from 'components/DateNavigator/DateNavigator' @@ -52,10 +52,19 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => { const [openReleaseNoteModal, setOpenReleaseNoteModal] = useState<boolean>( releaseNotes.show ) + const [openExpiredConsentModal, setOpenExpiredConsentModal] = useState(true) + + const isWaitingForConsent = + fluidType === FluidType.GAS && + currentFluidStatus.status === FluidState.CHALLENGE_ASKED + + const [waitConsent, setWaitConsent] = useState(isWaitingForConsent) + + /** Show wait consent modal when navigating and consent is "A valider" */ + useEffect(() => { + setWaitConsent(isWaitingForConsent) + }, [isWaitingForConsent]) - const [active, setActive] = useState<boolean>(false) - const [openExpiredConsentModal, setOpenExpiredConsentModal] = - useState<boolean>(true) const [consentExpiredFluids, setConsentExpiredFluids] = useState<FluidType[]>( [] ) @@ -210,10 +219,6 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => { dispatch(setCurrentIndex(updatedIndex)) } - const isGRDFWaitingForConsent = - fluidType === FluidType.GAS && - currentFluidStatus.status === FluidState.CHALLENGE_ASKED - return ( <> <CozyBar titleKey="common.title_consumption" /> @@ -230,15 +235,11 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => { <Content> <FluidButtons activeFluid={fluidType} key={updateKey} /> - {isGRDFWaitingForConsent ? ( - <GrdfWaitConsent /> - ) : ( - showOfflineData && ( - <> - <FluidChart fluidType={fluidType} key={lastDataDateKey} /> - <ConsumptionDetails fluidType={fluidType} /> - </> - ) + {showOfflineData && ( + <> + <FluidChart fluidType={fluidType} key={lastDataDateKey} /> + <ConsumptionDetails fluidType={fluidType} /> + </> )} {/* TODO maybe move this inside block above */} {!isMulti && <KonnectorViewerCard fluidType={fluidType} />} @@ -281,6 +282,7 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => { ))} {/* GRDF Waiting screen */} + <GrdfWaitConsentModal open={waitConsent} setOpen={setWaitConsent} /> </> ) }