diff --git a/src/components/Konnector/KonnectorModal.tsx b/src/components/Konnector/KonnectorModal.tsx
index baa211ba39b2259e2d41bd8367b4156caf2aa14e..86d1094d088b4fb8d46379a1a44519eb26c7d6b8 100644
--- a/src/components/Konnector/KonnectorModal.tsx
+++ b/src/components/Konnector/KonnectorModal.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import './konnectorModal.scss'
@@ -12,6 +12,7 @@ import Modal from 'components/CommonKit/Modal/Modal'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import errorIcon from 'assets/icons/visu/data-nok.svg'
import successIcon from 'assets/icons/visu/data-ok.svg'
+import connectionWaitingText from 'constants/connectionWaitingText.json'
import { FluidType } from 'enum/fluid.enum'
const loadingOptions = {
@@ -38,6 +39,26 @@ const KonnectorModal: React.FC<KonnectorModalProps> = ({
}: KonnectorModalProps) => {
const { t } = useI18n()
const fluidName: string = FluidType[fluidType]
+
+ const index = useRef(0)
+ const parentWaitingTextRef = useRef<HTMLDivElement>(null)
+
+ useEffect(() => {
+ const childrensText = parentWaitingTextRef.current
+ ? Array.from(parentWaitingTextRef.current.children)
+ : []
+ childrensText[index.current % childrensText.length].classList.add('show')
+ const interval = setInterval(() => {
+ index.current += 1
+ childrensText.forEach(child => child.classList.remove('show'))
+ childrensText[index.current % childrensText.length].classList.add('show')
+ }, 6000)
+
+ return () => {
+ clearInterval(interval)
+ }
+ }, [])
+
return (
<Modal
hideClosure={true}
@@ -49,15 +70,23 @@ const KonnectorModal: React.FC<KonnectorModalProps> = ({
<>
<Lottie options={loadingOptions} height={50} width={50} speed={2} />
<div className="kmodal-content-text kmodal-content-text-center text-16-normal">
- <div className="kc-wait">{t('KONNECTORCONFIG.PLZ_WAIT')}</div>
- </div>
- <div className="kmodal-content-text text-16-normal">
- <div>
+ <div className="kc-wait">
{t(
`KONNECTORCONFIG.LOADING_DATA${isUpdating ? '_UPDATE' : ''}`
)}
</div>
</div>
+ <div
+ className="kmodal-waiting-text text-18-italic"
+ ref={parentWaitingTextRef}
+ >
+ {connectionWaitingText.map((text, idx) => (
+ <div key={idx} className="waiting-text">
+ <p>{text.first}</p>
+ <p>{text.second}</p>
+ </div>
+ ))}
+ </div>
</>
) : (
<>
diff --git a/src/components/Konnector/konnectorModal.scss b/src/components/Konnector/konnectorModal.scss
index e300cd6bd709187fc9866f20cc2f64900f87fc14..6a599d645c82e5d7f96ab742568c87ffb226e5de 100644
--- a/src/components/Konnector/konnectorModal.scss
+++ b/src/components/Konnector/konnectorModal.scss
@@ -3,6 +3,8 @@
.kmodal-content {
margin: 0.5rem 1.5rem;
+ min-height: 12rem;
+
@media #{$large-phone} {
margin: 0.5rem 0;
}
@@ -10,26 +12,51 @@
color: $grey-bright;
margin: 1rem;
text-align: center;
+ }
+
+ .kmodal-waiting-text {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ margin: 1rem;
+ min-height: 11.25rem;
+ text-align: center;
+
.kc-wait {
- color: $soft-grey;
margin-bottom: 2rem;
}
+
+ .waiting-text {
+ display: none;
+
+ &.show {
+ animation-duration: 6s;
+ animation-name: fadeIn;
+ display: block;
+ opacity: 0;
+ }
+ }
}
+
.kmodal-content-text-center {
text-align: center;
}
+
.kmodal-info {
margin: 1.5rem;
+
.konnector-config {
+ align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
- align-items: center;
text-align: center;
+
.kce-picto-txt {
color: $red-primary;
margin: 1.25rem;
}
+
.kcs-picto-txt {
color: $multi-color;
margin: 1.25rem;
@@ -37,3 +64,13 @@
}
}
}
+
+@keyframes fadeIn {
+ 10%,
+ 90% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+}
diff --git a/config.json b/src/constants/config.json
similarity index 100%
rename from config.json
rename to src/constants/config.json
diff --git a/src/constants/connectionWaitingText.json b/src/constants/connectionWaitingText.json
new file mode 100644
index 0000000000000000000000000000000000000000..a961f11462badf607a7a1fd83f02d15260b64d66
--- /dev/null
+++ b/src/constants/connectionWaitingText.json
@@ -0,0 +1,26 @@
+[
+ {
+ "first": "Le saviez-vous ?",
+ "second": "Pour acheminer l’eau sur Lyon (Lugdunum !) l’acqueduc de Gier faisait 86 km à l’époque Romaine !"
+ },
+ {
+ "first": "Rien que de l’eau, de l’eau de pluie, de l’eau de la Métroooooo",
+ "second": "♪♪"
+ },
+ {
+ "first": "Le saviez-vous ?",
+ "second": "Environ 90% de notre électricité provient de centrales de production hors de notre métropole."
+ },
+ {
+ "first": "« Il y a de l’eau dans le gaz » …",
+ "second": "Avec Ecolyo c’est l’eau AVEC le gaz."
+ },
+ {
+ "first": "Le saviez-vous ?",
+ "second": "La consommation énergétique résidentielle représente environ 30% de la consommation énergétique totale de notre territoire."
+ },
+ {
+ "first": "Le saviez-vous ?",
+ "second": "La Métropole de Lyon a été territoire d’expérimentation Linky. Le compteur est présent sur notre territoire depuis plus de 10 ans !"
+ }
+]
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 51f9dded09cd32511a68e144226c66060842f8e0..ff8692a106d46e5ff099f5cc10d1d40989553425 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -148,9 +148,8 @@
"BTN_CONFIGURE": "Configurer",
"BTN_UPDATE": "Mettre à jour",
"BTN_DELETE": "Supprimer",
- "LOADING_DATA": "Vos premières données seront disponibles dans quelques minutes et les prochaines données seront chargées automatiquement.",
- "LOADING_DATA_UPDATE": "Vos données mises à jour seront disponibles dans quelques minutes.",
- "PLZ_WAIT": "Veuillez patienter",
+ "LOADING_DATA": "Veuillez patienter, vos données sont en cours de chargement.",
+ "LOADING_DATA_UPDATE": "Veuillez patienter, vos données sont en cours de mise à jour.",
"NOT_INSTALLED": "Le connecteur n'est pas installé. Veuillez l'installer en cliquant sur le bouton ci-dessous.",
"ERROR_NO_LOGIN_PASSWORD": "Identifiant et mot de passe requis",
"ERROR_ACCOUNT_CREATION": "Une erreur est survenue, veuillez essayer de nouveau.",
diff --git a/src/services/fluidConfig.service.ts b/src/services/fluidConfig.service.ts
index 599e98c39a93f7df2cb36abd7bd06ace923217bd..5db781a91c9b8a6f248a4fd98ad6288ddee2c1f7 100644
--- a/src/services/fluidConfig.service.ts
+++ b/src/services/fluidConfig.service.ts
@@ -1,4 +1,4 @@
-import Config from '../../config.json'
+import Config from 'constants/config.json'
import { FluidConfig } from 'models'
export default class ConfigService {
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index 08f78f4475727c63e66f445349c5938c8830cc7f..6841e3c511c3ff663dce9aad565289733eeb129f 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -119,6 +119,13 @@ p {
font-size: 1.125rem;
line-height: 120%;
}
+.text-18-italic {
+ font-family: $text-font;
+ font-style: italic;
+ font-weight: 700;
+ font-size: 1.125rem;
+ line-height: 120%;
+}
.text-19-bold {
font-family: $text-font;
font-style: normal;