From 08974a6f7745205b8b8d856ef75b3a89a4ed0803 Mon Sep 17 00:00:00 2001
From: "guilhem.carron" <gcarron@grandlyon.com>
Date: Wed, 13 Oct 2021 14:43:22 +0200
Subject: [PATCH] Add no data modal
---
src/assets/icons/ico/questionMark.svg | 3 +
.../DataloadConsumptionVisualizer.tsx | 3 -
.../ConsumptionVisualizer/DataloadNoValue.tsx | 32 ++++++--
.../ConsumptionVisualizer/NoDataModal.tsx | 73 +++++++++++++++++++
.../consumptionVisualizer.scss | 1 +
.../dataloadConsumptionVisualizer.scss | 10 ++-
.../lastDataConsumptionVisualizer.scss | 1 -
.../ConsumptionVisualizer/noDataModal.scss | 19 +++++
src/locales/fr.json | 6 ++
9 files changed, 137 insertions(+), 11 deletions(-)
create mode 100644 src/assets/icons/ico/questionMark.svg
create mode 100644 src/components/ConsumptionVisualizer/NoDataModal.tsx
create mode 100644 src/components/ConsumptionVisualizer/noDataModal.scss
diff --git a/src/assets/icons/ico/questionMark.svg b/src/assets/icons/ico/questionMark.svg
new file mode 100644
index 000000000..b633290c9
--- /dev/null
+++ b/src/assets/icons/ico/questionMark.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="41" viewBox="0 0 21 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 4.09723C0.637168 3.5251 1.31859 2.98987 2.04425 2.49156C2.78761 1.99325 3.58407 1.55953 4.43362 1.19041C5.30088 0.821293 6.23008 0.535225 7.22124 0.33221C8.23008 0.110737 9.30974 0 10.4602 0C12.0531 0 13.4956 0.230701 14.7876 0.692102C16.0797 1.13505 17.1858 1.781 18.1062 2.62998C19.0266 3.4605 19.7345 4.46635 20.2301 5.64754C20.7434 6.82872 21 8.14833 21 9.60635C21 11.009 20.8053 12.2271 20.4159 13.2606C20.0443 14.2757 19.5664 15.1616 18.9823 15.9183C18.4159 16.675 17.7876 17.3302 17.0973 17.8839C16.4071 18.4375 15.7522 18.9543 15.1327 19.4342C14.5133 19.914 13.9734 20.3939 13.5133 20.8737C13.0708 21.3351 12.7965 21.8519 12.6903 22.424L12.0266 26.3829H7.00885L6.50442 21.898C6.38053 21.0122 6.48673 20.2462 6.82301 19.6003C7.15929 18.9359 7.61062 18.336 8.17699 17.8008C8.74337 17.2471 9.37169 16.7211 10.062 16.2228C10.7699 15.7061 11.4248 15.1616 12.0266 14.5895C12.646 13.9989 13.1593 13.3437 13.5664 12.6239C13.9912 11.8857 14.2035 11.0182 14.2035 10.0216C14.2035 8.80351 13.7965 7.83457 12.9823 7.11479C12.1858 6.395 11.1239 6.03511 9.79646 6.03511C8.82301 6.03511 8 6.14585 7.32744 6.36732C6.67257 6.58879 6.10619 6.83795 5.62832 7.11479C5.15044 7.37317 4.74336 7.6131 4.40708 7.83457C4.07079 8.05604 3.75222 8.16678 3.45133 8.16678C2.77876 8.16678 2.27434 7.86226 1.93805 7.25321L0 4.09723ZM4.96461 36.5982C4.96461 35.9892 5.07079 35.4171 5.28318 34.8818C5.51327 34.3282 5.82302 33.8575 6.2124 33.47C6.60178 33.0639 7.05309 32.7502 7.56637 32.5287C8.09734 32.2888 8.67256 32.1688 9.29203 32.1688C9.8938 32.1688 10.4602 32.2888 10.9912 32.5287C11.5221 32.7502 11.9823 33.0639 12.3717 33.47C12.7611 33.8575 13.0619 34.3282 13.2743 34.8818C13.5044 35.4171 13.6195 35.9892 13.6195 36.5982C13.6195 37.2257 13.5044 37.8071 13.2743 38.3423C13.0619 38.8776 12.7611 39.3482 12.3717 39.7542C11.9823 40.1418 11.5221 40.4463 10.9912 40.6678C10.4602 40.8893 9.8938 41 9.29203 41C8.67256 41 8.09734 40.8893 7.56637 40.6678C7.05309 40.4463 6.60178 40.1418 6.2124 39.7542C5.82302 39.3482 5.51327 38.8776 5.28318 38.3423C5.07079 37.8071 4.96461 37.2257 4.96461 36.5982Z" fill="#E3B82A"/>
+</svg>
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
index 6ef84a788..a1fc6388c 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
@@ -43,9 +43,6 @@ const DataloadConsumptionVisualizer = ({
const [openEstimationModal, setOpenEstimationModal] = useState<boolean>(false)
const converterService = new ConverterService()
const dateChartService = new DateChartService()
- const { currentDatachart } = useSelector(
- (state: AppStore) => state.ecolyo.chart
- )
const emitNavEvent = useCallback(
async (targetPage: string) => {
diff --git a/src/components/ConsumptionVisualizer/DataloadNoValue.tsx b/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
index b24e350e7..e637396bb 100644
--- a/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useState } from 'react'
import './consumptionVisualizer.scss'
import { FluidType } from 'enum/fluid.enum'
import { Dataload } from 'models'
@@ -8,6 +8,7 @@ import { DateTime } from 'luxon'
import { useSelector } from 'react-redux'
import { AppStore } from 'store'
import ConfigService from 'services/fluidConfig.service'
+import NoDataModal from './NoDataModal'
interface DataloadNoValueProps {
dataload: Dataload
@@ -32,6 +33,10 @@ const DataloadNoValue: React.FC<DataloadNoValueProps> = ({
)
const configService = new ConfigService()
const fluidConfig = configService.getFluidConfig()
+ const [openNodataModal, setopenNodataModal] = useState<boolean>(false)
+ const toggleNoDataModal = useCallback(() => {
+ setopenNodataModal(prev => !prev)
+ }, [])
const handleToggleKonnectionCard = useCallback(() => {
setActive(true)
const app = document.querySelector('.app-content')
@@ -105,13 +110,28 @@ const DataloadNoValue: React.FC<DataloadNoValueProps> = ({
</div>
)}
{getDataState() === NoDataState.DATA_HOLE && (
- <div
- onClick={handleToggleKonnectionCard}
- className={`dataloadvisualizer-content error text-22-normal`}
- >
- {t('consumption_visualizer.no_data')}
+ <div className={`dataloadvisualizer-content text-22-normal`}>
+ <div className="dataloadvisualizer-section">
+ <div
+ className={`dataloadvisualizer-value ${FluidType[
+ fluidType
+ ].toLowerCase()} upper`}
+ >
+ {t('consumption_visualizer.no_data')}
+ </div>
+ <div
+ className="text-15-normal no-data-text"
+ onClick={toggleNoDataModal}
+ >
+ {t('consumption_visualizer.why_no_data')}
+ </div>
+ </div>
</div>
)}
+ <NoDataModal
+ open={openNodataModal}
+ handleCloseClick={toggleNoDataModal}
+ />
</>
)
}
diff --git a/src/components/ConsumptionVisualizer/NoDataModal.tsx b/src/components/ConsumptionVisualizer/NoDataModal.tsx
new file mode 100644
index 000000000..f6c64f7a1
--- /dev/null
+++ b/src/components/ConsumptionVisualizer/NoDataModal.tsx
@@ -0,0 +1,73 @@
+import React from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Dialog from '@material-ui/core/Dialog'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import QuestionIcon from 'assets/icons/ico/questionMark.svg'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import { Button, IconButton } from '@material-ui/core'
+import './noDataModal.scss'
+
+interface NoDataModalProps {
+ open: boolean
+ handleCloseClick: () => void
+}
+
+const NoDataModal: React.FC<NoDataModalProps> = ({
+ open,
+ handleCloseClick,
+}: NoDataModalProps) => {
+ const { t } = useI18n()
+
+ return (
+ <Dialog
+ open={open}
+ onClose={handleCloseClick}
+ 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={handleCloseClick}
+ >
+ <Icon icon={CloseIcon} size={16} />
+ </IconButton>
+ <div className="nodata-modal">
+ <div className="question-mark">
+ <Icon icon={QuestionIcon} size={36} />
+ </div>
+
+ <div className="text-20-normal title">
+ {t('consumption_visualizer.why_no_data')}
+ </div>
+ <div className="text-16-normal">
+ {t('consumption_visualizer.dataModal.list_title')}
+ </div>
+ <div className="text-16-normal">
+ {t('consumption_visualizer.dataModal.item1')}
+ </div>
+ <div className="text-16-normal">
+ {t('consumption_visualizer.dataModal.item2')}
+ </div>
+ <Button
+ aria-label={t('ecogesture_info_modal.button_close')}
+ onClick={handleCloseClick}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-16-bold',
+ }}
+ >
+ {t('ecogesture_info_modal.button_close')}
+ </Button>
+ </div>
+ </Dialog>
+ )
+}
+
+export default NoDataModal
diff --git a/src/components/ConsumptionVisualizer/consumptionVisualizer.scss b/src/components/ConsumptionVisualizer/consumptionVisualizer.scss
index 4b5fc3f8a..d9b772b79 100644
--- a/src/components/ConsumptionVisualizer/consumptionVisualizer.scss
+++ b/src/components/ConsumptionVisualizer/consumptionVisualizer.scss
@@ -5,6 +5,7 @@
display: flex;
flex-direction: column;
align-items: center;
+ padding-bottom: 1rem;
@media #{$large-phone} {
width: 100%;
}
diff --git a/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss b/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss
index 097e91896..d7fe9d5b8 100644
--- a/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss
+++ b/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss
@@ -2,7 +2,7 @@
@import 'src/styles/base/breakpoint';
.dataloadvisualizer-root {
- min-height: 4rem;
+ min-height: 5rem;
display: flex;
align-items: center;
}
@@ -23,6 +23,12 @@
display: flex;
flex-direction: column;
align-items: center;
+ .no-data-text {
+ cursor: pointer;
+ color: $grey-bright;
+ border-bottom: solid 1px $grey-bright;
+ margin-top: 1rem;
+ }
&.dataloadvisualizer-section-left {
align-items: flex-end;
padding: 0.5rem 0.5rem;
@@ -94,6 +100,8 @@
.dataloadvisualizer-euro {
display: flex;
flex-direction: row;
+ min-height: 2rem;
+ align-items: center;
.dataloadvisualizer-euro-link {
text-decoration: none;
color: transparent;
diff --git a/src/components/ConsumptionVisualizer/lastDataConsumptionVisualizer.scss b/src/components/ConsumptionVisualizer/lastDataConsumptionVisualizer.scss
index 60b8e14e2..b2dbc9723 100644
--- a/src/components/ConsumptionVisualizer/lastDataConsumptionVisualizer.scss
+++ b/src/components/ConsumptionVisualizer/lastDataConsumptionVisualizer.scss
@@ -4,6 +4,5 @@
border: none;
background: none;
color: $grey-bright;
- margin-bottom: 1.5rem;
text-decoration: underline;
}
diff --git a/src/components/ConsumptionVisualizer/noDataModal.scss b/src/components/ConsumptionVisualizer/noDataModal.scss
new file mode 100644
index 000000000..f2e825050
--- /dev/null
+++ b/src/components/ConsumptionVisualizer/noDataModal.scss
@@ -0,0 +1,19 @@
+@import 'src/styles/base/color';
+
+.nodata-modal {
+ padding: 0.5rem;
+ color: $grey-bright;
+ div {
+ margin: 0.5rem 0;
+ line-height: 1.3;
+ }
+ .question-mark {
+ text-align: center;
+ }
+ .title {
+ color: $gold-shadow;
+ font-weight: bold;
+ text-align: center;
+ margin: 1rem 0;
+ }
+}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 228e9df62..35d2e1000 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -239,11 +239,17 @@
"consumption_visualizer": {
"missing_data": "Données manquantes",
"no_data": "Pas de données",
+ "why_no_data": "Pourquoi n'ai-je pas de données ?",
"last_data": "Dernières données",
"last_valid_data": "Dernières données valides",
"data_to_come": "à venir",
"aie": "Aïe !",
"estimated": "estimés",
+ "dataModal": {
+ "list_title": "2 raisons possibles :",
+ "item1": "- 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.",
+ "item2": "- la mise à jour a été effectuée mais les données n'apparaîssent toujours pas : le soucis vient du fournisseur de données (Enedis pour l'électricité, GRDF pour le gaz, Eau du Grand Lyon pour l'eau). Cela peut-être dû à un problème technique et le mieux est de contacter directement votre fournisseur pour tenter de régler le problème avec eux."
+ },
"modal": {
"window_title": "info estimation des prix",
"title": "Comment sont estimés les prix ?",
--
GitLab