diff --git a/src/assets/icons/ico/warn-cross.svg b/src/assets/icons/ico/warn-cross.svg
new file mode 100644
index 0000000000000000000000000000000000000000..38df8d8a7e717e9225e466dd8d6a7ac43e9d19d2
--- /dev/null
+++ b/src/assets/icons/ico/warn-cross.svg
@@ -0,0 +1,4 @@
+<svg width="42" height="40" viewBox="0 0 42 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.64258 36.1825L38.3566 3" stroke="#D25959" stroke-width="8"/>
+<path d="M38.3567 36.1825L3.64269 3" stroke="#D25959" stroke-width="8"/>
+</svg>
diff --git a/src/components/ContainerComponents/ViewContainer/HomeViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/HomeViewContainer.tsx
index 29be4f352a2a5797174ee4b41aa31c658267f876..5b8194877786235d593a869d4a9be6e5e3777d8f 100644
--- a/src/components/ContainerComponents/ViewContainer/HomeViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/HomeViewContainer.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react'
+import React, { useState, useContext, useEffect } from 'react'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
import Header from 'components/ContainerComponents/Header/Header'
@@ -10,6 +10,7 @@ import { AppContext } from 'components/Contexts/AppContextProvider'
import MultliFluidIndicatorsContainer from 'components/ContainerComponents/IndicatorsContainer/MultiFluidIndicatorsContainer'
import ChallengeCardContainer from 'components/ContainerComponents/ChallengeCardContainer/ChallengeCardContainer'
import KonnectorViewerContainer from 'components/ContainerComponents/KonnectorViewerContainer/KonnectorViewerContainer'
+import OldFluidDataModal from 'components/ContentComponents/OldFluidDataModal/OldFluidDataModal'
const HomeViewContainer: React.FC = () => {
const { fluidTypes, previousTimeStep, setPreviousTimeStep } = useContext(
@@ -24,6 +25,7 @@ const HomeViewContainer: React.FC = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
const [isChartLoading, setChartLoading] = useState<boolean>(true)
const [isIndicatorsLoading, setIndicatorsLoading] = useState<boolean>(true)
+ const [openOldFluidDataModal, setopenOldFluidDataModal] = useState(false)
const setChartLoaded = () => {
setChartLoading(false)
@@ -47,6 +49,18 @@ const HomeViewContainer: React.FC = () => {
const defineHeaderHeight = (height: number) => {
setHeaderHeight(height)
}
+ const checkFluidDataPeriod = () => {
+ const age = 10
+ age > 5 ? setopenOldFluidDataModal(true) : setopenOldFluidDataModal(false)
+ }
+
+ const handleCloseClick = () => {
+ setopenOldFluidDataModal(false)
+ }
+
+ useEffect(() => {
+ checkFluidDataPeriod()
+ }, [])
return (
<React.Fragment>
@@ -92,6 +106,10 @@ const HomeViewContainer: React.FC = () => {
<ChallengeCardContainer />
</div>
</Content>
+ <OldFluidDataModal
+ opened={openOldFluidDataModal}
+ handleCloseClick={handleCloseClick}
+ ></OldFluidDataModal>
</>
) : (
<>
diff --git a/src/components/ContentComponents/OldFluidDataModal/OldFluidDataModal.tsx b/src/components/ContentComponents/OldFluidDataModal/OldFluidDataModal.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5d94c4d951e1d4188945dd28b2b80a78cc2ef107
--- /dev/null
+++ b/src/components/ContentComponents/OldFluidDataModal/OldFluidDataModal.tsx
@@ -0,0 +1,60 @@
+import React, { useState } from 'react'
+import { translate } from 'cozy-ui/react/I18n'
+import Modal from 'components/CommonKit/Modal/Modal'
+import WarnCross from 'assets/icons/ico/warn-cross.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledButton from 'components/CommonKit/Button/StyledButton'
+import StyledClearGreyButton from 'components/CommonKit/Button/StyledClearGreyButton'
+import StyledStopButton from 'components/CommonKit/Button/StyledStopButton'
+
+interface OldFluidDataModalProps {
+ opened: boolean
+ t: Function
+ handleCloseClick: () => void
+ handleStartClick: () => void
+}
+
+const OldFluidDataModal: React.FC<OldFluidDataModalProps> = ({
+ opened,
+ t,
+ handleCloseClick,
+}: OldFluidDataModalProps) => {
+ const [problem, setproblem] = useState(0)
+
+ return (
+ <>
+ <Modal open={opened} handleCloseClick={handleCloseClick}>
+ <div className="od-content">
+ <div className="od-warning">
+ <StyledIcon icon={WarnCross} size={40} />
+ <p>Aie ! </p>
+ </div>
+ <p className="od-main"> {t('modalData.oldData')}</p>
+ {problem == 0 ? (
+ <div className="verifyState">
+ <p>{t('modalData.verify')}</p>
+ <ul className="od-konnectorsList">
+ <li>Electricité</li>
+ <li>Gaz</li>
+ </ul>
+ <div className="buttons">
+ <StyledStopButton color="secondary">Plus tard</StyledStopButton>
+ <StyledButton onClick={handleCloseClick}>
+ {t('modalData.accessButton')}
+ </StyledButton>
+ </div>
+ </div>
+ ) : (
+ <div className="providerProblem">
+ <p>{t('modalData.problem')}</p>
+ <p>{t('modalData.contact')}</p>
+ <StyledButton onClick={handleCloseClick}>Ok</StyledButton>
+ </div>
+ )}
+ </div>
+ </Modal>
+ </>
+ )
+}
+
+export default translate()(OldFluidDataModal)
diff --git a/src/locales/fr.json b/src/locales/fr.json
index a701dcf970aeba8d376435c42d15119148b3ed38..3cd6bf50085e7de40253bb081fd1e3282f0fcce9 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -282,5 +282,12 @@
"warning": "Attention !",
"error_empty_description": "Le champ de description est vide.",
"error_sending": "Erreur lors de l'envoi, veuillez essayer ultérieurement."
+ },
+ "modalData": {
+ "oldData": "Vos données semblent anciennes",
+ "verify": "Veuillez vérifier l’état de vos connecteurs : ",
+ "problem": "Vos connecteurs semblent bien connectés, il se peut qu’il y ait un problème au niveau de votre fournisseur de données (Enedis, GRDF, Eau du GrandLyon)",
+ "contact": "Veuillez prendre contact directement avec eux.",
+ "accessButton": "Accéder aux connecteurs"
}
}
diff --git a/src/styles/components/_oldDataModal.scss b/src/styles/components/_oldDataModal.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9c1036d2efc4da5d40b64d7aba1f8bf00020e3b5
--- /dev/null
+++ b/src/styles/components/_oldDataModal.scss
@@ -0,0 +1,40 @@
+.od-content {
+ padding: 1.5rem;
+ font-size: 1.15rem;
+ line-height: 1.3rem;
+ p {
+ color: $grey-bright;
+ }
+ .od-warning {
+ text-align: center;
+ font-size: 1.4rem;
+ font-weight: bold;
+ color: $grey-bright;
+
+ p {
+ margin: 1.5rem 0;
+ color: $red-primary;
+ }
+ }
+ .od-main {
+ font-weight: bold;
+ color: $grey-bright;
+ }
+ .od-konnectorsList {
+ color: $gold-shadow;
+ }
+ .verifyState {
+ .buttons {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: 3rem;
+ & > button:nth-child(1) {
+ margin: 0 0.2rem 0 0;
+ }
+ & > button:nth-child(2) {
+ margin: 0 0 0 0.2rem;
+ }
+ }
+ }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 8b6dd2a82b40531b0cb0ae01bd03192fa48de6b3..669fed4245dd9ba9cc9afc53831d82ff1523481f 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -27,6 +27,7 @@
@import 'components/feedback';
@import 'components/version';
@import 'components/report';
+@import 'components/oldDataModal';
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');