diff --git a/src/components/Analysis/TotalAnalysisChart.spec.tsx b/src/components/Analysis/TotalAnalysisChart.spec.tsx
index 2e3fa93a967c1d8569ced08542f1b58444d0f20d..26f22d13f87761cc73e5c6ccb91d029b5d90fcf0 100644
--- a/src/components/Analysis/TotalAnalysisChart.spec.tsx
+++ b/src/components/Analysis/TotalAnalysisChart.spec.tsx
@@ -27,6 +27,7 @@ jest.mock('services/consumption.service', () => {
}
})
})
+jest.mock('components/Analysis/PieChart', () => 'PieChart')
const mockStore = configureStore([])
describe('TotalAnalysisChart component', () => {
diff --git a/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx b/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx
index 2f2ac32cb6ddce95229b597a2ce19b61f64f4522..3fbdf2f78c6f09e538eedfd3d39fe3a842428e26 100644
--- a/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx
+++ b/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Dialog from '@material-ui/core/Dialog'
import { FluidType } from 'enum/fluid.enum'
@@ -6,6 +6,10 @@ import CloseIcon from 'assets/icons/ico/close.svg'
import Icon from 'cozy-ui/transpiled/react/Icon'
import { IconButton } from '@material-ui/core'
import './estimatedConsumptionModal.scss'
+import FluidPricesService from 'services/fluidsPrices.service'
+import { useClient } from 'cozy-client'
+import { DateTime } from 'luxon'
+import { FluidPrice } from 'models'
interface EstimatedConsumptionModalProps {
open: boolean
@@ -17,6 +21,24 @@ const EstimatedConsumptionModal: React.FC<EstimatedConsumptionModalProps> = ({
handleCloseClick,
}: EstimatedConsumptionModalProps) => {
const { t } = useI18n()
+ const client = useClient()
+ const fluidsPricesService = new FluidPricesService(client)
+
+ const [prices, setPrices] = useState<FluidPrice[]>([])
+
+ useEffect(() => {
+ let subscribed = true
+ async function getAllLastPrices() {
+ const prices = await fluidsPricesService.getAllLastPrices()
+ if (subscribed && prices) {
+ setPrices(prices)
+ }
+ }
+ getAllLastPrices()
+ return () => {
+ subscribed = false
+ }
+ }, [])
return (
<Dialog
@@ -56,19 +78,49 @@ const EstimatedConsumptionModal: React.FC<EstimatedConsumptionModalProps> = ({
>
{t(`FLUID.${FluidType[FluidType.ELECTRICITY]}.LABEL`)}
</span>
- {t('consumption_visualizer.modal.list1')}
+ {t('consumption_visualizer.modal.list1', {
+ elecPrice:
+ prices[FluidType.ELECTRICITY] &&
+ prices[FluidType.ELECTRICITY].price,
+ elecPriceStartDate:
+ prices[FluidType.ELECTRICITY] &&
+ DateTime.fromISO(prices[FluidType.ELECTRICITY].startDate)
+ .setZone('utc', {
+ keepLocalTime: true,
+ })
+ .toLocaleString(),
+ })}
</li>
<li>
<span className={`${FluidType[FluidType.WATER].toLowerCase()}`}>
{t(`FLUID.${FluidType[FluidType.WATER]}.LABEL`)}
</span>
- {t('consumption_visualizer.modal.list3')}
+ {t('consumption_visualizer.modal.list3', {
+ waterPrice:
+ prices[FluidType.WATER] && prices[FluidType.WATER].price,
+ waterPriceStartDate:
+ prices[FluidType.WATER] &&
+ DateTime.fromISO(prices[FluidType.WATER].startDate)
+ .setZone('utc', {
+ keepLocalTime: true,
+ })
+ .toLocaleString(),
+ })}
</li>
<li>
<span className={`${FluidType[FluidType.GAS].toLowerCase()}`}>
{t(`FLUID.${FluidType[FluidType.GAS]}.LABEL`)}
</span>
- {t('consumption_visualizer.modal.list2')}
+ {t('consumption_visualizer.modal.list2', {
+ gasPrice: prices[FluidType.GAS] && prices[FluidType.GAS].price,
+ gasPriceStartDate:
+ prices[FluidType.GAS] &&
+ DateTime.fromISO(prices[FluidType.GAS].startDate)
+ .setZone('utc', {
+ keepLocalTime: true,
+ })
+ .toLocaleString(),
+ })}
</li>
</ul>
<div className="text-16-normal">
diff --git a/src/components/FAQ/FAQContent.spec.tsx b/src/components/FAQ/FAQContent.spec.tsx
index b00bdce8c3a12a3556ff3461324f32c2d2cf2621..56c711d0d23b12f9339b243f4639e0137010eb3f 100644
--- a/src/components/FAQ/FAQContent.spec.tsx
+++ b/src/components/FAQ/FAQContent.spec.tsx
@@ -1,7 +1,11 @@
import React from 'react'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import FAQContent from 'components/FAQ/FAQContent'
-import ExpansionPanel from '@material-ui/core/ExpansionPanel'
+import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
+import { faqData } from '../../../tests/__mocks__/faq.mock'
+import mockClient from '../../../tests/__mocks__/client'
+import { act } from 'react-dom/test-utils'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -13,9 +17,34 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}
})
+jest.mock('cozy-client', () => ({
+ ...jest.requireActual('cozy-client'),
+ useClient: () => mockClient,
+}))
+
+const mockFAQData = jest.fn()
+jest.mock('components/FAQ/FAQData', () => {
+ return () => mockFAQData()
+})
+
describe('FAQContent', () => {
- it('should render all the FAQContent component', () => {
+ beforeEach(() => {
+ mockFAQData.mockClear()
+ })
+
+ it('should render a loader', () => {
+ mockFAQData.mockResolvedValue([])
+ const wrapper = mount(<FAQContent />)
+ expect(wrapper.find(StyledSpinner).exists()).toBeTruthy()
+ })
+
+ it('should render the full FAQ', async () => {
+ mockFAQData.mockResolvedValue(faqData)
const wrapper = mount(<FAQContent />)
- expect(wrapper.find(ExpansionPanel)).toHaveLength(16)
+ await act(async () => {
+ await new Promise(resolve => setTimeout(resolve, 0))
+ wrapper.update()
+ })
+ expect(toJson(wrapper)).toMatchSnapshot()
})
})
diff --git a/src/components/FAQ/FAQContent.tsx b/src/components/FAQ/FAQContent.tsx
index e06733848f469bb8a6e0ae4b1dba594ddde19735..996c0ac54c5dd46e83a7641bd8bf5b56dba1b7d2 100644
--- a/src/components/FAQ/FAQContent.tsx
+++ b/src/components/FAQ/FAQContent.tsx
@@ -1,41 +1,57 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
import './faqContent.scss'
+import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import FAQJSon from 'constants/faq.json'
+import FaqData from 'components/FAQ/FAQData'
import ExpansionPanel from '@material-ui/core/ExpansionPanel'
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'
import ChevronOffIcon from 'assets/icons/ico/chevron-off.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { decoreText } from 'utils/decoreText'
-
-const formatDetails = (details: Array<string>) => {
- const formatedDetails: React.ReactNode[] = []
- details.forEach((detail, index) => {
- formatedDetails.push(
- <div key={index} className="faq-content-detail">
- {decoreText(detail)}
- </div>
- )
- })
- return formatedDetails
-}
+import { FAQSection } from 'models'
+import { FluidType } from 'enum/fluid.enum'
+import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
const FAQContent: React.FC = () => {
const { t } = useI18n()
+ const client = useClient()
const [expanded, setExpanded] = useState<string | false>(false)
+ const [faqData, setFaqData] = useState<FAQSection[]>([])
const handleChange = (panel: string) => (
event: React.ChangeEvent<{}>,
isExpanded: boolean
) => {
+ event.preventDefault()
setExpanded(isExpanded ? panel : false)
}
+ useEffect(() => {
+ let subscribed = true
+ async function loadFaqData() {
+ const data: FAQSection[] = await FaqData(client)
+ if (subscribed && data.length > 0) {
+ setFaqData(data)
+ }
+ }
+ loadFaqData()
+ return () => {
+ subscribed = false
+ }
+ }, [client])
+
+ if (faqData.length <= 0) {
+ return (
+ <div className="faq-spinner">
+ <StyledSpinner size="5rem" fluidType={FluidType.MULTIFLUID} />
+ </div>
+ )
+ }
+
return (
<div className="faq-view-root">
<div className="faq-view-content">
- {FAQJSon.map((faq, index) => {
+ {faqData.map((faq, index) => {
return (
<div key={index} className="faq-section">
<div className="text-16-normal-uppercase">{faq.section}</div>
@@ -64,7 +80,7 @@ const FAQContent: React.FC = () => {
root: 'expansion-panel-details',
}}
>
- <div>{formatDetails(question.details)}</div>
+ {question.details}
</ExpansionPanelDetails>
</ExpansionPanel>
)
diff --git a/src/components/FAQ/FAQData.spec.tsx b/src/components/FAQ/FAQData.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ce8cdd348db6715c4c49c5a975763265178cdcf1
--- /dev/null
+++ b/src/components/FAQ/FAQData.spec.tsx
@@ -0,0 +1,35 @@
+import mockClient from '../../../tests/__mocks__/client'
+import FaqData from 'components/FAQ/FAQData'
+import { allFluidPrices } from '../../../tests/__mocks__/fluidPrice.mock'
+import { FAQSection } from 'models'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+
+const mockGetAllLastPrices = jest.fn()
+jest.mock('services/fluidsPrices.service', () => {
+ return jest.fn(() => {
+ return {
+ getAllLastPrices: mockGetAllLastPrices,
+ }
+ })
+})
+
+describe('FAQData', () => {
+ beforeEach(() => {
+ mockGetAllLastPrices.mockClear()
+ })
+
+ it('should return', async () => {
+ mockGetAllLastPrices.mockResolvedValue(allFluidPrices)
+ const result: FAQSection[] = await FaqData(mockClient)
+ expect(result.length).toBe(3)
+ })
+})
diff --git a/src/components/FAQ/FAQData.tsx b/src/components/FAQ/FAQData.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e43073864d68eed04a0f94ffa15087a7e2c56c56
--- /dev/null
+++ b/src/components/FAQ/FAQData.tsx
@@ -0,0 +1,369 @@
+/* eslint-disable react/no-unescaped-entities */
+import React from 'react'
+import { Client } from 'cozy-client'
+import { FluidType } from 'enum/fluid.enum'
+import { DateTime } from 'luxon'
+import { FAQSection, FluidPrice } from 'models'
+import FluidPricesService from 'services/fluidsPrices.service'
+
+const FaqData = async (client: Client): Promise<FAQSection[]> => {
+ const fluidsPricesService = new FluidPricesService(client)
+ const fluidPrices: FluidPrice[] = await fluidsPricesService.getAllLastPrices()
+ return [
+ {
+ section: 'Mes données',
+ questions: [
+ {
+ summary: 'Comment accéder à mes données électricité ?',
+ details: (
+ <div>
+ Rendez-vous dans la partie Options du service et cliquer sur le
+ bouton "Se connecter à l'électricité". Suivez la procédure (en
+ vous créant un compte Enedis si nécessaire). Une fois votre
+ consentement donné, vos données de consommation seront récupérées.
+ </div>
+ ),
+ },
+ {
+ summary: 'Comment accéder à mes données gaz ?',
+ details: (
+ <div>
+ Rendez-vous dans la partie Options du service et cliquez sur le
+ bouton "Se connecter au gaz". Suivez la procédure (en vous créant
+ un compte GRDF si nécessaire). Une fois votre consentement donné,
+ vos données de consommation seront récupérées.
+ </div>
+ ),
+ },
+ {
+ summary: 'Comment accéder à mes données eau ?',
+ details: (
+ <div>
+ Rendez-vous dans la partie Options du service et cliquez sur "Se
+ connecter à l'eau". Entrez vos identifiants Eau du Grand Lyon. Vos
+ données seront ainsi récupérées.
+ </div>
+ ),
+ },
+ {
+ summary: "Mes données ne s'affichent pas. Que se passe-t-il ?",
+ details: (
+ <div>
+ <p>
+ En fonctionnement normal, vos données électricité arrivent à J+1
+ (le lendemain), vos données eau et gaz arrivent quant à elles 3
+ jours après (à J+3).
+ </p>
+ <p>Plusieurs raisons peuvent expliquer l'absence de données :</p>
+ <p>
+ - Le lien entre Ecolyo et le fournisseur de données est rompu.
+ Une mise à jour de ce lien (en bas de la page) peut parfois
+ résoudre ce problème.
+ </p>
+ <p>
+ - Si la mise à jour a été effectuée mais que la donnée
+ n'apparaît toujours pas, le souci vient du fournisseur de
+ données (Enedis pour l'électricité, GRDF pour le gaz, Eau du
+ Grand Lyon pour l'eau). Cela peut être un problème de
+ transmission de données entre le compte et le système de données
+ du partenaire, ou un problème sur votre compteur. Dans ce cas,
+ le mieux est de contacter directement Enedis, GRDF ou Eau du
+ Grand Lyon pour tenter de régler le problème avec eux.
+ </p>
+ </div>
+ ),
+ },
+ {
+ summary:
+ 'Pourquoi dois-je avoir un compte Enedis, GRDF ou Eau du Grand Lyon ?',
+ details: (
+ <div>
+ Nous avons fait le choix de passer par les gestionnaires de
+ réseaux (Enedis pour l'électricité, GRDF pour le gaz et Eau du
+ Grand Lyon pour l'eau). Ils sont en effet responsables de votre
+ compteur, de la collecte des données et du partage de celles-ci.
+ Ils ont les données brutes, ces mêmes données qui sont consolidées
+ pour votre fournisseur d'énergie ou d'eau, celui-là même qui vous
+ facture. Pour récupérer vos données, et afin que vous et vous seul
+ y ait accès, il vous faut créer un compte chez ces gestionnaires
+ de réseaux. Ce process n'est à réaliser que lors de première
+ connexion.
+ </div>
+ ),
+ },
+ {
+ summary:
+ "Si je n'en ai pas, est-ce possible d'avoir des compteurs communicants (Linky, Gazpar, Téléo ?)",
+ details: (
+ <div>
+ <p>
+ - Linky, le compteur électricité est déployé sur 95% de notre
+ territoire métropolitain. Si vous n'êtes pas encore équipé, vous
+ pouvez contacter Enedis au 0 970 831 970 (prix d'un appel local)
+ entre 8h et 17h pour convenir d'un rendez-vous.
+ </p>
+ <p>
+ - Concernant Gazpar le compteur gaz, s'il n'est pas encore
+ installé chez vous, vous pouvez vous renseigner sur le planning
+ de déploiement du compteur à cette adresse :{' '}
+ <a href="https://monespace.grdf.fr/compteur-gazpar-et-ma-commune">
+ https://monespace.grdf.fr/compteur-gazpar-et-ma-commune.
+ </a>
+ </p>
+ <p>
+ - Concernant Téléo, le compteur eau, si vous êtes en eau
+ individualisé. En principe, vous devriez déjà avoir Téléo chez
+ vous. Si vous êtes abonné et que vous n'êtes pas encore équipé,
+ contactez le service client d'eau du Grand Lyon par téléphone au
+ 09 69 39 69 99 (numéro cristal non surtaxé) pour obtenir
+ l'installation d'un compteur communicant Téléo.
+ </p>
+ </div>
+ ),
+ },
+ {
+ summary: 'Qui a accès à mes données de consommation?',
+ details: (
+ <div>
+ <p>
+ Vos données privées de consommation d’énergie et d’eau sont
+ récupérées, sauvegardées et stockées dans votre cloud personnel
+ à votre initiative sans visibilité de la Métropole de Lyon sur
+ leur contenu. Il en est de même pour les données privées de
+ composition du logement et du foyer, fournies par vos soins.
+ Elles restent également sans visibilité de la Métropole de Lyon
+ sur leur contenu.
+ </p>
+ <p>
+ Dans le cadre de l’évaluation et de l’amélioration du service,
+ des données d’utilisation anonymisées sont cependant remontées à
+ des fins d’exploitation statistiques. La récupération de ces
+ statistiques anonymisées nous permettra de s’assurer du bon
+ fonctionnement technique de la connexion à vos données de
+ consommation ainsi que d’évaluer l’impact global en termes de
+ baisse des consommations énergétiques de notre service (Plus
+ d’informations sur la manière dont votre anonymat est bien
+ préservé dans ce processus{' '}
+ <a href=" https://ecolyo.com/cloud_statistiques.html">ici</a>
+ ).
+ </p>
+ </div>
+ ),
+ },
+ {
+ summary:
+ 'Comment supprimer mon consentement au partage de mes données (électricité ou gaz) ?',
+ details: (
+ <div>
+ <p>
+ Dans un premier temps, vous pouvez supprimer le connecteur
+ électricité, gaz ou eau dans la page Options du service afin de
+ stopper le transfert de vos données vers notre service. Pour
+ supprimer totalement votre consentement vous devez ensuite :
+ </p>
+ <p>
+ - pour l'électricité : contacter directement
+ dataconnect@enedis.fr pour leur indiquer votre souhait de
+ supprimer le consentement de partage des données avec notre
+ service.
+ </p>
+ <p>
+ - pour le gaz, rendez-vous dans votre espace GRDF (
+ <a href="https://monespace.grdf.fr/">
+ https://monespace.grdf.fr/
+ </a>
+ ) dans partie "Suivi des consommations" puis "Données
+ consultées". Vous pouvez alors supprimer le consentement donné à
+ notre service.
+ </p>
+ </div>
+ ),
+ },
+ ],
+ },
+ {
+ section: 'Contenu du service',
+ questions: [
+ {
+ summary:
+ 'Pourquoi les prix affichés sont-ils différents de ceux indiqués sur ma facture ?',
+ details: (
+ <div>
+ <p>
+ Le prix de votre électricité ou de votre gaz dépend de l'offre
+ choisie auprès de votre fournisseur. N’ayant pas accès à cette
+ information, Ecolyo affiche un prix moyen par fluide.
+ </p>
+ <p>Tarifs moyens retenus :</p>
+ <p>
+ - pour l'électricité, 1 kWh ={' '}
+ {fluidPrices[FluidType.ELECTRICITY].price}€ TTC (il correspond
+ au tarif réglementé d’EDF au{' '}
+ {DateTime.fromISO(fluidPrices[FluidType.ELECTRICITY].startDate)
+ .setZone('utc', {
+ keepLocalTime: true,
+ })
+ .toLocaleString()}{' '}
+ pour une puissance souscrite de 3 ou 6 kVA et hors offre heure
+ pleine/heure creuse)
+ </p>
+ <p>
+ - pour le gaz, 1 kWh = {fluidPrices[FluidType.GAS].price}€ TTC
+ (tarif réglementé de vente au{' '}
+ {DateTime.fromISO(fluidPrices[FluidType.GAS].startDate)
+ .setZone('utc', {
+ keepLocalTime: true,
+ })
+ .toLocaleString()}{' '}
+ pour un consommateur soutirant moins de 6 MWh par an)
+ </p>
+ <p>
+ - pour l'eau, 1 litre d’eau =
+ {fluidPrices[FluidType.WATER].price}€ TTC (prix constaté au{' '}
+ {DateTime.fromISO(fluidPrices[FluidType.WATER].startDate)
+ .setZone('utc', {
+ keepLocalTime: true,
+ })
+ .toLocaleString()}{' '}
+ pour un abonnement et une consommation de 120 m3/an sur la
+ Métropole de Lyon)
+ </p>
+ <p>
+ Le coût de votre abonnement n'est pas pris en compte dans
+ Ecolyo.
+ </p>
+ </div>
+ ),
+ },
+ {
+ summary:
+ 'Est-ce la météo est prise en compte dans les données affichées ?',
+ details: (
+ <div>
+ La météo n'est pour l'instant pas prise en compte dans les données
+ présentées. Nous réfléchissons à termes à une intégration des
+ données de température extérieure. En effet, celles-ci influent
+ fortement sur les comportements et donc les consommations aussi
+ bien d'énergie en hiver que d'eau en été. Affaire à suivre pour
+ notre service !
+ </div>
+ ),
+ },
+ {
+ summary: 'Quelle est la source des écogestes ?',
+ details: (
+ <div>
+ Les écogestes présentés dans le service sont issus de guides
+ préparé par le CLER - Réseau pour la transition énergétique ainsi
+ que par l'ADEME (l'Agence de l'environnement et de la maîtrise de
+ l'énergie). La source principale est le guide des 100 écogestes
+ (version 2020-2021) produit par le CLER dans le cadre du programme
+ DECLIC.
+ </div>
+ ),
+ },
+ {
+ summary: "Qu'est-ce qu'un kWh ?",
+ details: (
+ <div>
+ Le kWh est l'unité de mesure correspondant à l'énergie consommée
+ pendant une heure par un appareil d'une puissance de 1000 watts (1
+ kW). Avec 1 kWh, il est possible de … regarder la télévision
+ pendant 3 à 5h (selon le modèle de télé), cuire un poulet au four
+ thermostat 6 pendant 1h, vous servir d'un ordinateur au bureau
+ pendant une demi-journée...
+ </div>
+ ),
+ },
+ {
+ summary:
+ 'Pourquoi dois-je renseigner mon profil dans la service ? Comment le modifier ? ',
+ details: (
+ <div>
+ Renseigner votre profil c'est profiter à la fois d'une comparaison
+ de vos consommations avec les consommation d'un foyer vous
+ ressemblant (allez jetez un œil dans la partie Analyse) mais aussi
+ avoir accès à un tri personnalisé des écogestes dans la partie
+ Ecogestes du service.
+ </div>
+ ),
+ },
+ {
+ summary: 'Comment sont choisis les écogestes personnalisés ?',
+ details: (
+ <div>
+ Les écogestes personnalisés sont aujourd'hui choisis en fonction
+ des compteurs individuels que vous possédez (communicants ou non).
+ Ils vous permettent d'agir sur ces consommations. D'autres modes
+ de tri, davantage personnalisables seront proposés à l'avenir.
+ </div>
+ ),
+ },
+ ],
+ },
+ {
+ section: 'Autres infos',
+ questions: [
+ {
+ summary: "Comment accéder plus facilement au service à l'avenir ?",
+ details: (
+ <div>
+ <p>
+ Pour retrouver facilement l'accès à Ecolyo à l'avenir, il suffit
+ de vous créer un raccourci :
+ </p>
+ <p>
+ - Sur mobile APPLE : Pour créer un raccourci sur votre écran
+ d'accueil, ouvrez Ecolyo dans Safari et cliquez sur Partager
+ (carré avec une flèche pointant vers le haut), en descendant
+ dans le menu cliquez sur "Sur l'écran d'accueil" puis ajouter.
+ Un raccourci d'Ecolyo sera alors présent (il ressemblera à une
+ application comme une autre).
+ </p>
+ <p>
+ - Sur mobile ANDROID : Une fois sur la page web du service,
+ appuyez sur les trois petits points du menu en haut à droite.
+ Sélectionnez "Ajouter à l'écran d'accueil". Nommez la page et
+ appuyez sur "Ajouter". Un raccourci vers la page web est apparu
+ sur l'écran d'accueil de votre smartphone.
+ </p>
+ <p>
+ - Sur ordinateur : ajoutez classiquement Ecolyo dans les Favoris
+ de votre navigateur préféré. Cela sera plus facile par la suite
+ de retrouver notre service.
+ </p>
+ <p>
+ Si un jour vous avez totalement perdu l'adresse d'accès à votre
+ service, vous pouvez le retrouver en cliquant tout en bas sur le
+ bouton "Accéder à mon cloud personnel" du site web Ecolyo.com
+ </p>
+ </div>
+ ),
+ },
+ {
+ summary:
+ "Pour accéder à Ecolyo, j'ai dû me créer un cloud personnel Grand Lyon. Qu'est-ce ?",
+ details: (
+ <div>
+ Souvent le cloud personnel est réduit à un simple espace de
+ stockage de documents mais il est bien plus que ça. C'est un
+ espace individuel et sécurisé. Vous seul pouvez y accéder,
+ personne d'autre. Dans le cloud vous avez deux types de services:
+ les premiers sont des services qui vous permettent de récupérer
+ vos données et les stocker dans cet espace. Vous avez aussi des
+ services qui vous permettent de valoriser vos données pour
+ qu'elles aient plus de sens pour vous (c'est le cas d'Ecolyo!). Si
+ vous souhaitez en savoir plus sur votre cloud personnel cliquez{' '}
+ <a href="https://support.grandlyon.com/clouds-personnels-grand-lyon/">
+ ici
+ </a>
+ .
+ </div>
+ ),
+ },
+ ],
+ },
+ ]
+}
+
+export default FaqData
diff --git a/src/components/FAQ/__snapshots__/FAQContent.spec.tsx.snap b/src/components/FAQ/__snapshots__/FAQContent.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..dde06eb7baaa31fbfde109a57e24cb40bec7ede7
--- /dev/null
+++ b/src/components/FAQ/__snapshots__/FAQContent.spec.tsx.snap
@@ -0,0 +1,1203 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FAQContent should render the full FAQ 1`] = `
+<FAQContent>
+ <div
+ className="faq-view-root"
+ >
+ <div
+ className="faq-view-content"
+ >
+ <div
+ className="faq-section"
+ key="0"
+ >
+ <div
+ className="text-16-normal-uppercase"
+ >
+ Mes données
+ </div>
+ <WithStyles(ForwardRef(ExpansionPanel))
+ classes={
+ Object {
+ "root": "expansion-panel-root",
+ }
+ }
+ expanded={false}
+ key="0"
+ onChange={[Function]}
+ >
+ <ForwardRef(ExpansionPanel)
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "expanded": "Mui-expanded",
+ "root": "MuiExpansionPanel-root expansion-panel-root",
+ "rounded": "MuiExpansionPanel-rounded",
+ }
+ }
+ expanded={false}
+ onChange={[Function]}
+ >
+ <WithStyles(ForwardRef(Paper))
+ className="MuiExpansionPanel-root expansion-panel-root MuiExpansionPanel-rounded"
+ square={false}
+ >
+ <ForwardRef(Paper)
+ className="MuiExpansionPanel-root expansion-panel-root MuiExpansionPanel-rounded"
+ classes={
+ Object {
+ "elevation0": "MuiPaper-elevation0",
+ "elevation1": "MuiPaper-elevation1",
+ "elevation10": "MuiPaper-elevation10",
+ "elevation11": "MuiPaper-elevation11",
+ "elevation12": "MuiPaper-elevation12",
+ "elevation13": "MuiPaper-elevation13",
+ "elevation14": "MuiPaper-elevation14",
+ "elevation15": "MuiPaper-elevation15",
+ "elevation16": "MuiPaper-elevation16",
+ "elevation17": "MuiPaper-elevation17",
+ "elevation18": "MuiPaper-elevation18",
+ "elevation19": "MuiPaper-elevation19",
+ "elevation2": "MuiPaper-elevation2",
+ "elevation20": "MuiPaper-elevation20",
+ "elevation21": "MuiPaper-elevation21",
+ "elevation22": "MuiPaper-elevation22",
+ "elevation23": "MuiPaper-elevation23",
+ "elevation24": "MuiPaper-elevation24",
+ "elevation3": "MuiPaper-elevation3",
+ "elevation4": "MuiPaper-elevation4",
+ "elevation5": "MuiPaper-elevation5",
+ "elevation6": "MuiPaper-elevation6",
+ "elevation7": "MuiPaper-elevation7",
+ "elevation8": "MuiPaper-elevation8",
+ "elevation9": "MuiPaper-elevation9",
+ "outlined": "MuiPaper-outlined",
+ "root": "MuiPaper-root",
+ "rounded": "MuiPaper-rounded",
+ }
+ }
+ square={false}
+ >
+ <div
+ className="MuiPaper-root MuiExpansionPanel-root expansion-panel-root MuiExpansionPanel-rounded MuiPaper-elevation1 MuiPaper-rounded"
+ >
+ <WithStyles(ForwardRef(ExpansionPanelSummary))
+ aria-label="faq.accessibility.button_toggle_detail"
+ classes={
+ Object {
+ "content": "expansion-panel-content",
+ "root": "expansion-panel-summary small bold-text",
+ }
+ }
+ expandIcon={
+ <StyledIcon
+ icon="test-file-stub"
+ />
+ }
+ key=".0"
+ >
+ <ForwardRef(ExpansionPanelSummary)
+ aria-label="faq.accessibility.button_toggle_detail"
+ classes={
+ Object {
+ "content": "MuiExpansionPanelSummary-content expansion-panel-content",
+ "disabled": "Mui-disabled",
+ "expandIcon": "MuiExpansionPanelSummary-expandIcon",
+ "expanded": "Mui-expanded",
+ "focused": "Mui-focused",
+ "root": "MuiExpansionPanelSummary-root expansion-panel-summary small bold-text",
+ }
+ }
+ expandIcon={
+ <StyledIcon
+ icon="test-file-stub"
+ />
+ }
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-expanded={false}
+ aria-label="faq.accessibility.button_toggle_detail"
+ className="MuiExpansionPanelSummary-root expansion-panel-summary small bold-text"
+ component="div"
+ disableRipple={true}
+ disabled={false}
+ focusRipple={false}
+ onBlur={[Function]}
+ onClick={[Function]}
+ onFocusVisible={[Function]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-expanded={false}
+ aria-label="faq.accessibility.button_toggle_detail"
+ className="MuiExpansionPanelSummary-root expansion-panel-summary small bold-text"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="div"
+ disableRipple={true}
+ disabled={false}
+ focusRipple={false}
+ onBlur={[Function]}
+ onClick={[Function]}
+ onFocusVisible={[Function]}
+ >
+ <div
+ aria-disabled={false}
+ aria-expanded={false}
+ aria-label="faq.accessibility.button_toggle_detail"
+ className="MuiButtonBase-root MuiExpansionPanelSummary-root expansion-panel-summary small bold-text"
+ onBlur={[Function]}
+ onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ role="button"
+ tabIndex={0}
+ >
+ <div
+ className="MuiExpansionPanelSummary-content expansion-panel-content"
+ >
+ Comment accéder à mes données électricité ?
+ </div>
+ <WithStyles(ForwardRef(IconButton))
+ aria-hidden={true}
+ className="MuiExpansionPanelSummary-expandIcon"
+ component="div"
+ edge="end"
+ role={null}
+ tabIndex={null}
+ >
+ <ForwardRef(IconButton)
+ aria-hidden={true}
+ className="MuiExpansionPanelSummary-expandIcon"
+ classes={
+ Object {
+ "colorInherit": "MuiIconButton-colorInherit",
+ "colorPrimary": "MuiIconButton-colorPrimary",
+ "colorSecondary": "MuiIconButton-colorSecondary",
+ "disabled": "Mui-disabled",
+ "edgeEnd": "MuiIconButton-edgeEnd",
+ "edgeStart": "MuiIconButton-edgeStart",
+ "label": "MuiIconButton-label",
+ "root": "MuiIconButton-root",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ component="div"
+ edge="end"
+ role={null}
+ tabIndex={null}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-hidden={true}
+ centerRipple={true}
+ className="MuiIconButton-root MuiExpansionPanelSummary-expandIcon MuiIconButton-edgeEnd"
+ component="div"
+ disabled={false}
+ focusRipple={true}
+ role={null}
+ tabIndex={null}
+ >
+ <ForwardRef(ButtonBase)
+ aria-hidden={true}
+ centerRipple={true}
+ className="MuiIconButton-root MuiExpansionPanelSummary-expandIcon MuiIconButton-edgeEnd"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="div"
+ disabled={false}
+ focusRipple={true}
+ role={null}
+ tabIndex={null}
+ >
+ <div
+ aria-disabled={false}
+ aria-hidden={true}
+ className="MuiButtonBase-root MuiIconButton-root MuiExpansionPanelSummary-expandIcon MuiIconButton-edgeEnd"
+ onBlur={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ role={null}
+ tabIndex={null}
+ >
+ <span
+ className="MuiIconButton-label"
+ >
+ <StyledIcon
+ icon="test-file-stub"
+ >
+ <Icon
+ aria-hidden={true}
+ icon="test-file-stub"
+ size={16}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <svg
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ </span>
+ <NoSsr>
+ <WithStyles(memo)
+ center={true}
+ >
+ <ForwardRef(TouchRipple)
+ center={true}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </NoSsr>
+ </div>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(IconButton)>
+ </WithStyles(ForwardRef(IconButton))>
+ </div>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(ExpansionPanelSummary)>
+ </WithStyles(ForwardRef(ExpansionPanelSummary))>
+ <WithStyles(ForwardRef(Collapse))
+ in={false}
+ timeout="auto"
+ >
+ <ForwardRef(Collapse)
+ classes={
+ Object {
+ "container": "MuiCollapse-container",
+ "entered": "MuiCollapse-entered",
+ "hidden": "MuiCollapse-hidden",
+ "wrapper": "MuiCollapse-wrapper",
+ "wrapperInner": "MuiCollapse-wrapperInner",
+ }
+ }
+ in={false}
+ timeout="auto"
+ >
+ <Transition
+ addEndListener={[Function]}
+ appear={false}
+ enter={true}
+ exit={true}
+ in={false}
+ mountOnEnter={false}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ timeout={null}
+ unmountOnExit={false}
+ >
+ <div
+ className="MuiCollapse-container MuiCollapse-hidden"
+ style={
+ Object {
+ "minHeight": "0px",
+ }
+ }
+ >
+ <div
+ className="MuiCollapse-wrapper"
+ >
+ <div
+ className="MuiCollapse-wrapperInner"
+ >
+ <div
+ role="region"
+ >
+ <WithStyles(ForwardRef(ExpansionPanelDetails))
+ classes={
+ Object {
+ "root": "expansion-panel-details",
+ }
+ }
+ key=".1"
+ >
+ <ForwardRef(ExpansionPanelDetails)
+ classes={
+ Object {
+ "root": "MuiExpansionPanelDetails-root expansion-panel-details",
+ }
+ }
+ >
+ <div
+ className="MuiExpansionPanelDetails-root expansion-panel-details"
+ >
+ <div>
+ Rendez-vous dans la partie Options du service et cliquer sur le bouton "Se connecter à l\\'électricité". Suivez la procédure (en vous créant un compte Enedis si nécessaire). Une fois votre consentement donné, vos données de consommation seront récupérées.
+ </div>
+ </div>
+ </ForwardRef(ExpansionPanelDetails)>
+ </WithStyles(ForwardRef(ExpansionPanelDetails))>
+ </div>
+ </div>
+ </div>
+ </div>
+ </Transition>
+ </ForwardRef(Collapse)>
+ </WithStyles(ForwardRef(Collapse))>
+ </div>
+ </ForwardRef(Paper)>
+ </WithStyles(ForwardRef(Paper))>
+ </ForwardRef(ExpansionPanel)>
+ </WithStyles(ForwardRef(ExpansionPanel))>
+ <WithStyles(ForwardRef(ExpansionPanel))
+ classes={
+ Object {
+ "root": "expansion-panel-root",
+ }
+ }
+ expanded={false}
+ key="1"
+ onChange={[Function]}
+ >
+ <ForwardRef(ExpansionPanel)
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "expanded": "Mui-expanded",
+ "root": "MuiExpansionPanel-root expansion-panel-root",
+ "rounded": "MuiExpansionPanel-rounded",
+ }
+ }
+ expanded={false}
+ onChange={[Function]}
+ >
+ <WithStyles(ForwardRef(Paper))
+ className="MuiExpansionPanel-root expansion-panel-root MuiExpansionPanel-rounded"
+ square={false}
+ >
+ <ForwardRef(Paper)
+ className="MuiExpansionPanel-root expansion-panel-root MuiExpansionPanel-rounded"
+ classes={
+ Object {
+ "elevation0": "MuiPaper-elevation0",
+ "elevation1": "MuiPaper-elevation1",
+ "elevation10": "MuiPaper-elevation10",
+ "elevation11": "MuiPaper-elevation11",
+ "elevation12": "MuiPaper-elevation12",
+ "elevation13": "MuiPaper-elevation13",
+ "elevation14": "MuiPaper-elevation14",
+ "elevation15": "MuiPaper-elevation15",
+ "elevation16": "MuiPaper-elevation16",
+ "elevation17": "MuiPaper-elevation17",
+ "elevation18": "MuiPaper-elevation18",
+ "elevation19": "MuiPaper-elevation19",
+ "elevation2": "MuiPaper-elevation2",
+ "elevation20": "MuiPaper-elevation20",
+ "elevation21": "MuiPaper-elevation21",
+ "elevation22": "MuiPaper-elevation22",
+ "elevation23": "MuiPaper-elevation23",
+ "elevation24": "MuiPaper-elevation24",
+ "elevation3": "MuiPaper-elevation3",
+ "elevation4": "MuiPaper-elevation4",
+ "elevation5": "MuiPaper-elevation5",
+ "elevation6": "MuiPaper-elevation6",
+ "elevation7": "MuiPaper-elevation7",
+ "elevation8": "MuiPaper-elevation8",
+ "elevation9": "MuiPaper-elevation9",
+ "outlined": "MuiPaper-outlined",
+ "root": "MuiPaper-root",
+ "rounded": "MuiPaper-rounded",
+ }
+ }
+ square={false}
+ >
+ <div
+ className="MuiPaper-root MuiExpansionPanel-root expansion-panel-root MuiExpansionPanel-rounded MuiPaper-elevation1 MuiPaper-rounded"
+ >
+ <WithStyles(ForwardRef(ExpansionPanelSummary))
+ aria-label="faq.accessibility.button_toggle_detail"
+ classes={
+ Object {
+ "content": "expansion-panel-content",
+ "root": "expansion-panel-summary small bold-text",
+ }
+ }
+ expandIcon={
+ <StyledIcon
+ icon="test-file-stub"
+ />
+ }
+ key=".0"
+ >
+ <ForwardRef(ExpansionPanelSummary)
+ aria-label="faq.accessibility.button_toggle_detail"
+ classes={
+ Object {
+ "content": "MuiExpansionPanelSummary-content expansion-panel-content",
+ "disabled": "Mui-disabled",
+ "expandIcon": "MuiExpansionPanelSummary-expandIcon",
+ "expanded": "Mui-expanded",
+ "focused": "Mui-focused",
+ "root": "MuiExpansionPanelSummary-root expansion-panel-summary small bold-text",
+ }
+ }
+ expandIcon={
+ <StyledIcon
+ icon="test-file-stub"
+ />
+ }
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-expanded={false}
+ aria-label="faq.accessibility.button_toggle_detail"
+ className="MuiExpansionPanelSummary-root expansion-panel-summary small bold-text"
+ component="div"
+ disableRipple={true}
+ disabled={false}
+ focusRipple={false}
+ onBlur={[Function]}
+ onClick={[Function]}
+ onFocusVisible={[Function]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-expanded={false}
+ aria-label="faq.accessibility.button_toggle_detail"
+ className="MuiExpansionPanelSummary-root expansion-panel-summary small bold-text"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="div"
+ disableRipple={true}
+ disabled={false}
+ focusRipple={false}
+ onBlur={[Function]}
+ onClick={[Function]}
+ onFocusVisible={[Function]}
+ >
+ <div
+ aria-disabled={false}
+ aria-expanded={false}
+ aria-label="faq.accessibility.button_toggle_detail"
+ className="MuiButtonBase-root MuiExpansionPanelSummary-root expansion-panel-summary small bold-text"
+ onBlur={[Function]}
+ onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ role="button"
+ tabIndex={0}
+ >
+ <div
+ className="MuiExpansionPanelSummary-content expansion-panel-content"
+ >
+ Comment accéder à mes données gaz ?
+ </div>
+ <WithStyles(ForwardRef(IconButton))
+ aria-hidden={true}
+ className="MuiExpansionPanelSummary-expandIcon"
+ component="div"
+ edge="end"
+ role={null}
+ tabIndex={null}
+ >
+ <ForwardRef(IconButton)
+ aria-hidden={true}
+ className="MuiExpansionPanelSummary-expandIcon"
+ classes={
+ Object {
+ "colorInherit": "MuiIconButton-colorInherit",
+ "colorPrimary": "MuiIconButton-colorPrimary",
+ "colorSecondary": "MuiIconButton-colorSecondary",
+ "disabled": "Mui-disabled",
+ "edgeEnd": "MuiIconButton-edgeEnd",
+ "edgeStart": "MuiIconButton-edgeStart",
+ "label": "MuiIconButton-label",
+ "root": "MuiIconButton-root",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ component="div"
+ edge="end"
+ role={null}
+ tabIndex={null}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-hidden={true}
+ centerRipple={true}
+ className="MuiIconButton-root MuiExpansionPanelSummary-expandIcon MuiIconButton-edgeEnd"
+ component="div"
+ disabled={false}
+ focusRipple={true}
+ role={null}
+ tabIndex={null}
+ >
+ <ForwardRef(ButtonBase)
+ aria-hidden={true}
+ centerRipple={true}
+ className="MuiIconButton-root MuiExpansionPanelSummary-expandIcon MuiIconButton-edgeEnd"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="div"
+ disabled={false}
+ focusRipple={true}
+ role={null}
+ tabIndex={null}
+ >
+ <div
+ aria-disabled={false}
+ aria-hidden={true}
+ className="MuiButtonBase-root MuiIconButton-root MuiExpansionPanelSummary-expandIcon MuiIconButton-edgeEnd"
+ onBlur={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ role={null}
+ tabIndex={null}
+ >
+ <span
+ className="MuiIconButton-label"
+ >
+ <StyledIcon
+ icon="test-file-stub"
+ >
+ <Icon
+ aria-hidden={true}
+ icon="test-file-stub"
+ size={16}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <svg
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ </span>
+ <NoSsr>
+ <WithStyles(memo)
+ center={true}
+ >
+ <ForwardRef(TouchRipple)
+ center={true}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </NoSsr>
+ </div>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(IconButton)>
+ </WithStyles(ForwardRef(IconButton))>
+ </div>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(ExpansionPanelSummary)>
+ </WithStyles(ForwardRef(ExpansionPanelSummary))>
+ <WithStyles(ForwardRef(Collapse))
+ in={false}
+ timeout="auto"
+ >
+ <ForwardRef(Collapse)
+ classes={
+ Object {
+ "container": "MuiCollapse-container",
+ "entered": "MuiCollapse-entered",
+ "hidden": "MuiCollapse-hidden",
+ "wrapper": "MuiCollapse-wrapper",
+ "wrapperInner": "MuiCollapse-wrapperInner",
+ }
+ }
+ in={false}
+ timeout="auto"
+ >
+ <Transition
+ addEndListener={[Function]}
+ appear={false}
+ enter={true}
+ exit={true}
+ in={false}
+ mountOnEnter={false}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ timeout={null}
+ unmountOnExit={false}
+ >
+ <div
+ className="MuiCollapse-container MuiCollapse-hidden"
+ style={
+ Object {
+ "minHeight": "0px",
+ }
+ }
+ >
+ <div
+ className="MuiCollapse-wrapper"
+ >
+ <div
+ className="MuiCollapse-wrapperInner"
+ >
+ <div
+ role="region"
+ >
+ <WithStyles(ForwardRef(ExpansionPanelDetails))
+ classes={
+ Object {
+ "root": "expansion-panel-details",
+ }
+ }
+ key=".1"
+ >
+ <ForwardRef(ExpansionPanelDetails)
+ classes={
+ Object {
+ "root": "MuiExpansionPanelDetails-root expansion-panel-details",
+ }
+ }
+ >
+ <div
+ className="MuiExpansionPanelDetails-root expansion-panel-details"
+ >
+ <div>
+ Rendez-vous dans la partie Options du service et cliquez sur le bouton "Se connecter au gaz". Suivez la procédure (en vous créant un compte GRDF si nécessaire). Une fois votre consentement donné, vos données de consommation seront récupérées.',
+ </div>
+ </div>
+ </ForwardRef(ExpansionPanelDetails)>
+ </WithStyles(ForwardRef(ExpansionPanelDetails))>
+ </div>
+ </div>
+ </div>
+ </div>
+ </Transition>
+ </ForwardRef(Collapse)>
+ </WithStyles(ForwardRef(Collapse))>
+ </div>
+ </ForwardRef(Paper)>
+ </WithStyles(ForwardRef(Paper))>
+ </ForwardRef(ExpansionPanel)>
+ </WithStyles(ForwardRef(ExpansionPanel))>
+ </div>
+ <div
+ className="faq-section"
+ key="1"
+ >
+ <div
+ className="text-16-normal-uppercase"
+ >
+ Contenu du service
+ </div>
+ <WithStyles(ForwardRef(ExpansionPanel))
+ classes={
+ Object {
+ "root": "expansion-panel-root",
+ }
+ }
+ expanded={false}
+ key="0"
+ onChange={[Function]}
+ >
+ <ForwardRef(ExpansionPanel)
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "expanded": "Mui-expanded",
+ "root": "MuiExpansionPanel-root expansion-panel-root",
+ "rounded": "MuiExpansionPanel-rounded",
+ }
+ }
+ expanded={false}
+ onChange={[Function]}
+ >
+ <WithStyles(ForwardRef(Paper))
+ className="MuiExpansionPanel-root expansion-panel-root MuiExpansionPanel-rounded"
+ square={false}
+ >
+ <ForwardRef(Paper)
+ className="MuiExpansionPanel-root expansion-panel-root MuiExpansionPanel-rounded"
+ classes={
+ Object {
+ "elevation0": "MuiPaper-elevation0",
+ "elevation1": "MuiPaper-elevation1",
+ "elevation10": "MuiPaper-elevation10",
+ "elevation11": "MuiPaper-elevation11",
+ "elevation12": "MuiPaper-elevation12",
+ "elevation13": "MuiPaper-elevation13",
+ "elevation14": "MuiPaper-elevation14",
+ "elevation15": "MuiPaper-elevation15",
+ "elevation16": "MuiPaper-elevation16",
+ "elevation17": "MuiPaper-elevation17",
+ "elevation18": "MuiPaper-elevation18",
+ "elevation19": "MuiPaper-elevation19",
+ "elevation2": "MuiPaper-elevation2",
+ "elevation20": "MuiPaper-elevation20",
+ "elevation21": "MuiPaper-elevation21",
+ "elevation22": "MuiPaper-elevation22",
+ "elevation23": "MuiPaper-elevation23",
+ "elevation24": "MuiPaper-elevation24",
+ "elevation3": "MuiPaper-elevation3",
+ "elevation4": "MuiPaper-elevation4",
+ "elevation5": "MuiPaper-elevation5",
+ "elevation6": "MuiPaper-elevation6",
+ "elevation7": "MuiPaper-elevation7",
+ "elevation8": "MuiPaper-elevation8",
+ "elevation9": "MuiPaper-elevation9",
+ "outlined": "MuiPaper-outlined",
+ "root": "MuiPaper-root",
+ "rounded": "MuiPaper-rounded",
+ }
+ }
+ square={false}
+ >
+ <div
+ className="MuiPaper-root MuiExpansionPanel-root expansion-panel-root MuiExpansionPanel-rounded MuiPaper-elevation1 MuiPaper-rounded"
+ >
+ <WithStyles(ForwardRef(ExpansionPanelSummary))
+ aria-label="faq.accessibility.button_toggle_detail"
+ classes={
+ Object {
+ "content": "expansion-panel-content",
+ "root": "expansion-panel-summary small bold-text",
+ }
+ }
+ expandIcon={
+ <StyledIcon
+ icon="test-file-stub"
+ />
+ }
+ key=".0"
+ >
+ <ForwardRef(ExpansionPanelSummary)
+ aria-label="faq.accessibility.button_toggle_detail"
+ classes={
+ Object {
+ "content": "MuiExpansionPanelSummary-content expansion-panel-content",
+ "disabled": "Mui-disabled",
+ "expandIcon": "MuiExpansionPanelSummary-expandIcon",
+ "expanded": "Mui-expanded",
+ "focused": "Mui-focused",
+ "root": "MuiExpansionPanelSummary-root expansion-panel-summary small bold-text",
+ }
+ }
+ expandIcon={
+ <StyledIcon
+ icon="test-file-stub"
+ />
+ }
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-expanded={false}
+ aria-label="faq.accessibility.button_toggle_detail"
+ className="MuiExpansionPanelSummary-root expansion-panel-summary small bold-text"
+ component="div"
+ disableRipple={true}
+ disabled={false}
+ focusRipple={false}
+ onBlur={[Function]}
+ onClick={[Function]}
+ onFocusVisible={[Function]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-expanded={false}
+ aria-label="faq.accessibility.button_toggle_detail"
+ className="MuiExpansionPanelSummary-root expansion-panel-summary small bold-text"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="div"
+ disableRipple={true}
+ disabled={false}
+ focusRipple={false}
+ onBlur={[Function]}
+ onClick={[Function]}
+ onFocusVisible={[Function]}
+ >
+ <div
+ aria-disabled={false}
+ aria-expanded={false}
+ aria-label="faq.accessibility.button_toggle_detail"
+ className="MuiButtonBase-root MuiExpansionPanelSummary-root expansion-panel-summary small bold-text"
+ onBlur={[Function]}
+ onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ role="button"
+ tabIndex={0}
+ >
+ <div
+ className="MuiExpansionPanelSummary-content expansion-panel-content"
+ >
+ Pourquoi les prix affichés sont-ils différents de ceux indiqués sur ma facture ?
+ </div>
+ <WithStyles(ForwardRef(IconButton))
+ aria-hidden={true}
+ className="MuiExpansionPanelSummary-expandIcon"
+ component="div"
+ edge="end"
+ role={null}
+ tabIndex={null}
+ >
+ <ForwardRef(IconButton)
+ aria-hidden={true}
+ className="MuiExpansionPanelSummary-expandIcon"
+ classes={
+ Object {
+ "colorInherit": "MuiIconButton-colorInherit",
+ "colorPrimary": "MuiIconButton-colorPrimary",
+ "colorSecondary": "MuiIconButton-colorSecondary",
+ "disabled": "Mui-disabled",
+ "edgeEnd": "MuiIconButton-edgeEnd",
+ "edgeStart": "MuiIconButton-edgeStart",
+ "label": "MuiIconButton-label",
+ "root": "MuiIconButton-root",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ component="div"
+ edge="end"
+ role={null}
+ tabIndex={null}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-hidden={true}
+ centerRipple={true}
+ className="MuiIconButton-root MuiExpansionPanelSummary-expandIcon MuiIconButton-edgeEnd"
+ component="div"
+ disabled={false}
+ focusRipple={true}
+ role={null}
+ tabIndex={null}
+ >
+ <ForwardRef(ButtonBase)
+ aria-hidden={true}
+ centerRipple={true}
+ className="MuiIconButton-root MuiExpansionPanelSummary-expandIcon MuiIconButton-edgeEnd"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="div"
+ disabled={false}
+ focusRipple={true}
+ role={null}
+ tabIndex={null}
+ >
+ <div
+ aria-disabled={false}
+ aria-hidden={true}
+ className="MuiButtonBase-root MuiIconButton-root MuiExpansionPanelSummary-expandIcon MuiIconButton-edgeEnd"
+ onBlur={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ role={null}
+ tabIndex={null}
+ >
+ <span
+ className="MuiIconButton-label"
+ >
+ <StyledIcon
+ icon="test-file-stub"
+ >
+ <Icon
+ aria-hidden={true}
+ icon="test-file-stub"
+ size={16}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <svg
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ </span>
+ <NoSsr>
+ <WithStyles(memo)
+ center={true}
+ >
+ <ForwardRef(TouchRipple)
+ center={true}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </NoSsr>
+ </div>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(IconButton)>
+ </WithStyles(ForwardRef(IconButton))>
+ </div>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(ExpansionPanelSummary)>
+ </WithStyles(ForwardRef(ExpansionPanelSummary))>
+ <WithStyles(ForwardRef(Collapse))
+ in={false}
+ timeout="auto"
+ >
+ <ForwardRef(Collapse)
+ classes={
+ Object {
+ "container": "MuiCollapse-container",
+ "entered": "MuiCollapse-entered",
+ "hidden": "MuiCollapse-hidden",
+ "wrapper": "MuiCollapse-wrapper",
+ "wrapperInner": "MuiCollapse-wrapperInner",
+ }
+ }
+ in={false}
+ timeout="auto"
+ >
+ <Transition
+ addEndListener={[Function]}
+ appear={false}
+ enter={true}
+ exit={true}
+ in={false}
+ mountOnEnter={false}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ timeout={null}
+ unmountOnExit={false}
+ >
+ <div
+ className="MuiCollapse-container MuiCollapse-hidden"
+ style={
+ Object {
+ "minHeight": "0px",
+ }
+ }
+ >
+ <div
+ className="MuiCollapse-wrapper"
+ >
+ <div
+ className="MuiCollapse-wrapperInner"
+ >
+ <div
+ role="region"
+ >
+ <WithStyles(ForwardRef(ExpansionPanelDetails))
+ classes={
+ Object {
+ "root": "expansion-panel-details",
+ }
+ }
+ key=".1"
+ >
+ <ForwardRef(ExpansionPanelDetails)
+ classes={
+ Object {
+ "root": "MuiExpansionPanelDetails-root expansion-panel-details",
+ }
+ }
+ >
+ <div
+ className="MuiExpansionPanelDetails-root expansion-panel-details"
+ >
+ <div>
+ <p>
+ Le prix de votre électricité ou de votre gaz dépend de l'offre choisie auprès de votre fournisseur. N’ayant pas accès à cette information, Ecolyo affiche un prix moyen par fluide.
+ </p>
+ <p>
+ Tarifs moyens retenus :
+ </p>
+ </div>
+ </div>
+ </ForwardRef(ExpansionPanelDetails)>
+ </WithStyles(ForwardRef(ExpansionPanelDetails))>
+ </div>
+ </div>
+ </div>
+ </div>
+ </Transition>
+ </ForwardRef(Collapse)>
+ </WithStyles(ForwardRef(Collapse))>
+ </div>
+ </ForwardRef(Paper)>
+ </WithStyles(ForwardRef(Paper))>
+ </ForwardRef(ExpansionPanel)>
+ </WithStyles(ForwardRef(ExpansionPanel))>
+ </div>
+ </div>
+ </div>
+</FAQContent>
+`;
diff --git a/src/components/FAQ/faqContent.scss b/src/components/FAQ/faqContent.scss
index cfb365464a29936aa0b26b6e15a68954d5127b29..c8cae55585fd727a36578775cf5514c5d21ec5b4 100644
--- a/src/components/FAQ/faqContent.scss
+++ b/src/components/FAQ/faqContent.scss
@@ -16,20 +16,30 @@
}
}
+.faq-spinner {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 100%;
+ @media #{$large-phone} {
+ min-height: inherit;
+ }
+}
+
.faq-section {
color: $grey-bright;
padding-top: 1rem;
- .faq-content-detail {
- padding-bottom: 0.6rem;
- .text-bold {
- font-weight: bold;
- }
- .text-underline {
- text-decoration: underline;
- }
- .spaceline {
- height: 0.6rem;
- display: block;
+ .expansion-panel-details {
+ div {
+ padding-bottom: 0.6rem;
+ p {
+ color: $grey-bright;
+ margin-block-start: 0;
+ margin-block-end: 0.6rem;
+ }
+ p:last-child {
+ margin-block-end: 0rem;
+ }
}
}
-}
\ No newline at end of file
+}
diff --git a/src/constants/config.json b/src/constants/config.json
index aca5acc83db86f7119f0a62604b3e050975ee3b7..d72bba6bcf30260ac6dcf84c9896b97eccd9f43e 100644
--- a/src/constants/config.json
+++ b/src/constants/config.json
@@ -4,6 +4,8 @@
"fluidTypeId": 0,
"name": "enedis",
"coefficient": 0.1558,
+
+ "startDate": "2021-08-01T00:00:00.000",
"dataDelayOffset": 3,
"konnectorConfig": {
"name": "Enedis",
@@ -17,6 +19,7 @@
"fluidTypeId": 1,
"name": "egl",
"coefficient": 0.00319,
+ "startDate": "2021-01-01T00:00:00.000",
"dataDelayOffset": 5,
"konnectorConfig": {
"name": "Eau du Grand Lyon",
@@ -30,6 +33,7 @@
"fluidTypeId": 2,
"name": "grdf",
"coefficient": 0.1121,
+ "startDate": "2021-10-01T00:00:00.000",
"dataDelayOffset": 5,
"konnectorConfig": {
"name": "GRDF",
diff --git a/src/constants/faq.json b/src/constants/faq.json
deleted file mode 100644
index 0bcd00b4ceefc731128bd11cd59d565d45ecbb2d..0000000000000000000000000000000000000000
--- a/src/constants/faq.json
+++ /dev/null
@@ -1,129 +0,0 @@
-[
- {
- "section": "Mes données",
- "questions": [
- {
- "summary": "Comment accéder à mes données électricité ?",
- "details": [
- "Rendez-vous dans la partie Options du service et cliquer sur le bouton \"Se connecter à l'électricité\". Suivez la procédure (en vous créant un compte Enedis si nécessaire). Une fois votre consentement donné, vos données de consommation seront récupérées."
- ]
- },
- {
- "summary": "Comment accéder à mes données gaz ?",
- "details": [
- "Rendez-vous dans la partie Options du service et cliquez sur le bouton \"Se connecter au gaz\". Suivez la procédure (en vous créant un compte GRDF si nécessaire). Une fois votre consentement donné, vos données de consommation seront récupérées."
- ]
- },
- {
- "summary": "Comment accéder à mes données eau ?",
- "details": [
- "Rendez-vous dans la partie Options du service et cliquez sur \"Se connecter à l'eau\". Entrez vos identifiants Eau du Grand Lyon. Vos données seront ainsi récupérées."
- ]
- },
- {
- "summary": "Mes données ne s'affichent pas. Que se passe-t-il ?",
- "details": [
- "En fonctionnement normal, vos données électricité arrivent à J+1 (le lendemain), vos données eau et gaz arrivent quant à elles 3 jours après (à J+3).",
- "Plusieurs raisons peuvent expliquer l'absence de données :",
- "- Le lien entre Ecolyo et le fournisseur de données est rompu. Une mise à jour de ce lien (en bas de la page) peut parfois résoudre ce problème.",
- "- Si la mise à jour a été effectuée mais que la donnée n'apparaît toujours pas, le souci vient du fournisseur de données (Enedis pour l'électricité, GRDF pour le gaz, Eau du Grand Lyon pour l'eau). Cela peut être un problème de transmission de données entre le compte et le système de données du partenaire, ou un problème sur votre compteur. Dans ce cas, le mieux est de contacter directement Enedis, GRDF ou Eau du Grand Lyon pour tenter de régler le problème avec eux. "
- ]
- },
- {
- "summary": "Pourquoi dois-je avoir un compte Enedis, GRDF ou Eau du Grand Lyon ?",
- "details": [
- "Nous avons fait le choix de passer par les gestionnaires de réseaux (Enedis pour l'électricité, GRDF pour le gaz et Eau du Grand Lyon pour l'eau). Ils sont en effet responsables de votre compteur, de la collecte des données et du partage de celles-ci. Ils ont les données brutes, ces mêmes données qui sont consolidées pour votre fournisseur d'énergie ou d'eau, celui-là même qui vous facture. Pour récupérer vos données, et afin que vous et vous seul y ait accès, il vous faut créer un compte chez ces gestionnaires de réseaux. Ce process n'est à réaliser que lors de première connexion."
- ]
- },
- {
- "summary": "Si je n'en ai pas, est-ce possible d'avoir des compteurs communicants (Linky, Gazpar, Téléo ?)",
- "details": [
- " - Linky, le compteur électricité est déployé sur 95% de notre territoire métropolitain. Si vous n'êtes pas encore équipé, vous pouvez contacter Enedis au 0 970 831 970 (prix d'un appel local) entre 8h et 17h pour convenir d'un rendez-vous.",
- " - Concernant Gazpar le compteur gaz, s'il n'est pas encore installé chez vous, vous pouvez vous renseigner sur le planning de déploiement du compteur à cette adresse : <a href=\"https://monespace.grdf.fr/compteur-gazpar-et-ma-commune\">https://monespace.grdf.fr/compteur-gazpar-et-ma-commune.</a>",
- " - Concernant Téléo, le compteur eau, si vous êtes en eau individualisé. En principe, vous devriez déjà avoir Téléo chez vous. Si vous êtes abonné et que vous n'êtes pas encore équipé, contactez le service client d'eau du Grand Lyon par téléphone au 09 69 39 69 99 (numéro cristal non surtaxé) pour obtenir l'installation d'un compteur communicant Téléo."
- ]
- },
- {
- "summary": "Qui a accès à mes données de consommation?",
- "details": [
- "Vos données privées de consommation d’énergie et d’eau sont récupérées, sauvegardées et stockées dans votre cloud personnel à votre initiative sans visibilité de la Métropole de Lyon sur leur contenu. Il en est de même pour les données privées de composition du logement et du foyer, fournies par vos soins. Elles restent également sans visibilité de la Métropole de Lyon sur leur contenu.",
- "Dans le cadre de l’évaluation et de l’amélioration du service, des données d’utilisation anonymisées sont cependant remontées à des fins d’exploitation statistiques. La récupération de ces statistiques anonymisées nous permettra de s’assurer du bon fonctionnement technique de la connexion à vos données de consommation ainsi que d’évaluer l’impact global en termes de baisse des consommations énergétiques de notre service (Plus d’informations sur la manière dont votre anonymat est bien préservé dans ce processus <a href=\" https://ecolyo.com/cloud_statistiques.html\">ici</a>)."
- ]
- },
- {
- "summary": "Comment supprimer mon consentement au partage de mes données (électricité, gaz ou eau) ?",
- "details": [
- "Dans un premier temps, vous pouvez supprimer le connecteur électricité, gaz ou eau dans la page Options du service afin de stopper le transfert de vos données vers notre service. Pour supprimer totalement votre consentement vous devez ensuite : ",
- " - pour l'électricité : contacter directement dataconnect@enedis.fr pour leur indiquer votre souhait de supprimer le consentement de partage des données avec notre service.",
- " - pour le gaz, rendez-vous dans votre espace GRDF (<a href=\"https://monespace.grdf.fr/\">https://monespace.grdf.fr/</a>) dans partie \"Suivi des consommations\" puis \"Données consultées\". Vous pouvez alors supprimer le consentement donné à notre service."
- ]
- }
- ]
- },
- {
- "section": "Contenu du service",
- "questions": [
- {
- "summary": "Pourquoi les prix affichés sont-ils différents de ceux indiqués sur ma facture ?",
- "details": [
- "Les données qui sont transmises au service par Enedis, GRDF ou Eau du Grand Lyon ne comprennent pas les données de prix de l'électricité, du gaz ou de l'eau. En effet ce prix est différent selon le fournisseur d'énergie auquel vous avez souscrit. Dans l'absence de cette donnée et pour cette version, un prix moyen pour chacun des fluides (électricité, gaz et eau) a été choisi. Le coût de l'abonnement et les taxes (qui correspondent par ailleurs à 66% de votre facture) ne sont pas inclus dans les prix présentés dans notre service.",
- "Tarifs moyens retenus dans le service : ",
- " - pour l'électricité 1 kWh d’électricité = 0,1558 €TTC (il correspond au tarif réglementé d’EDF au 1/08/2021 pour une puissance souscrite de 3 ou 6 kVA et hors offre heure pleine/heure creuse)",
- " - pour le gaz 1 kWh = 0,1121 €TTC (tarif réglementé de vente au 1/10/2021 pour un consommateur soutirant moins de 6 MWh par an)",
- " - pour l'eau, 1 litre d’eau = 0,00319 € TTC (prix constaté au 1/01/2021 pour un abonnement et une consommation de 120 m3/an sur la Métropole de Lyon)"
- ]
- },
- {
- "summary": "Est-ce la météo est prise en compte dans les données affichées ?",
- "details": [
- "La météo n'est pour l'instant pas prise en compte dans les données présentées. Nous réfléchissons à termes à une intégration des données de température extérieure. En effet, celles-ci influent fortement sur les comportements et donc les consommations aussi bien d'énergie en hiver que d'eau en été. Affaire à suivre pour notre service !"
- ]
- },
- {
- "summary": "Quelle est la source des écogestes ?",
- "details": [
- "Les écogestes présentés dans le service sont issus de guides préparé par le CLER - Réseau pour la transition énergétique ainsi que par l'ADEME (l'Agence de l'environnement et de la maîtrise de l'énergie). La source principale est le guide des 100 écogestes (version 2020-2021) produit par le CLER dans le cadre du programme DECLIC."
- ]
- },
- {
- "summary": "Qu'est-ce qu'un kWh ?",
- "details": [
- "Le kWh est l'unité de mesure correspondant à l'énergie consommée pendant une heure par un appareil d'une puissance de 1000 watts (1 kW). Avec 1 kWh, il est possible de … regarder la télévision pendant 3 à 5h (selon le modèle de télé), cuire un poulet au four thermostat 6 pendant 1h, vous servir d'un ordinateur au bureau pendant une demi-journée..."
- ]
- },
- {
- "summary": "Pourquoi dois-je renseigner mon profil dans la service ? Comment le modifier ? ",
- "details": [
- "Renseigner votre profil c'est profiter à la fois d'une comparaison de vos consommations avec les consommation d'un foyer vous ressemblant (allez jetez un œil dans la partie Analyse) mais aussi avoir accès à un tri personnalisé des écogestes dans la partie Ecogestes du service."
- ]
- },
- {
- "summary": "Comment sont choisis les écogestes personnalisés ?",
- "details": [
- "Les écogestes personnalisés sont aujourd'hui choisis en fonction des compteurs individuels que vous possédez (communicants ou non). Ils vous permettent d'agir sur ces consommations. D'autres modes de tri, davantage personnalisables seront proposés à l'avenir."
- ]
- }
- ]
- },
- {
- "section": "Autres infos",
- "questions": [
- {
- "summary": "Comment accéder plus facilement au service à l'avenir ?",
- "details": [
- "Pour retrouver facilement l'accès à Ecolyo à l'avenir, il suffit de vous créer un raccourci :",
- " - Sur mobile APPLE : Pour créer un raccourci sur votre écran d'accueil, ouvrez Ecolyo dans Safari et cliquez sur Partager (carré avec une flèche pointant vers le haut), en descendant dans le menu cliquez sur \"Sur l'écran d'accueil\" puis ajouter. Un raccourci d'Ecolyo sera alors présent (il ressemblera à une application comme une autre).",
- " - Sur mobile ANDROID : Une fois sur la page web du service, appuyez sur les trois petits points du menu en haut à droite. Sélectionnez \"Ajouter à l'écran d'accueil\". Nommez la page et appuyez sur \"Ajouter\". Un raccourci vers la page web est apparu sur l'écran d'accueil de votre smartphone.",
- " - Sur ordinateur : ajoutez classiquement Ecolyo dans les Favoris de votre navigateur préféré. Cela sera plus facile par la suite de retrouver notre service.",
- "Si un jour vous avez totalement perdu l'adresse d'accès à votre service, vous pouvez le retrouver en cliquant tout en bas sur le bouton \"Accéder à mon cloud personnel\" du site web Ecolyo.com"
- ]
- },
- {
- "summary": "Pour accéder à Ecolyo, j'ai dû me créer un cloud personnel Grand Lyon. Qu'est-ce ?",
- "details": [
- "Souvent le cloud personnel est réduit à un simple espace de stockage de documents mais il est bien plus que ça. C'est un espace individuel et sécurisé. Vous seul pouvez y accéder, personne d'autre. Dans le cloud vous avez deux types de services: les premiers sont des services qui vous permettent de récupérer vos données et les stocker dans cet espace. Vous avez aussi des services qui vous permettent de valoriser vos données pour qu'elles aient plus de sens pour vous (c'est le cas d'Ecolyo!). Si vous souhaitez en savoir plus sur votre cloud personnel cliquez ici (lien vers <a href=\"https://support.grandlyon.com/clouds-personnels-grand-lyon/\">https://support.grandlyon.com/clouds-personnels-grand-lyon/</a>)."
- ]
- }
- ]
- }
-]
diff --git a/src/locales/fr.json b/src/locales/fr.json
index de44887c7e18891afc2d9c6d1330b72b881b10b3..d30a514445d0415a10560b96c540ab71602fde44 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -282,10 +282,10 @@
"close": "Fermer la fenêtre",
"part1": "Le prix de votre électricité ou de votre gaz dépend de l'offre choisie auprès de votre fournisseur. N’ayant pas accès à cette information, Ecolyo affiche un prix moyen par fluide. ",
"part2": "Tarifs moyens retenus :",
- "list1": " : 1 kWh = 0,1558 €TTC (il correspond au tarif réglementé d’EDF au 1/08/2021 pour une puissance souscrite de 3 ou 6 kVA et hors offre heure pleine/heure creuse)",
- "list2": " : 1 kWh = 0,1121 €TTC (tarif réglementé de vente au 1/10/2021 pour un consommateur soutirant moins de 6 MWh par an)",
- "list3": " : 1 litre d’eau = 0,00319 € TTC (prix constaté au 1/01/2021 pour un abonnement et une consommation de 120 m3/an sur la Métropole de Lyon)",
- "part3": "À cela s'ajoute le coût de votre abonnement, le coût d'acheminement et les taxes qui représentent plus de 66% de votre facture."
+ "list1": " : 1 kWh = %{elecPrice} €TTC (il correspond au tarif réglementé d’EDF au %{elecPriceStartDate} pour une puissance souscrite de 3 ou 6 kVA et hors offre heure pleine/heure creuse)",
+ "list2": " : 1 kWh = %{gasPrice} €TTC (tarif réglementé de vente au %{gasPriceStartDate} pour un consommateur soutirant moins de 6 MWh par an)",
+ "list3": " : 1 litre d’eau = %{waterPrice} € TTC (prix constaté au %{waterPriceStartDate} pour un abonnement et une consommation de 120 m3/an sur la Métropole de Lyon)",
+ "part3": "Le coût de votre abonnement n'est pas pris en compte dans Ecolyo."
},
"release_notes_modal": {
"title": "Du nouveau sur Ecolyo !",
diff --git a/src/models/config.model.ts b/src/models/config.model.ts
index ac223c0e093442ccce2be18a3d0194b2ee792bbd..1a20aca95a1aead43e3caa664458385198b2089a 100644
--- a/src/models/config.model.ts
+++ b/src/models/config.model.ts
@@ -12,6 +12,7 @@ export interface FluidConfig {
fluidTypeId: number
name: string
coefficient: number
+ startDate: string
dataDelayOffset: number
konnectorConfig: KonnectorConfig
}
diff --git a/src/models/faq.model.ts b/src/models/faq.model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f44da78b3fc8e8f5941080ba65dea384f26a5627
--- /dev/null
+++ b/src/models/faq.model.ts
@@ -0,0 +1,9 @@
+export interface FAQQuestion {
+ summary: string
+ details: JSX.Element
+}
+
+export interface FAQSection {
+ section: string
+ questions: FAQQuestion[]
+}
diff --git a/src/models/index.ts b/src/models/index.ts
index caed855c2f7773265b6d7a9c465a91d84c6834bb..6fb7176aa260ffb85c8201544f0579f93dfb293a 100644
--- a/src/models/index.ts
+++ b/src/models/index.ts
@@ -8,7 +8,10 @@ export * from './datachart.model'
export * from './dataload.model'
export * from './duel.model'
export * from './ecogesture.model'
+export * from './exploration.model'
+export * from './faq.model'
export * from './fluid.model'
+export * from './fluidPrice.model'
export * from './global.model'
export * from './indicator.model'
export * from './konnector.model'
@@ -16,7 +19,6 @@ export * from './modal.model'
export * from './profile.model'
export * from './profileType.model'
export * from './quiz.model'
-export * from './exploration.model'
export * from './relation.model'
export * from './analysis.model'
export * from './timePeriod.model'
@@ -24,4 +26,3 @@ export * from './term.model'
export * from './trigger.model'
export * from './usageEvent.model'
export * from './userInstanceSettings.model'
-export * from './fluidPrice.model'
diff --git a/src/services/fluidsPrices.service.ts b/src/services/fluidsPrices.service.ts
index 30a8e354f0c7e1f540aaf1f6bb26ae49990ab15c..8e131cdfa17e3894591772d6e128701ddb294ee9 100644
--- a/src/services/fluidsPrices.service.ts
+++ b/src/services/fluidsPrices.service.ts
@@ -3,6 +3,7 @@ import { FLUIDPRICES_DOCTYPE } from 'doctypes'
import { FluidType } from 'enum/fluid.enum'
import { DateTime } from 'luxon'
import { FluidPrice } from 'models'
+import ConfigService from './fluidConfig.service'
export default class FluidPricesService {
private readonly _client: Client
@@ -43,4 +44,45 @@ export default class FluidPricesService {
}: QueryResult<FluidPrice[]> = await this._client.query(query)
return fluidsPrices[0]
}
+
+ /**
+ * Get current prices for all fluidTypes.
+ * @returns {FluidPrice[]}
+ */
+ public async getAllLastPrices(): Promise<FluidPrice[]> {
+ const query: QueryDefinition = Q(FLUIDPRICES_DOCTYPE)
+ .where({ endDate: { $eq: null } })
+ .limitBy(3)
+
+ const {
+ data: fluidsPrices,
+ }: QueryResult<FluidPrice[]> = await this._client.query(query)
+
+ // If some data is missing, recover it using default config
+ if (fluidsPrices.length !== 3) {
+ const configService = new ConfigService()
+ const fluidConfig = configService.getFluidConfig()
+ const recoveredFluidsPrices: FluidPrice[] = []
+
+ // Getting default fluid price
+ fluidConfig.forEach(config => {
+ recoveredFluidsPrices.push({
+ _id: '0',
+ fluidType: config.fluidTypeId,
+ price: config.coefficient,
+ startDate: config.startDate,
+ endDate: '',
+ })
+ })
+
+ // Replacing default prices if available
+ fluidsPrices.forEach(fluidPrice => {
+ recoveredFluidsPrices[fluidPrice.fluidType] = fluidPrice
+ })
+
+ return recoveredFluidsPrices
+ }
+
+ return fluidsPrices
+ }
}
diff --git a/tests/__mocks__/faq.mock.tsx b/tests/__mocks__/faq.mock.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..145c90a29efd7d12b2524d96a051d9f6552572dc
--- /dev/null
+++ b/tests/__mocks__/faq.mock.tsx
@@ -0,0 +1,52 @@
+/* eslint-disable react/no-unescaped-entities */
+import { FAQSection } from 'models'
+import React from 'react'
+
+export const faqData: FAQSection[] = [
+ {
+ section: 'Mes données',
+ questions: [
+ {
+ summary: 'Comment accéder à mes données électricité ?',
+ details: (
+ <div>
+ Rendez-vous dans la partie Options du service et cliquer sur le
+ bouton "Se connecter à l\'électricité". Suivez la procédure (en vous
+ créant un compte Enedis si nécessaire). Une fois votre consentement
+ donné, vos données de consommation seront récupérées.
+ </div>
+ ),
+ },
+ {
+ summary: 'Comment accéder à mes données gaz ?',
+ details: (
+ <div>
+ Rendez-vous dans la partie Options du service et cliquez sur le
+ bouton "Se connecter au gaz". Suivez la procédure (en vous créant un
+ compte GRDF si nécessaire). Une fois votre consentement donné, vos
+ données de consommation seront récupérées.',
+ </div>
+ ),
+ },
+ ],
+ },
+ {
+ section: 'Contenu du service',
+ questions: [
+ {
+ summary:
+ 'Pourquoi les prix affichés sont-ils différents de ceux indiqués sur ma facture ?',
+ details: (
+ <div>
+ <p>
+ Le prix de votre électricité ou de votre gaz dépend de l'offre
+ choisie auprès de votre fournisseur. N’ayant pas accès à cette
+ information, Ecolyo affiche un prix moyen par fluide.
+ </p>
+ <p>Tarifs moyens retenus :</p>
+ </div>
+ ),
+ },
+ ],
+ },
+]
diff --git a/tests/__mocks__/fluidPrice.mock.ts b/tests/__mocks__/fluidPrice.mock.ts
index c1212860ca4d083f8652bd1d560e6abefbd6f200..ad5ebb80648710f7f0ac02739c4533260ed63734 100644
--- a/tests/__mocks__/fluidPrice.mock.ts
+++ b/tests/__mocks__/fluidPrice.mock.ts
@@ -30,3 +30,27 @@ export const fluidPrices: FluidPrice[] = [
startDate: '2013-08-01T00:00:00.000Z',
},
]
+
+export const allFluidPrices: FluidPrice[] = [
+ {
+ _id: '03045ea1afecc7a86e5443a52e00b07d',
+ endDate: '',
+ fluidType: 0,
+ price: 0.1429,
+ startDate: '2020-08-01T00:00:00.000Z',
+ },
+ {
+ _id: '03045ea1afecc7a86e5443a52e00b07d',
+ endDate: '',
+ fluidType: 1,
+ price: 0.1529,
+ startDate: '2021-01-01T00:00:00.000Z',
+ },
+ {
+ _id: '03045ea1afecc7a86e5443a52e00b07d',
+ endDate: '',
+ fluidType: 2,
+ price: 0.1329,
+ startDate: '2021-10-10T00:00:00.000Z',
+ },
+]