From a63b2de45f9af41b5089467390760221f8797599 Mon Sep 17 00:00:00 2001
From: "guilhem.carron" <gcarron@grandlyon.com>
Date: Fri, 8 Oct 2021 09:50:10 +0200
Subject: [PATCH] feat(conso): Rework fluid navigation
- Move Konnectors from options to Consumption view
- Merged singleFluidView and homeView into ConsumptionView
- Add Fluid buttons navigation
- Remove FluidCard and AddKonnectorCard
- Add conditionnal render for multifluid view
---
src/assets/icons/visu/disconnected-grey.svg | 4 +
src/assets/icons/visu/disconnected.svg | 4 +
src/assets/icons/visu/elec-grey.svg | 4 +
src/assets/icons/visu/gas-grey.svg | 6 +
src/assets/icons/visu/multi-grey.svg | 13 ++
src/assets/icons/visu/multi-icon.svg | 27 ----
src/assets/icons/visu/multi.svg | 30 ++++
src/assets/icons/visu/notif_error.svg | 18 +++
src/assets/icons/visu/water-grey.svg | 4 +
.../Analysis/AnalysisConsumption.tsx | 1 +
.../Analysis/AnalysisErrorModal.tsx | 6 +-
src/components/Analysis/AnalysisView.spec.tsx | 4 +
src/components/Connection/ConnectionForm.tsx | 21 ++-
.../Connection/ConnectionFormLogin.tsx | 2 +-
.../Connection/ConnectionFormOAuth.tsx | 5 +-
src/components/Connection/connectionForm.scss | 25 ++++
.../Connection/connectionFormLogin.scss | 3 +-
.../Connection/connectionFormOAuth.scss | 6 +
.../ConsumptionVisualizer.tsx | 1 -
.../DataloadConsumptionVisualizer.tsx | 65 +++++----
.../dataloadConsumptionVisualizer.scss | 3 -
.../DateNavigator/DateNavigator.tsx | 19 ++-
.../DateNavigator/datenavigator.scss | 2 +-
src/components/FluidChart/FluidChart.tsx | 7 +-
src/components/Header/header.scss | 7 +-
src/components/Home/ConsumptionDetails.tsx | 58 +-------
.../ConsumptionView.spec.tsx} | 90 +++++++++---
src/components/Home/ConsumptionView.tsx | 107 ++++++++++++++
src/components/Home/FluidButton.spec.tsx | 67 +++++++++
src/components/Home/FluidButton.tsx | 72 ++++++++++
src/components/Home/FluidButtons.spec.tsx | 37 +++++
src/components/Home/FluidButtons.tsx | 33 +++++
src/components/Home/HomeView.spec.tsx | 114 ---------------
src/components/Home/HomeView.tsx | 78 -----------
.../__snapshots__/FluidButton.spec.tsx.snap | 21 +++
.../__snapshots__/FluidButtons.spec.tsx.snap | 20 +++
src/components/Home/consumptionDetails.scss | 1 -
src/components/Home/consumptionView.scss | 24 ++++
src/components/Home/fluidButtons.scss | 38 +++++
src/components/Home/homeView.scss | 12 --
.../HomeCards/AddKonnectorCard.spec.tsx | 39 ------
src/components/HomeCards/AddKonnectorCard.tsx | 44 ------
src/components/HomeCards/FluidCard.spec.tsx | 27 ----
src/components/HomeCards/FluidCard.tsx | 54 --------
.../AddKonnectorCard.spec.tsx.snap | 20 ---
.../__snapshots__/FluidCard.spec.tsx.snap | 20 ---
.../HomeCards/addKonnectorCard.scss | 14 --
src/components/HomeCards/fluidCard.scss | 21 ---
.../Konnector/KonnectorViewerCard.tsx | 130 +++++++++---------
.../Konnector/KonnectorViewerList.tsx | 54 +++++---
.../Konnector/konnectorViewerList.scss | 18 ++-
src/components/Options/OptionsView.tsx | 2 -
.../__snapshots__/OptionsView.spec.tsx.snap | 3 -
.../FluidPerformanceIndicator.tsx | 8 +-
src/components/Routes/Routes.tsx | 22 +--
.../SingleFluid/SingleFluidView.tsx | 81 -----------
.../SingleFluid/singleFluidView.scss | 12 --
.../TotalConsumption.spec.tsx | 0
.../TotalConsumption.tsx | 0
.../TotalConsumption.spec.tsx.snap | 0
.../totalConsumption.scss | 0
src/locales/fr.json | 10 +-
src/styles/base/_layout.scss | 5 -
src/utils/picto.ts | 57 +++++++-
src/utils/utils.ts | 29 +++-
65 files changed, 911 insertions(+), 818 deletions(-)
create mode 100644 src/assets/icons/visu/disconnected-grey.svg
create mode 100644 src/assets/icons/visu/disconnected.svg
create mode 100644 src/assets/icons/visu/elec-grey.svg
create mode 100644 src/assets/icons/visu/gas-grey.svg
create mode 100644 src/assets/icons/visu/multi-grey.svg
delete mode 100644 src/assets/icons/visu/multi-icon.svg
create mode 100644 src/assets/icons/visu/multi.svg
create mode 100644 src/assets/icons/visu/notif_error.svg
create mode 100644 src/assets/icons/visu/water-grey.svg
create mode 100644 src/components/Connection/connectionForm.scss
rename src/components/{SingleFluid/SingleFluidView.spec.tsx => Home/ConsumptionView.spec.tsx} (51%)
create mode 100644 src/components/Home/ConsumptionView.tsx
create mode 100644 src/components/Home/FluidButton.spec.tsx
create mode 100644 src/components/Home/FluidButton.tsx
create mode 100644 src/components/Home/FluidButtons.spec.tsx
create mode 100644 src/components/Home/FluidButtons.tsx
delete mode 100644 src/components/Home/HomeView.spec.tsx
delete mode 100644 src/components/Home/HomeView.tsx
create mode 100644 src/components/Home/__snapshots__/FluidButton.spec.tsx.snap
create mode 100644 src/components/Home/__snapshots__/FluidButtons.spec.tsx.snap
create mode 100644 src/components/Home/consumptionView.scss
create mode 100644 src/components/Home/fluidButtons.scss
delete mode 100644 src/components/Home/homeView.scss
delete mode 100644 src/components/HomeCards/AddKonnectorCard.spec.tsx
delete mode 100644 src/components/HomeCards/AddKonnectorCard.tsx
delete mode 100644 src/components/HomeCards/FluidCard.spec.tsx
delete mode 100644 src/components/HomeCards/FluidCard.tsx
delete mode 100644 src/components/HomeCards/__snapshots__/AddKonnectorCard.spec.tsx.snap
delete mode 100644 src/components/HomeCards/__snapshots__/FluidCard.spec.tsx.snap
delete mode 100644 src/components/HomeCards/addKonnectorCard.scss
delete mode 100644 src/components/HomeCards/fluidCard.scss
delete mode 100644 src/components/SingleFluid/SingleFluidView.tsx
delete mode 100644 src/components/SingleFluid/singleFluidView.scss
rename src/components/{HomeCards => TotalConsumption}/TotalConsumption.spec.tsx (100%)
rename src/components/{HomeCards => TotalConsumption}/TotalConsumption.tsx (100%)
rename src/components/{HomeCards => TotalConsumption}/__snapshots__/TotalConsumption.spec.tsx.snap (100%)
rename src/components/{HomeCards => TotalConsumption}/totalConsumption.scss (100%)
diff --git a/src/assets/icons/visu/disconnected-grey.svg b/src/assets/icons/visu/disconnected-grey.svg
new file mode 100644
index 000000000..12836c717
--- /dev/null
+++ b/src/assets/icons/visu/disconnected-grey.svg
@@ -0,0 +1,4 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5751 7.67132C10.1977 8.94632 8.31917 10.9853 7.24286 13.459C6.16654 15.9328 5.95521 18.6971 6.64295 21.3057C7.3307 23.9144 8.8774 26.2152 11.0334 27.8368C13.1895 29.4584 15.829 30.3062 18.5261 30.2433C21.2231 30.1805 23.8203 29.2106 25.8984 27.4904C27.9766 25.7701 29.4144 23.3997 29.9799 20.7619C30.5454 18.124 30.2055 15.3726 29.0151 12.9516C27.8247 10.5307 25.8533 8.58147 23.419 7.41861" stroke="#7B7B7B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="17.2466" y="4.24658" width="2" height="13" rx="1" fill="#7B7B7B"/>
+</svg>
diff --git a/src/assets/icons/visu/disconnected.svg b/src/assets/icons/visu/disconnected.svg
new file mode 100644
index 000000000..3dcc63617
--- /dev/null
+++ b/src/assets/icons/visu/disconnected.svg
@@ -0,0 +1,4 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5751 7.67132C10.1977 8.94632 8.31917 10.9853 7.24286 13.459C6.16654 15.9328 5.95521 18.6971 6.64295 21.3057C7.3307 23.9144 8.8774 26.2152 11.0334 27.8368C13.1895 29.4584 15.829 30.3062 18.5261 30.2433C21.2231 30.1805 23.8203 29.2106 25.8984 27.4904C27.9766 25.7701 29.4144 23.3997 29.9799 20.7619C30.5454 18.124 30.2055 15.3726 29.0151 12.9516C27.8247 10.5307 25.8533 8.58147 23.419 7.41861" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="17.2466" y="4.24658" width="2" height="13" rx="1" fill="white"/>
+</svg>
diff --git a/src/assets/icons/visu/elec-grey.svg b/src/assets/icons/visu/elec-grey.svg
new file mode 100644
index 000000000..a18d88a66
--- /dev/null
+++ b/src/assets/icons/visu/elec-grey.svg
@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="15.0001" cy="14.9999" r="14.1364" fill="#121212" stroke="#7B7B7B"/>
+<path d="M0.681885 15.5114L4.09098 18.2386L6.81825 13.4659L10.2273 20.9659L14.3182 9.375L17.7273 20.2841L21.1364 12.1023L24.3752 19.5181L27.2728 14.6693L29.3182 17.0455" stroke="#7B7B7B"/>
+</svg>
diff --git a/src/assets/icons/visu/gas-grey.svg b/src/assets/icons/visu/gas-grey.svg
new file mode 100644
index 000000000..01f147596
--- /dev/null
+++ b/src/assets/icons/visu/gas-grey.svg
@@ -0,0 +1,6 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="14.9999" cy="14.9999" r="14.1364" fill="#121212" stroke="#7B7B7B"/>
+<path d="M10.2273 19.5908C12.0096 19.5908 13.4545 18.1459 13.4545 16.3635C13.4545 14.5811 12.0096 13.1362 10.2273 13.1362C8.4449 13.1362 7 14.5811 7 16.3635C7 18.1459 8.4449 19.5908 10.2273 19.5908Z" fill="#121212" stroke="#7B7B7B"/>
+<path d="M17.0453 23.6816C18.0745 23.6816 18.9089 22.8472 18.9089 21.818C18.9089 20.7887 18.0745 19.9543 17.0453 19.9543C16.016 19.9543 15.1816 20.7887 15.1816 21.818C15.1816 22.8472 16.016 23.6816 17.0453 23.6816Z" fill="#121212" stroke="#7B7B7B"/>
+<path d="M16.3635 16.8636C19.2756 16.8636 21.6363 14.5029 21.6363 11.5908C21.6363 8.6788 19.2756 6.31812 16.3635 6.31812C13.4515 6.31812 11.0908 8.6788 11.0908 11.5908C11.0908 14.5029 13.4515 16.8636 16.3635 16.8636Z" fill="#121212" stroke="#7B7B7B"/>
+</svg>
diff --git a/src/assets/icons/visu/multi-grey.svg b/src/assets/icons/visu/multi-grey.svg
new file mode 100644
index 000000000..15ffda8d5
--- /dev/null
+++ b/src/assets/icons/visu/multi-grey.svg
@@ -0,0 +1,13 @@
+<svg width="42" height="40" viewBox="0 0 42 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="28.9091" cy="26.9091" r="11.9091" fill="#121212" stroke="#121212" stroke-width="2"/>
+<circle cx="28.9999" cy="26.9999" r="11.4091" fill="#121212" stroke="#7B7B7B"/>
+<circle cx="25.1818" cy="28.0908" r="2.68182" fill="#121212" stroke="#7B7B7B"/>
+<path d="M30.6363 34.0453C31.515 34.0453 32.2272 33.3331 32.2272 32.4544C32.2272 31.5758 31.515 30.8635 30.6363 30.8635C29.7577 30.8635 29.0454 31.5758 29.0454 32.4544C29.0454 33.3331 29.7577 34.0453 30.6363 34.0453Z" fill="#121212" stroke="#7B7B7B"/>
+<path d="M30.0909 28.5907C32.4758 28.5907 34.4091 26.6574 34.4091 24.2725C34.4091 21.8877 32.4758 19.9543 30.0909 19.9543C27.706 19.9543 25.7727 21.8877 25.7727 24.2725C25.7727 26.6574 27.706 28.5907 30.0909 28.5907Z" fill="#121212" stroke="#7B7B7B"/>
+<circle cx="12.9091" cy="26.9091" r="11.9091" fill="#121212" stroke="#121212" stroke-width="2"/>
+<circle cx="12.9999" cy="26.9999" r="11.4091" fill="#121212" stroke="#7B7B7B"/>
+<path d="M2.09082 30.5311C2.73743 28.7529 4.90358 25.1965 8.39528 25.1965C12.7599 25.1965 12.7599 30.5311 17.1245 30.5311C20.6162 30.5311 21.9741 26.6514 23.914 25.6815" stroke="#7B7B7B"/>
+<circle cx="20.9999" cy="12.9999" r="11.9091" fill="#121212" stroke="#121212" stroke-width="2"/>
+<circle cx="20.9999" cy="12.9999" r="11.4091" fill="#121212" stroke="#7B7B7B"/>
+<path d="M9.54541 13.4091L12.2727 15.5909L14.4545 11.7727L17.1818 17.7727L20.4545 8.5L23.1818 17.2273L25.909 10.6818L28.5 16.6145L30.8181 12.7354L32.4545 14.6364" stroke="#7B7B7B"/>
+</svg>
diff --git a/src/assets/icons/visu/multi-icon.svg b/src/assets/icons/visu/multi-icon.svg
deleted file mode 100644
index a3e8ba505..000000000
--- a/src/assets/icons/visu/multi-icon.svg
+++ /dev/null
@@ -1,27 +0,0 @@
-<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<circle cx="24.0383" cy="13.4612" r="10.9895" fill="#121212" stroke="#D87B39"/>
-<path d="M13.0244 13.8541L15.6468 15.952L17.7447 12.2806L20.3671 18.0499L23.5139 9.13379L26.1363 17.5254L28.7587 11.2317L31.25 16.9361L33.479 13.2063L35.0524 15.0341" stroke="#D87B39"/>
-</g>
-<g clip-path="url(#clip1)">
-<path d="M12.5003 46.5659C18.5696 46.5659 23.4898 41.6458 23.4898 35.5764C23.4898 29.5071 18.5696 24.5869 12.5003 24.5869C6.43091 24.5869 1.51074 29.5071 1.51074 35.5764C1.51074 41.6458 6.43091 46.5659 12.5003 46.5659Z" fill="#121212" stroke="#3A98EC"/>
-<path d="M2.01074 38.9721C2.63248 37.2624 4.71532 33.8428 8.07273 33.8428C12.2695 33.8428 12.2695 38.9721 16.4662 38.9721C19.8237 38.9721 21.1293 35.2417 22.9945 34.3091" stroke="#3A98EC"/>
-</g>
-<g clip-path="url(#clip2)">
-<path d="M37.5003 46.5659C43.5696 46.5659 48.4898 41.6458 48.4898 35.5764C48.4898 29.5071 43.5696 24.5869 37.5003 24.5869C31.4309 24.5869 26.5107 29.5071 26.5107 35.5764C26.5107 41.6458 31.4309 46.5659 37.5003 46.5659Z" fill="#121212" stroke="#45D1B8"/>
-<path d="M33.8293 39.2231C35.2641 39.2231 36.4272 38.06 36.4272 36.6252C36.4272 35.1905 35.2641 34.0273 33.8293 34.0273C32.3946 34.0273 31.2314 35.1905 31.2314 36.6252C31.2314 38.06 32.3946 39.2231 33.8293 39.2231Z" fill="#121212" stroke="#45D1B8"/>
-<path d="M39.0734 42.3704C39.9288 42.3704 40.6223 41.6769 40.6223 40.8214C40.6223 39.9659 39.9288 39.2725 39.0734 39.2725C38.2179 39.2725 37.5244 39.9659 37.5244 40.8214C37.5244 41.6769 38.2179 42.3704 39.0734 42.3704Z" fill="#121212" stroke="#45D1B8"/>
-<path d="M38.5493 37.1259C40.853 37.1259 42.7206 35.2583 42.7206 32.9545C42.7206 30.6508 40.853 28.7832 38.5493 28.7832C36.2455 28.7832 34.3779 30.6508 34.3779 32.9545C34.3779 35.2583 36.2455 37.1259 38.5493 37.1259Z" fill="#121212" stroke="#45D1B8"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<rect width="23.0769" height="23.0769" fill="white" transform="translate(12.5 1.92285)"/>
-</clipPath>
-<clipPath id="clip1">
-<rect width="23.0769" height="23.0769" fill="white" transform="translate(0.961914 24.0381)"/>
-</clipPath>
-<clipPath id="clip2">
-<rect width="23.0769" height="23.0769" fill="white" transform="translate(25.9619 24.0381)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/assets/icons/visu/multi.svg b/src/assets/icons/visu/multi.svg
new file mode 100644
index 000000000..203fdbba1
--- /dev/null
+++ b/src/assets/icons/visu/multi.svg
@@ -0,0 +1,30 @@
+<svg width="42" height="41" viewBox="0 0 42 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="28.9091" cy="27.4091" r="11.9091" fill="#121212" stroke="#121212" stroke-width="2"/>
+<g clip-path="url(#clip0)">
+<circle cx="28.9999" cy="27.4999" r="11.4091" fill="#121212" stroke="#45D1B8"/>
+<circle cx="25.1818" cy="28.591" r="2.68182" fill="#121212" stroke="#45D1B8"/>
+<path d="M30.6363 34.5456C31.515 34.5456 32.2272 33.8333 32.2272 32.9547C32.2272 32.076 31.515 31.3638 30.6363 31.3638C29.7577 31.3638 29.0454 32.076 29.0454 32.9547C29.0454 33.8333 29.7577 34.5456 30.6363 34.5456Z" fill="#121212" stroke="#45D1B8"/>
+<path d="M30.0909 29.091C32.4758 29.091 34.4091 27.1576 34.4091 24.7728C34.4091 22.3879 32.4758 20.4546 30.0909 20.4546C27.706 20.4546 25.7727 22.3879 25.7727 24.7728C25.7727 27.1576 27.706 29.091 30.0909 29.091Z" fill="#121212" stroke="#45D1B8"/>
+</g>
+<circle cx="12.9091" cy="27.4091" r="11.9091" fill="#121212" stroke="#121212" stroke-width="2"/>
+<g clip-path="url(#clip1)">
+<circle cx="12.9999" cy="27.4999" r="11.4091" fill="#121212" stroke="#3A98EC"/>
+<path d="M2.09082 31.0308C2.73743 29.2527 4.90358 25.6963 8.39528 25.6963C12.7599 25.6963 12.7599 31.0308 17.1245 31.0308C20.6162 31.0308 21.9741 27.1512 23.914 26.1812" stroke="#3A98EC"/>
+</g>
+<circle cx="20.9999" cy="13.4999" r="11.9091" fill="#121212" stroke="#121212" stroke-width="2"/>
+<g clip-path="url(#clip2)">
+<circle cx="20.9999" cy="13.4999" r="11.4091" fill="#121212" stroke="#D87B39"/>
+<path d="M9.54541 13.9091L12.2727 16.0909L14.4545 12.2727L17.1818 18.2727L20.4545 9L23.1818 17.7273L25.909 11.1818L28.5 17.1145L30.8181 13.2354L32.4545 15.1364" stroke="#D87B39"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="24" height="24" fill="white" transform="translate(17 15.5)"/>
+</clipPath>
+<clipPath id="clip1">
+<rect width="24" height="24" fill="white" transform="translate(1 15.5)"/>
+</clipPath>
+<clipPath id="clip2">
+<rect width="24" height="24" fill="white" transform="translate(9 1.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/visu/notif_error.svg b/src/assets/icons/visu/notif_error.svg
new file mode 100644
index 000000000..bf80ae683
--- /dev/null
+++ b/src/assets/icons/visu/notif_error.svg
@@ -0,0 +1,18 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<circle cx="13" cy="11" r="11" fill="#D24444"/>
+<circle cx="13" cy="11" r="10.5" stroke="white"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.114 11.3118L9.03405 14.3917L9.98387 15.3416L13.0638 12.2616L16.3715 15.5692L17.3213 14.6194L14.0137 11.3118L17.3756 7.94982L16.4258 7L13.0638 10.362L9.92956 7.22768L8.97974 8.1775L12.114 11.3118Z" fill="white"/>
+<defs>
+<filter id="filter0_d" x="0" y="0" width="26" height="26" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/assets/icons/visu/water-grey.svg b/src/assets/icons/visu/water-grey.svg
new file mode 100644
index 000000000..353df1419
--- /dev/null
+++ b/src/assets/icons/visu/water-grey.svg
@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="14.9999" cy="14.9999" r="14.1364" fill="#121212" stroke="#7B7B7B"/>
+<path d="M1.36353 19.4138C2.17179 17.1911 4.87948 12.7456 9.2441 12.7456C14.6999 12.7456 14.6999 19.4138 20.1557 19.4138C24.5203 19.4138 26.2177 14.5642 28.6425 13.3518" stroke="#7B7B7B"/>
+</svg>
diff --git a/src/components/Analysis/AnalysisConsumption.tsx b/src/components/Analysis/AnalysisConsumption.tsx
index 58c291320..d3c431ae6 100644
--- a/src/components/Analysis/AnalysisConsumption.tsx
+++ b/src/components/Analysis/AnalysisConsumption.tsx
@@ -102,6 +102,7 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
getTotalValueWithConnectedFluids,
client,
analysisDate.month,
+ analysisDate,
])
return (
diff --git a/src/components/Analysis/AnalysisErrorModal.tsx b/src/components/Analysis/AnalysisErrorModal.tsx
index 014e6b213..2a4545433 100644
--- a/src/components/Analysis/AnalysisErrorModal.tsx
+++ b/src/components/Analysis/AnalysisErrorModal.tsx
@@ -8,8 +8,8 @@ import Dialog from '@material-ui/core/Dialog'
const AnalysisErrorModal: React.FC = () => {
const { t } = useI18n()
const history = useHistory()
- const goToOptions = () => {
- history.push('/options')
+ const goToConsumption = () => {
+ history.push('/consumption')
}
const goBack = () => {
history.goBack()
@@ -54,7 +54,7 @@ const AnalysisErrorModal: React.FC = () => {
aria-label={t(
'analysis_error_modal.accessibility.button_goto_konnector'
)}
- onClick={goToOptions}
+ onClick={goToConsumption}
classes={{
root: 'btn-highlight',
label: 'text-16-bold',
diff --git a/src/components/Analysis/AnalysisView.spec.tsx b/src/components/Analysis/AnalysisView.spec.tsx
index 8478ca06a..c8ce83163 100644
--- a/src/components/Analysis/AnalysisView.spec.tsx
+++ b/src/components/Analysis/AnalysisView.spec.tsx
@@ -24,6 +24,10 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}
})
jest.mock('components/Header/CozyBar', () => () => <div id="cozybar"></div>)
+jest.mock('components/DateNavigator/DateNavigator', () => () => (
+ <div id="dateNavigator"></div>
+))
+
jest.mock('components/Analysis/MonthlyAnalysis', () => () => (
<div id="monthlyanalysis"></div>
))
diff --git a/src/components/Connection/ConnectionForm.tsx b/src/components/Connection/ConnectionForm.tsx
index 12df80160..f66e04b31 100644
--- a/src/components/Connection/ConnectionForm.tsx
+++ b/src/components/Connection/ConnectionForm.tsx
@@ -2,10 +2,12 @@ import React, { useCallback } from 'react'
import { useDispatch } from 'react-redux'
import { updatedFluidConnection } from 'store/global/global.actions'
import { FluidStatus, FluidConnection } from 'models'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import ConnectionFormLogin from 'components/Connection/ConnectionFormLogin'
import ConnectionFormOauth from 'components/Connection/ConnectionFormOAuth'
-
+import { FluidType } from 'enum/fluid.enum'
+import './connectionForm.scss'
interface ConnectionFormProps {
fluidStatus: FluidStatus
}
@@ -14,6 +16,7 @@ const ConnectionForm: React.FC<ConnectionFormProps> = ({
fluidStatus,
}: ConnectionFormProps) => {
const dispatch = useDispatch()
+ const { t } = useI18n()
const handleSuccess = useCallback(async () => {
const updatedConnection: FluidConnection = {
@@ -22,9 +25,19 @@ const ConnectionForm: React.FC<ConnectionFormProps> = ({
}
dispatch(updatedFluidConnection(fluidStatus.fluidType, updatedConnection))
}, [dispatch, fluidStatus.fluidType, fluidStatus.connection])
-
return (
- <>
+ <div className="konnector-form">
+ <p
+ className={`form-title ${FluidType[
+ fluidStatus.fluidType
+ ].toLowerCase()}`}
+ >
+ {t(
+ `konnector_form.not_connected_${FluidType[
+ fluidStatus.fluidType
+ ].toLowerCase()}`
+ )}
+ </p>
{!fluidStatus.connection.konnectorConfig.oauth ? (
<ConnectionFormLogin
fluidStatus={fluidStatus}
@@ -36,7 +49,7 @@ const ConnectionForm: React.FC<ConnectionFormProps> = ({
onSuccess={handleSuccess}
/>
)}
- </>
+ </div>
)
}
diff --git a/src/components/Connection/ConnectionFormLogin.tsx b/src/components/Connection/ConnectionFormLogin.tsx
index 006537731..b11ddd45c 100644
--- a/src/components/Connection/ConnectionFormLogin.tsx
+++ b/src/components/Connection/ConnectionFormLogin.tsx
@@ -254,7 +254,7 @@ const ConnectionFormLogin: React.FC<ConnectionFormLoginProps> = ({
aria-label={t('auth.accessibility.button_create_account')}
onClick={() => window.open(siteLink, '_blank')}
classes={{
- root: 'btn-secondary-positive',
+ root: 'btn-secondary-negative',
label: 'text-16-normal',
}}
>
diff --git a/src/components/Connection/ConnectionFormOAuth.tsx b/src/components/Connection/ConnectionFormOAuth.tsx
index 5a04afc9f..1c882b407 100644
--- a/src/components/Connection/ConnectionFormOAuth.tsx
+++ b/src/components/Connection/ConnectionFormOAuth.tsx
@@ -104,6 +104,9 @@ const ConnectionFormOAuth: React.FC<ConnectionFormOAuthProps> = ({
<p className="koauthform-info-provider text-16-normal">
{t('auth.' + `${konnectorSlug}` + '.connect.info')}
</p>
+ <p className="koauthform-info-provider text-16-italic info2">
+ {t('auth.' + `${konnectorSlug}` + '.connect.info2')}
+ </p>
<div className="koauthform-button">
<OAuthForm konnector={konnector} onSuccess={handleSuccess} />
</div>
@@ -122,7 +125,7 @@ const ConnectionFormOAuth: React.FC<ConnectionFormOAuthProps> = ({
aria-label={t('auth.accessibility.button_create_account')}
onClick={toggleInfoCreationEnedisAccount}
classes={{
- root: 'btn-secondary-positive',
+ root: 'btn-secondary-negative',
label: 'text-16-normal',
}}
>
diff --git a/src/components/Connection/connectionForm.scss b/src/components/Connection/connectionForm.scss
new file mode 100644
index 000000000..5e81b0450
--- /dev/null
+++ b/src/components/Connection/connectionForm.scss
@@ -0,0 +1,25 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+.konnector-form {
+ margin: 2rem 1.5rem 2rem 1.5rem;
+ @media only screen and (min-width : #{$width-large-phone}) {
+ padding-top: 2rem;
+ margin: 4rem 1.5rem 2rem 1.5rem;
+ padding-bottom: 1rem;
+ }
+ .form-title {
+ font-size: 20px;
+ font-weight: bold;
+ text-align: center;
+ &.electricity {
+ color: $elec-color;
+ }
+ &.gas {
+ color: $gas-color;
+ }
+ &.water {
+ color: $water-color;
+ }
+ }
+}
diff --git a/src/components/Connection/connectionFormLogin.scss b/src/components/Connection/connectionFormLogin.scss
index d89314bce..4477632d8 100644
--- a/src/components/Connection/connectionFormLogin.scss
+++ b/src/components/Connection/connectionFormLogin.scss
@@ -25,10 +25,11 @@
@media #{$large-phone} {
margin: 0 0 0.25rem;
}
- .form-info-provider{
+ .form-info-provider {
padding: 0;
margin: 0;
color: $grey-bright;
+ text-align: center;
}
label {
font-style: normal;
diff --git a/src/components/Connection/connectionFormOAuth.scss b/src/components/Connection/connectionFormOAuth.scss
index b3e52680d..053697893 100644
--- a/src/components/Connection/connectionFormOAuth.scss
+++ b/src/components/Connection/connectionFormOAuth.scss
@@ -10,6 +10,10 @@
padding: 0;
margin: 0;
color: $grey-bright;
+ text-align: center;
+ }
+ .info2 {
+ margin-top: 0.5rem;
}
button.btn-secondary-positive {
span:first-child {
@@ -17,10 +21,12 @@
}
}
.koauthform-text {
+ text-align: center;
color: $grey-bright;
padding-top: 0.5rem;
}
.koauthform-button {
+ margin-bottom: 1rem;
button.btn-highlight {
padding: 0.5rem;
}
diff --git a/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
index 63bde2a1f..d597d1173 100644
--- a/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
@@ -53,7 +53,6 @@ const ConsumptionVisualizer: React.FC<ConsumptionVisualizerProps> = ({
return lastDay
}
const lastDataDate: DateTime | null = getLastDataDate()
-
return (
<div className="consumptionvisualizer-root">
<DataloadConsumptionVisualizer
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
index 549df9a7d..79439d735 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
@@ -11,7 +11,7 @@ import { Dataload } from 'models'
import { FluidType } from 'enum/fluid.enum'
import ConverterService from 'services/converter.service'
import DateChartService from 'services/dateChart.service'
-import { getPicto } from 'utils/picto'
+import { getNavPicto } from 'utils/picto'
import Icon from 'cozy-ui/transpiled/react/Icon'
import { useClient } from 'cozy-client'
@@ -38,9 +38,6 @@ const DataloadConsumptionVisualizer = ({
const client = useClient()
const [openEstimationModal, setOpenEstimationModal] = useState<boolean>(false)
const converterService = new ConverterService()
- const fluidStyle =
- fluidType === FluidType.MULTIFLUID ? 'MULTIFLUID' : FluidType[fluidType]
- const multiFluid = fluidType === FluidType.MULTIFLUID
const dateChartService = new DateChartService()
const emitNavEvent = useCallback(
@@ -55,17 +52,18 @@ const DataloadConsumptionVisualizer = ({
const toggleEstimationModal = useCallback(() => {
setOpenEstimationModal(prev => !prev)
}, [])
-
return (
<div className="dataloadvisualizer-root">
{!loading && dataload && dataload.value > -1 ? (
<div className="dataloadvisualizer-content">
- {showCompare && !multiFluid && compareDataload && (
+ {showCompare && compareDataload && (
<>
{compareDataload.value === -1 ? (
<div className="dataloadvisualizer-section dataloadvisualizer-section-left-novalue">
<div
- className={`dataloadvisualizer-novalue ${fluidStyle.toLowerCase()}-compare text-20-normal`}
+ className={`dataloadvisualizer-novalue ${FluidType[
+ fluidType
+ ].toLowerCase()}-compare text-20-normal`}
>
{t('consumption_visualizer.no_data')}
</div>
@@ -73,15 +71,19 @@ const DataloadConsumptionVisualizer = ({
) : (
<div className="dataloadvisualizer-section dataloadvisualizer-section-left">
<div
- className={`dataloadvisualizer-value ${fluidStyle.toLowerCase()}-compare text-36-bold`}
+ className={`dataloadvisualizer-value ${FluidType[
+ fluidType
+ ].toLowerCase()}-compare text-36-bold`}
>
{formatNumberValues(compareDataload.value)}
<span className="text-18-normal">{`${t(
- 'FLUID.' + fluidStyle + '.UNIT'
+ 'FLUID.' + FluidType[fluidType] + '.UNIT'
)}`}</span>
</div>
<div
- className={`dataloadvisualizer-euro ${fluidStyle.toLowerCase()}-compare text-16-normal`}
+ className={`dataloadvisualizer-euro ${FluidType[
+ fluidType
+ ].toLowerCase()}-compare text-16-normal`}
>
{`${formatNumberValues(
converterService.LoadToEuro(
@@ -102,24 +104,25 @@ const DataloadConsumptionVisualizer = ({
}
>
<div
- className={`dataloadvisualizer-value ${fluidStyle.toLowerCase()} text-36-bold`}
+ className={`dataloadvisualizer-value ${FluidType[
+ fluidType
+ ].toLowerCase()} text-36-bold`}
>
- {fluidStyle &&
- formatNumberValues(dataload.value, fluidStyle, true) >= 1000 &&
- fluidStyle !== 'MULTIFLUID' ? (
+ {formatNumberValues(dataload.value, FluidType[fluidType], true) >=
+ 1000 ? (
<>
- {formatNumberValues(dataload.value, fluidStyle)}
+ {formatNumberValues(dataload.value, FluidType[fluidType])}
<span className="text-18-normal">
- {`${t('FLUID.' + fluidStyle + '.MEGAUNIT')}`}
+ {`${t('FLUID.' + FluidType[fluidType] + '.MEGAUNIT')}`}
</span>
</>
) : (
<>
{formatNumberValues(dataload.value)}
<sup className="text-18-normal euroUnit">
- {`${t('FLUID.' + fluidStyle + '.UNIT')}`}
+ {`${t('FLUID.' + FluidType[fluidType] + '.UNIT')}`}
</sup>
- {multiFluid && (
+ {fluidType === FluidType.MULTIFLUID && (
<sup
className="text-14-normal estimated"
onClick={toggleEstimationModal}
@@ -130,9 +133,11 @@ const DataloadConsumptionVisualizer = ({
</>
)}
</div>
- {!multiFluid ? (
+ {fluidType !== FluidType.MULTIFLUID ? (
<div
- className={`dataloadvisualizer-euro ${fluidStyle.toLowerCase()} text-16-normal`}
+ className={`dataloadvisualizer-euro ${FluidType[
+ fluidType
+ ].toLowerCase()} text-16-normal`}
>
{`${formatNumberValues(
converterService.LoadToEuro(dataload.value, fluidType)
@@ -145,9 +150,7 @@ const DataloadConsumptionVisualizer = ({
return (
<NavLink
key={index}
- to={`/consumption/${t(
- 'FLUID.' + FluidType[index] + '.NAME'
- ).toLowerCase()}`}
+ to={`/consumption/${FluidType[index].toLowerCase()}`}
className="dataloadvisualizer-euro-link"
>
<div
@@ -165,7 +168,7 @@ const DataloadConsumptionVisualizer = ({
>
<Icon
className="dataloadvisualizer-euro-fluid-icon"
- icon={getPicto(index)}
+ icon={getNavPicto(index, true, true)}
size={22}
/>
<div>
@@ -182,9 +185,7 @@ const DataloadConsumptionVisualizer = ({
})
) : (
<NavLink
- to={`/consumption/${t(
- 'FLUID.' + FluidType[fluidType] + '.NAME'
- ).toLowerCase()}`}
+ to={`/consumption/${FluidType[fluidType].toLowerCase()}`}
className="dataloadvisualizer-euro-link"
>
<div
@@ -194,7 +195,7 @@ const DataloadConsumptionVisualizer = ({
>
<Icon
className="dataloadvisualizer-euro-fluid-icon"
- icon={getPicto(fluidType)}
+ icon={getNavPicto(fluidType, true, true)}
size={22}
/>
<div>{`${formatNumberValues(
@@ -213,7 +214,9 @@ const DataloadConsumptionVisualizer = ({
lastDataDate &&
dataload.date > lastDataDate ? (
<div
- className={`dataloadvisualizer-content ${fluidStyle.toLowerCase()} text-22-normal`}
+ className={`dataloadvisualizer-content ${FluidType[
+ fluidType
+ ].toLowerCase()} text-22-normal`}
>
{`${t(
'consumption_visualizer.last_data'
@@ -221,7 +224,9 @@ const DataloadConsumptionVisualizer = ({
</div>
) : (
<div
- className={`dataloadvisualizer-content ${fluidStyle.toLowerCase()} text-22-normal`}
+ className={`dataloadvisualizer-content${FluidType[
+ fluidType
+ ].toLowerCase()} text-22-normal`}
>
{`${t('consumption_visualizer.no_data')}`}
</div>
diff --git a/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss b/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss
index e61efb30a..5a902402a 100644
--- a/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss
+++ b/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss
@@ -90,9 +90,6 @@
.dataloadvisualizer-euro-fluid-icon {
margin-right: 0.5rem;
}
- & div {
- padding-top: 0.2rem;
- }
}
.electricity {
color: $elec-color;
diff --git a/src/components/DateNavigator/DateNavigator.tsx b/src/components/DateNavigator/DateNavigator.tsx
index a828a2d0e..1c496d4de 100644
--- a/src/components/DateNavigator/DateNavigator.tsx
+++ b/src/components/DateNavigator/DateNavigator.tsx
@@ -16,6 +16,8 @@ import RigthArrowIcon from 'assets/icons/ico/right-arrow.svg'
import IconButton from '@material-ui/core/IconButton'
import Icon from 'cozy-ui/transpiled/react/Icon'
import { TimeStep } from 'enum/timeStep.enum'
+import { isKonnectorActive } from 'utils/utils'
+import { FluidType } from 'enum/fluid.enum'
interface DateNavigatorProps {
currentAnalysisDate?: DateTime
@@ -31,6 +33,7 @@ const DateNavigator: React.FC<DateNavigatorProps> = ({
const { currentTimeStep, selectedDate, currentIndex } = useSelector(
(state: AppStore) => state.ecolyo.chart
)
+ const { fluidStatus } = useSelector((state: AppStore) => state.ecolyo.global)
const disablePrev =
selectedDate <
@@ -70,7 +73,7 @@ const DateNavigator: React.FC<DateNavigatorProps> = ({
}
const handleChangePrevIndex = () => {
- if (!disablePrev) {
+ if (!disablePrev && isKonnectorActive(fluidStatus, FluidType.MULTIFLUID)) {
const increment: number = dateChartService.defineIncrementForPreviousIndex(
currentTimeStep,
selectedDate,
@@ -80,7 +83,11 @@ const DateNavigator: React.FC<DateNavigatorProps> = ({
}
}
const handleChangeNextIndex = () => {
- if (!disableNextSlide) {
+ console.log(!isKonnectorActive(fluidStatus, FluidType.MULTIFLUID))
+ if (
+ !disableNextSlide &&
+ isKonnectorActive(fluidStatus, FluidType.MULTIFLUID)
+ ) {
const increment: number = dateChartService.defineIncrementForNextIndex(
currentTimeStep,
selectedDate,
@@ -96,7 +103,9 @@ const DateNavigator: React.FC<DateNavigatorProps> = ({
<IconButton
aria-label={t('consumption.accessibility.button_previous_value')}
className={classNames('date-navigator-button', {
- ['disable']: disablePrev,
+ ['disable']:
+ disablePrev ||
+ !isKonnectorActive(fluidStatus, FluidType.MULTIFLUID),
})}
onClick={() => handleChangePrevIndex()}
>
@@ -116,7 +125,9 @@ const DateNavigator: React.FC<DateNavigatorProps> = ({
<IconButton
aria-label={t('consumption.accessibility.button_next_value')}
className={classNames('date-navigator-button', {
- ['disable']: disableNext,
+ ['disable']:
+ disableNext ||
+ !isKonnectorActive(fluidStatus, FluidType.MULTIFLUID),
})}
onClick={() => handleChangeNextIndex()}
>
diff --git a/src/components/DateNavigator/datenavigator.scss b/src/components/DateNavigator/datenavigator.scss
index 99c23ffe2..8751ba7e3 100644
--- a/src/components/DateNavigator/datenavigator.scss
+++ b/src/components/DateNavigator/datenavigator.scss
@@ -7,7 +7,7 @@
justify-content: space-around;
width: 100%;
margin: auto;
- padding-bottom: 0.313rem;
+ padding-bottom: 0.6rem;
max-width: 45.75rem;
.date-navigator-button {
border: none;
diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx
index 059982cba..d22433afe 100644
--- a/src/components/FluidChart/FluidChart.tsx
+++ b/src/components/FluidChart/FluidChart.tsx
@@ -169,14 +169,17 @@ const FluidChart: React.FC<FluidChartProps> = ({
</div>
) : null}
</div>
- {fluidStatus.length > 0 && (
+ {/*
+ TODO to be removed in US 562
+ */}
+ {/* {fluidStatus.length > 0 && (
<OldFluidDataModal
open={openOldFluidDataModal}
fluidStatus={fluidStatus}
fluidOldData={fluidOldData}
handleCloseClick={handleCloseClick}
/>
- )}
+ )} */}
</>
)}
</>
diff --git a/src/components/Header/header.scss b/src/components/Header/header.scss
index 0be60bcfc..35ef91228 100644
--- a/src/components/Header/header.scss
+++ b/src/components/Header/header.scss
@@ -14,11 +14,6 @@
@media #{$large-phone} {
top: 0;
}
- .header-bar {
- background: linear-gradient(180deg, #000000 0%, rgba(27, 28, 34, 0) 70%);
- height: 8px;
- width: 100%;
- }
.header-top {
background: radial-gradient(
74.83% 76.97% at 50% 13.64%,
@@ -74,4 +69,4 @@
}
}
}
-}
\ No newline at end of file
+}
diff --git a/src/components/Home/ConsumptionDetails.tsx b/src/components/Home/ConsumptionDetails.tsx
index a98db775c..5fdd7c022 100644
--- a/src/components/Home/ConsumptionDetails.tsx
+++ b/src/components/Home/ConsumptionDetails.tsx
@@ -1,13 +1,9 @@
import React from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { useSelector } from 'react-redux'
import { AppStore } from 'store'
-import ConfigService from 'services/fluidConfig.service'
import { convertDateToShortDateString } from 'utils/date'
-import FluidCard from 'components/HomeCards/FluidCard'
import './consumptionDetails.scss'
-import AddKonnectorCard from 'components/HomeCards/AddKonnectorCard'
-import TotalConsumption from 'components/HomeCards/TotalConsumption'
+import TotalConsumption from 'components/TotalConsumption/TotalConsumption'
import { FluidType } from 'enum/fluid.enum'
interface ConsumptionDetailsProps {
fluidType: FluidType
@@ -16,17 +12,10 @@ interface ConsumptionDetailsProps {
const ConsumptionDetails: React.FC<ConsumptionDetailsProps> = ({
fluidType,
}: ConsumptionDetailsProps) => {
- const { t } = useI18n()
- const { fluidStatus, fluidTypes } = useSelector(
- (state: AppStore) => state.ecolyo.global
- )
const { currentTimeStep, currentDatachart } = useSelector(
(state: AppStore) => state.ecolyo.chart
)
- const configService = new ConfigService()
- const fluidConfig = configService.getFluidConfig()
-
return (
<>
<div className="consumption-details-root">
@@ -41,51 +30,6 @@ const ConsumptionDetails: React.FC<ConsumptionDetailsProps> = ({
actualData={currentDatachart.actualData}
fluidType={fluidType}
/>
- {fluidType === FluidType.MULTIFLUID ? (
- <div className="fluid-details">
- <span className="text-16-normal-uppercase details-title">
- {t('consumption_details.detail')}
- </span>
- <div className="details-container">
- {fluidConfig.map((fluid, index) => {
- return fluidTypes.includes(fluid.fluidTypeId) ? (
- <FluidCard key={index} fluidType={fluid.fluidTypeId} />
- ) : null
- })}
- </div>
- {fluidTypes.length !== 3 && (
- <span className="text-16-normal-uppercase details-title">
- {t('consumption_details.connect')}
- </span>
- )}
- <div className="details-container">
- {fluidConfig.map((fluid, index) => {
- return fluidTypes.includes(fluid.fluidTypeId) ? null : (
- <AddKonnectorCard
- key={index}
- fluidStatus={fluidStatus[index]}
- fluidType={fluid.fluidTypeId}
- />
- )
- })}
- </div>
- </div>
- ) : (
- <div className="fluid-details">
- <div className="text-16-normal-uppercase details-title">
- {t('consumption_details.mini_cards_label')}
- </div>
- <div className="details-container multi-link">
- <FluidCard fluidType={FluidType.MULTIFLUID} />
- {fluidConfig.map((fluid, index) => {
- return fluidType !== fluid.fluidTypeId &&
- fluidTypes.includes(fluid.fluidTypeId) ? (
- <FluidCard key={index} fluidType={fluid.fluidTypeId} />
- ) : null
- })}
- </div>
- </div>
- )}
</div>
</div>
</>
diff --git a/src/components/SingleFluid/SingleFluidView.spec.tsx b/src/components/Home/ConsumptionView.spec.tsx
similarity index 51%
rename from src/components/SingleFluid/SingleFluidView.spec.tsx
rename to src/components/Home/ConsumptionView.spec.tsx
index 2960395d1..632908508 100644
--- a/src/components/SingleFluid/SingleFluidView.spec.tsx
+++ b/src/components/Home/ConsumptionView.spec.tsx
@@ -8,20 +8,12 @@ import {
mockInitialEcolyoState,
} from '../../../tests/__mocks__/store'
import * as chartActions from 'store/chart/chart.actions'
-import SingleFluidView from 'components/SingleFluid/SingleFluidView'
-import { FluidType } from 'enum/fluid.enum'
+import { FluidState, FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
+import ConsumptionView from './ConsumptionView'
+import { FluidStatus } from 'models'
-jest.mock('cozy-ui/transpiled/react/I18n', () => {
- return {
- useI18n: jest.fn(() => {
- return {
- t: (str: string) => str,
- }
- }),
- }
-})
jest.mock('components/Header/CozyBar', () => () => <div id="cozybar"></div>)
jest.mock('components/Header/Header', () => () => <div id="header"></div>)
jest.mock('components/DateNavigator/DateNavigator', () => () => (
@@ -33,12 +25,26 @@ jest.mock('components/FluidChart/FluidChart', () => () => (
jest.mock('components/Home/ConsumptionDetails', () => () => (
<div id="consumptiondetails"></div>
))
-
+jest.mock('components/Connection/ConnectionForm', () => () => (
+ <div id="connectionForm"></div>
+))
+jest.mock('components/Konnector/KonnectorViewerCard', () => () => (
+ <div id="konnectorViewerCard"></div>
+))
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
const useSelectorSpy = jest.spyOn(reactRedux, 'useSelector')
const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch')
const setCurrentTimeStepSpy = jest.spyOn(chartActions, 'setCurrentTimeStep')
-describe('SingleFluidView component', () => {
+describe('ConsumptionView component', () => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let store: any
beforeEach(() => {
@@ -47,14 +53,15 @@ describe('SingleFluidView component', () => {
setCurrentTimeStepSpy.mockClear()
})
- it('should be rendered correctly', () => {
+ it('should be rendered correctly', async () => {
useSelectorSpy.mockReturnValue({
currentTimeStep: TimeStep.WEEK,
loading: false,
+ fluidStatus: mockInitialEcolyoState.global.fluidStatus,
})
const wrapper = mount(
<Provider store={store}>
- <SingleFluidView fluidType={FluidType.ELECTRICITY} />
+ <ConsumptionView fluidType={FluidType.ELECTRICITY} />
</Provider>
)
expect(wrapper.find('#cozybar')).toBeTruthy()
@@ -68,10 +75,11 @@ describe('SingleFluidView component', () => {
useSelectorSpy.mockReturnValue({
currentTimeStep: TimeStep.WEEK,
loading: true,
+ fluidStatus: mockInitialEcolyoState.global.fluidStatus,
})
const wrapper = mount(
<Provider store={store}>
- <SingleFluidView fluidType={FluidType.ELECTRICITY} />
+ <ConsumptionView fluidType={FluidType.ELECTRICITY} />
</Provider>
)
expect(wrapper.find('#cozybar')).toBeTruthy()
@@ -84,13 +92,61 @@ describe('SingleFluidView component', () => {
useSelectorSpy.mockReturnValue({
currentTimeStep: TimeStep.HALF_AN_HOUR,
loading: true,
+ fluidStatus: mockInitialEcolyoState.global.fluidStatus,
})
mount(
<Provider store={store}>
- <SingleFluidView fluidType={FluidType.GAS} />
+ <ConsumptionView fluidType={FluidType.GAS} />
</Provider>
)
expect(setCurrentTimeStepSpy).toBeCalledTimes(1)
expect(setCurrentTimeStepSpy).toHaveBeenCalledWith(TimeStep.WEEK)
})
+ it('should render konnector list when no fluid is connected', () => {
+ useSelectorSpy.mockReturnValue({
+ currentTimeStep: TimeStep.WEEK,
+ loading: true,
+ fluidStatus: mockInitialEcolyoState.global.fluidStatus,
+ })
+ const wrapper = mount(
+ <Provider store={store}>
+ <ConsumptionView fluidType={FluidType.MULTIFLUID} />
+ </Provider>
+ )
+ expect(wrapper.find('.konnectorViewerCard')).toBeTruthy()
+ })
+ it('should render mutlifluid consumption if at least one fluid is connected', () => {
+ const updatedStatus: FluidStatus[] =
+ mockInitialEcolyoState.global.fluidStatus
+ updatedStatus[1].status = FluidState.DONE
+
+ useSelectorSpy.mockReturnValue({
+ currentTimeStep: TimeStep.WEEK,
+ loading: true,
+ fluidStatus: updatedStatus,
+ })
+ const wrapper = mount(
+ <Provider store={store}>
+ <ConsumptionView fluidType={FluidType.MULTIFLUID} />
+ </Provider>
+ )
+ expect(wrapper.find('.consumptionview-content')).toBeTruthy()
+ })
+ it('should render Electricity when elec is connected', () => {
+ const updatedStatus: FluidStatus[] =
+ mockInitialEcolyoState.global.fluidStatus
+ updatedStatus[0].status = FluidState.DONE
+ useSelectorSpy.mockReturnValue({
+ currentTimeStep: TimeStep.WEEK,
+ loading: true,
+ fluidStatus: updatedStatus,
+ })
+ const wrapper = mount(
+ <Provider store={store}>
+ <ConsumptionView fluidType={FluidType.ELECTRICITY} />
+ </Provider>
+ )
+ expect(wrapper.find('.consumptionview-content')).toBeTruthy()
+ expect(wrapper.find('.konnectorViewerCard')).toBeTruthy()
+ })
})
diff --git a/src/components/Home/ConsumptionView.tsx b/src/components/Home/ConsumptionView.tsx
new file mode 100644
index 000000000..16c93051a
--- /dev/null
+++ b/src/components/Home/ConsumptionView.tsx
@@ -0,0 +1,107 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import './consumptionView.scss'
+import { useSelector, useDispatch } from 'react-redux'
+import { AppStore } from 'store'
+import { FluidType } from 'enum/fluid.enum'
+import { TimeStep } from 'enum/timeStep.enum'
+
+import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import Content from 'components/Content/Content'
+import FluidChart from 'components/FluidChart/FluidChart'
+import DateNavigator from 'components/DateNavigator/DateNavigator'
+import { setCurrentTimeStep, setLoading } from 'store/chart/chart.actions'
+import ConsumptionDetails from 'components/Home/ConsumptionDetails'
+import FluidButtons from 'components/Home/FluidButtons'
+import KonnectorViewerCard from 'components/Konnector/KonnectorViewerCard'
+import KonnectorViewerList from 'components/Konnector/KonnectorViewerList'
+import classNames from 'classnames'
+import { isKonnectorActive } from 'utils/utils'
+
+interface ConsumptionViewProps {
+ fluidType: FluidType
+}
+const ConsumptionView: React.FC<ConsumptionViewProps> = ({
+ fluidType,
+}: ConsumptionViewProps) => {
+ const dispatch = useDispatch()
+ const { currentTimeStep, loading } = useSelector(
+ (state: AppStore) => state.ecolyo.chart
+ )
+ const { fluidStatus } = useSelector((state: AppStore) => state.ecolyo.global)
+ const [isFluidKonnected, setIsFluidKonnected] = useState<boolean>(false)
+ const [headerHeight, setHeaderHeight] = useState<number>(0)
+ const [isMulti] = useState<boolean>(
+ fluidType === FluidType.MULTIFLUID ? true : false
+ )
+
+ const defineHeaderHeight = useCallback((height: number) => {
+ setHeaderHeight(height)
+ }, [])
+
+ useEffect(() => {
+ setIsFluidKonnected(isKonnectorActive(fluidStatus, fluidType))
+ if (
+ fluidType !== FluidType.ELECTRICITY &&
+ currentTimeStep == TimeStep.HALF_AN_HOUR
+ ) {
+ dispatch(setCurrentTimeStep(TimeStep.WEEK))
+ }
+ }, [dispatch, fluidType, currentTimeStep, fluidStatus, isMulti])
+
+ useEffect(() => {
+ dispatch(setLoading(true))
+ }, [dispatch])
+ return (
+ <>
+ <CozyBar />
+ <Header setHeaderHeight={defineHeaderHeight}>
+ <DateNavigator />
+ <FluidButtons activeFluid={fluidType} />
+ </Header>
+ <Content height={headerHeight}>
+ {isFluidKonnected ? (
+ <>
+ {loading && (
+ <div className={'consumptionview-loading'} aria-busy="true">
+ <StyledSpinner size="5em" fluidType={fluidType} />
+ </div>
+ )}
+ <div
+ className={classNames('consumptionview-content', {
+ ['--hidden']: loading,
+ })}
+ >
+ <FluidChart fluidType={fluidType} />
+ <ConsumptionDetails fluidType={fluidType} />
+ </div>
+ {!isMulti && (
+ <div className="konnector-section">
+ <KonnectorViewerCard
+ fluidStatus={fluidStatus[fluidType]}
+ isParam={true}
+ isDisconnected={false}
+ />
+ </div>
+ )}
+ </>
+ ) : !isMulti ? (
+ <div className="konnector-section">
+ <KonnectorViewerCard
+ fluidStatus={fluidStatus[fluidType]}
+ isParam={false}
+ isDisconnected={true}
+ />
+ </div>
+ ) : (
+ <div className="konnector-section">
+ <KonnectorViewerList />
+ </div>
+ )}
+ </Content>
+ </>
+ )
+}
+
+export default ConsumptionView
diff --git a/src/components/Home/FluidButton.spec.tsx b/src/components/Home/FluidButton.spec.tsx
new file mode 100644
index 000000000..c29a109e4
--- /dev/null
+++ b/src/components/Home/FluidButton.spec.tsx
@@ -0,0 +1,67 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { Provider } from 'react-redux'
+import {
+ createMockStore,
+ mockInitialEcolyoState,
+} from '../../../tests/__mocks__/store'
+
+import { FluidType } from 'enum/fluid.enum'
+import FluidButton from './FluidButton'
+import UsageEventService from 'services/usageEvent.service'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+
+describe('FluidButton component', () => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ let store: any
+ beforeEach(() => {
+ store = createMockStore(mockInitialEcolyoState)
+ })
+
+ it('should be rendered correctly', () => {
+ const wrapper = mount(
+ <Provider store={store}>
+ <FluidButton fluidType={FluidType.ELECTRICITY} isActive={false} />
+ </Provider>
+ ).getElement()
+ expect(wrapper).toMatchSnapshot()
+ })
+
+ it('should render multifluidButton', () => {
+ const wrapper = mount(
+ <Provider store={store}>
+ <FluidButton fluidType={FluidType.MULTIFLUID} isActive={false} />
+ </Provider>
+ )
+ expect(wrapper.find('.multifluid')).toBeTruthy()
+ })
+ it('should render active button', () => {
+ const wrapper = mount(
+ <Provider store={store}>
+ <FluidButton fluidType={FluidType.GAS} isActive={false} />
+ </Provider>
+ )
+ expect(wrapper.find('.active')).toBeTruthy()
+ })
+ it('should trigger nav event', () => {
+ jest.mock('services/usageEvent.service')
+ const mockAddEvent = jest.fn()
+ UsageEventService.addEvent = mockAddEvent
+ const wrapper = mount(
+ <Provider store={store}>
+ <FluidButton fluidType={FluidType.GAS} isActive={false} />
+ </Provider>
+ )
+ wrapper.find('.fluid-button').simulate('click')
+ expect(mockAddEvent).toHaveBeenCalled()
+ })
+})
diff --git a/src/components/Home/FluidButton.tsx b/src/components/Home/FluidButton.tsx
new file mode 100644
index 000000000..d8302292d
--- /dev/null
+++ b/src/components/Home/FluidButton.tsx
@@ -0,0 +1,72 @@
+import React, { useCallback } from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+
+import { FluidType } from 'enum/fluid.enum'
+import { getNavPicto } from 'utils/picto'
+import { useHistory } from 'react-router'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { UsageEventType } from 'enum/usageEvent.enum'
+import UsageEventService from 'services/usageEvent.service'
+import { useClient } from 'cozy-client'
+import { useSelector } from 'react-redux'
+import { AppStore } from 'store'
+import { isKonnectorActive } from 'utils/utils'
+
+interface FluidButtonProps {
+ fluidType: FluidType
+ isActive: boolean
+}
+
+const FluidButton: React.FC<FluidButtonProps> = ({
+ fluidType,
+ isActive,
+}: FluidButtonProps) => {
+ const { t } = useI18n()
+ const history = useHistory()
+ const { fluidStatus } = useSelector((state: AppStore) => state.ecolyo.global)
+ const client = useClient()
+
+ const isConnected = useCallback(() => {
+ if (fluidType === FluidType.MULTIFLUID) {
+ return true
+ } else return isKonnectorActive(fluidStatus, fluidType)
+ }, [fluidStatus, fluidType])
+
+ const iconType = getNavPicto(fluidType, isActive, isConnected())
+
+ const goToFluid = useCallback(async () => {
+ await UsageEventService.addEvent(client, {
+ type: UsageEventType.NAVIGATION_EVENT,
+ target: FluidType[fluidType].toLowerCase(),
+ })
+ history.push(
+ fluidType === FluidType.MULTIFLUID
+ ? '/consumption'
+ : `/consumption/${FluidType[fluidType].toLowerCase()}`
+ )
+ }, [history, fluidType, client])
+ return (
+ <div
+ className={`fluid-title ${FluidType[
+ fluidType
+ ].toLowerCase()} fluid-button`}
+ onClick={goToFluid}
+ >
+ <StyledIcon
+ className="fluid-icon"
+ icon={iconType}
+ size={fluidType === FluidType.MULTIFLUID ? 36 : 32}
+ />
+
+ <div
+ className={`fluid-title ${FluidType[
+ fluidType
+ ].toLowerCase()} ${isActive && 'active'} text-14-normal`}
+ >
+ {t('FLUID.' + FluidType[fluidType] + '.LABEL')}
+ </div>
+ </div>
+ )
+}
+
+export default FluidButton
diff --git a/src/components/Home/FluidButtons.spec.tsx b/src/components/Home/FluidButtons.spec.tsx
new file mode 100644
index 000000000..06e18813a
--- /dev/null
+++ b/src/components/Home/FluidButtons.spec.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { Provider } from 'react-redux'
+import {
+ createMockStore,
+ mockInitialEcolyoState,
+} from '../../../tests/__mocks__/store'
+
+import FluidButtons from './FluidButtons'
+import { FluidType } from 'enum/fluid.enum'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+
+describe('FluidButtons component', () => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ let store: any
+ beforeEach(() => {
+ store = createMockStore(mockInitialEcolyoState)
+ })
+
+ it('should be rendered correctly', () => {
+ const wrapper = mount(
+ <Provider store={store}>
+ <FluidButtons activeFluid={FluidType.ELECTRICITY} />
+ </Provider>
+ ).getElement()
+ expect(wrapper).toMatchSnapshot()
+ })
+})
diff --git a/src/components/Home/FluidButtons.tsx b/src/components/Home/FluidButtons.tsx
new file mode 100644
index 000000000..07eed7d11
--- /dev/null
+++ b/src/components/Home/FluidButtons.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+
+import { FluidType } from 'enum/fluid.enum'
+import FluidButton from './FluidButton'
+import './fluidButtons.scss'
+
+interface FluidButtonsProps {
+ activeFluid: FluidType
+}
+const FluidButtons: React.FC<FluidButtonsProps> = ({
+ activeFluid,
+}: FluidButtonsProps) => {
+ const orderedFluids = [
+ FluidType.MULTIFLUID,
+ FluidType.ELECTRICITY,
+ FluidType.GAS,
+ FluidType.WATER,
+ ]
+
+ return (
+ <div className="fluid-buttons">
+ <div className="content">
+ {orderedFluids.map((fluid, key) => (
+ <React.Fragment key={key}>
+ <FluidButton isActive={activeFluid === fluid} fluidType={fluid} />
+ </React.Fragment>
+ ))}
+ </div>
+ </div>
+ )
+}
+
+export default FluidButtons
diff --git a/src/components/Home/HomeView.spec.tsx b/src/components/Home/HomeView.spec.tsx
deleted file mode 100644
index 386d5dce3..000000000
--- a/src/components/Home/HomeView.spec.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-/* eslint-disable react/display-name */
-import React from 'react'
-import { mount } from 'enzyme'
-import { Provider } from 'react-redux'
-import * as reactRedux from 'react-redux'
-import {
- createMockStore,
- mockInitialEcolyoState,
-} from '../../../tests/__mocks__/store'
-import * as chartActions from 'store/chart/chart.actions'
-import HomeView from 'components/Home/HomeView'
-import { TimeStep } from 'enum/timeStep.enum'
-import Header from 'components/Header/Header'
-import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
-
-jest.mock('cozy-ui/transpiled/react/I18n', () => {
- return {
- useI18n: jest.fn(() => {
- return {
- t: (str: string) => str,
- }
- }),
- }
-})
-
-jest.mock('components/Header/CozyBar', () => () => <div id="cozybar"></div>)
-jest.mock('components/DateNavigator/DateNavigator', () => () => (
- <div id="datenavigator"></div>
-))
-jest.mock('components/FluidChart/FluidChart', () => () => (
- <div id="fluidchart"></div>
-))
-jest.mock('components/Home/ConsumptionDetails', () => () => (
- <div id="consumptiondetails"></div>
-))
-jest.mock('components/Home/OldFluidDataModal', () => () => (
- <div id="oldfluiddatamodal"></div>
-))
-jest.mock('components/Konnector/KonnectorViewerList', () => () => (
- <div id="konnectorviewerlist"></div>
-))
-
-const useSelectorSpy = jest.spyOn(reactRedux, 'useSelector')
-const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch')
-const setCurrentTimeStepSpy = jest.spyOn(chartActions, 'setCurrentTimeStep')
-
-describe('SingleFluidView component', () => {
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- let store: any
- beforeEach(() => {
- store = createMockStore(mockInitialEcolyoState)
- useDispatchSpy.mockClear()
- setCurrentTimeStepSpy.mockClear()
- })
-
- it('should be rendered correctly', () => {
- useSelectorSpy.mockReturnValue({
- fluidTypes: [0],
- loading: false,
- })
- const wrapper = mount(
- <Provider store={store}>
- <HomeView />
- </Provider>
- )
- expect(wrapper.find('#cozybar')).toBeTruthy()
- expect(wrapper.find(Header)).toBeTruthy()
- expect(wrapper.find('#datenavigator')).toBeTruthy()
- expect(wrapper.find('#fluidcard')).toBeTruthy()
- expect(wrapper.find('#consumptiondetails')).toBeTruthy()
- })
-
- it('should display a spinner', () => {
- useSelectorSpy.mockReturnValue({
- fluidTypes: [0],
- loading: true,
- })
- const wrapper = mount(
- <Provider store={store}>
- <HomeView />
- </Provider>
- )
- expect(wrapper.find('#cozybar')).toBeTruthy()
- expect(wrapper.find(Header)).toBeTruthy()
- expect(wrapper.find('#datenavigator')).toBeTruthy()
- expect(wrapper.find(StyledSpinner)).toBeTruthy()
- })
-
- it('should display the konnector viewer list', () => {
- const wrapper = mount(
- <Provider store={store}>
- <HomeView />
- </Provider>
- )
- expect(wrapper.find('#cozybar')).toBeTruthy()
- expect(wrapper.find(Header)).toBeTruthy()
- expect(wrapper.find('#konnectorviewerlist')).toBeTruthy()
- })
-
- it('should set CurrentTimeStep to WEEK when timeStep = HALF_AN_HOUR', () => {
- useSelectorSpy.mockReturnValue({
- fluidTypes: [0],
- currentTimeStep: TimeStep.HALF_AN_HOUR,
- loading: false,
- })
- mount(
- <Provider store={store}>
- <HomeView />
- </Provider>
- )
- expect(setCurrentTimeStepSpy).toBeCalledTimes(1)
- expect(setCurrentTimeStepSpy).toHaveBeenCalledWith(TimeStep.WEEK)
- })
-})
diff --git a/src/components/Home/HomeView.tsx b/src/components/Home/HomeView.tsx
deleted file mode 100644
index 6994ba59f..000000000
--- a/src/components/Home/HomeView.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import './homeView.scss'
-import classNames from 'classnames'
-import { useSelector, useDispatch } from 'react-redux'
-import { AppStore } from 'store'
-import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
-import CozyBar from 'components/Header/CozyBar'
-import Header from 'components/Header/Header'
-import Content from 'components/Content/Content'
-import FluidChart from 'components/FluidChart/FluidChart'
-
-import ConsumptionDetails from 'components/Home/ConsumptionDetails'
-import KonnectorViewerList from 'components/Konnector/KonnectorViewerList'
-
-import { FluidType } from 'enum/fluid.enum'
-import DateNavigator from 'components/DateNavigator/DateNavigator'
-import { setCurrentTimeStep, setLoading } from 'store/chart/chart.actions'
-import { TimeStep } from 'enum/timeStep.enum'
-
-const HomeView: React.FC = () => {
- const dispatch = useDispatch()
- const { fluidTypes } = useSelector((state: AppStore) => state.ecolyo.global)
- const { currentTimeStep, loading } = useSelector(
- (state: AppStore) => state.ecolyo.chart
- )
- const [headerHeight, setHeaderHeight] = useState<number>(0)
-
- const defineHeaderHeight = (height: number) => {
- setHeaderHeight(height)
- }
-
- useEffect(() => {
- if (currentTimeStep == TimeStep.HALF_AN_HOUR) {
- dispatch(setCurrentTimeStep(TimeStep.WEEK))
- }
- }, [dispatch, currentTimeStep])
-
- useEffect(() => {
- dispatch(setLoading(true))
- }, [dispatch])
-
- return (
- <React.Fragment>
- <CozyBar />
- {fluidTypes && fluidTypes.length > 0 ? (
- <>
- <Header setHeaderHeight={defineHeaderHeight}>
- <DateNavigator />
- </Header>
- <Content height={headerHeight}>
- {loading && (
- <div className={'homeview-loading'} aria-busy="true">
- <StyledSpinner size="5em" fluidType={FluidType.MULTIFLUID} />
- </div>
- )}
- <div
- className={classNames('homeview-content', {
- ['--hidden']: loading,
- })}
- >
- <FluidChart fluidType={FluidType.MULTIFLUID} />
- <ConsumptionDetails fluidType={FluidType.MULTIFLUID} />
- </div>
- </Content>
- </>
- ) : (
- <>
- <Header setHeaderHeight={defineHeaderHeight}></Header>
- <Content height={headerHeight}>
- <KonnectorViewerList isParam={false} />
- </Content>
- </>
- )}
- </React.Fragment>
- )
-}
-
-export default HomeView
diff --git a/src/components/Home/__snapshots__/FluidButton.spec.tsx.snap b/src/components/Home/__snapshots__/FluidButton.spec.tsx.snap
new file mode 100644
index 000000000..062bfb67a
--- /dev/null
+++ b/src/components/Home/__snapshots__/FluidButton.spec.tsx.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FluidButton component should be rendered correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <FluidButton
+ fluidType={0}
+ isActive={false}
+ />
+</Provider>
+`;
diff --git a/src/components/Home/__snapshots__/FluidButtons.spec.tsx.snap b/src/components/Home/__snapshots__/FluidButtons.spec.tsx.snap
new file mode 100644
index 000000000..62953c6cf
--- /dev/null
+++ b/src/components/Home/__snapshots__/FluidButtons.spec.tsx.snap
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FluidButtons component should be rendered correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <FluidButtons
+ activeFluid={0}
+ />
+</Provider>
+`;
diff --git a/src/components/Home/consumptionDetails.scss b/src/components/Home/consumptionDetails.scss
index 642888984..bfcec46d5 100644
--- a/src/components/Home/consumptionDetails.scss
+++ b/src/components/Home/consumptionDetails.scss
@@ -13,7 +13,6 @@
margin-bottom: 0;
}
.consumption-details-content {
- min-height: 15rem;
width: 45.75rem;
@media #{$large-phone} {
width: 100%;
diff --git a/src/components/Home/consumptionView.scss b/src/components/Home/consumptionView.scss
new file mode 100644
index 000000000..a00c6ae2a
--- /dev/null
+++ b/src/components/Home/consumptionView.scss
@@ -0,0 +1,24 @@
+@import 'src/styles/base/breakpoint';
+
+.consumptionview-loading {
+ height: 80vh;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.consumptionview-content {
+ &.--hidden {
+ display: none;
+ }
+}
+.konnector-section {
+ margin: auto;
+ width: 45.75rem;
+ box-sizing: border-box;
+ margin-top: 1rem;
+ @media #{$large-phone} {
+ width: 100%;
+ padding: 1rem;
+ }
+}
diff --git a/src/components/Home/fluidButtons.scss b/src/components/Home/fluidButtons.scss
new file mode 100644
index 000000000..5bc8da7d9
--- /dev/null
+++ b/src/components/Home/fluidButtons.scss
@@ -0,0 +1,38 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+.fluid-buttons {
+ width: 100%;
+ background: $dark-light-2;
+ box-shadow: inset 0px 4px 8px #000000;
+ .content {
+ display: flex;
+ align-items: center;
+ justify-content: space-evenly;
+ padding: 0.6rem 0;
+ box-sizing: border-box;
+ width: 45.75rem;
+ margin: auto;
+ @media #{$large-phone} {
+ width: 100%;
+ }
+ }
+ .fluid-button {
+ cursor: pointer;
+ min-width: 70px;
+ margin: 0 0.3rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ .fluid-title {
+ text-align: center;
+ color: $grey-dark;
+ transition: all 300ms ease;
+ padding-top: 0.3rem;
+ &.active {
+ color: white;
+ }
+ }
+ }
+}
diff --git a/src/components/Home/homeView.scss b/src/components/Home/homeView.scss
deleted file mode 100644
index d465d7b2c..000000000
--- a/src/components/Home/homeView.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.homeview-loading {
- height: 80vh;
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-.homeview-content {
- &.--hidden{
- display: none;
- }
-}
\ No newline at end of file
diff --git a/src/components/HomeCards/AddKonnectorCard.spec.tsx b/src/components/HomeCards/AddKonnectorCard.spec.tsx
deleted file mode 100644
index 7840621f0..000000000
--- a/src/components/HomeCards/AddKonnectorCard.spec.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-import { FluidType } from 'enum/fluid.enum'
-import AddKonnectorCard from './AddKonnectorCard'
-
-import { fluidStatusData } from '../../../tests/__mocks__/fluidStatusData.mock'
-
-jest.mock('cozy-ui/transpiled/react/I18n', () => {
- return {
- useI18n: jest.fn(() => {
- return {
- t: (str: string) => str,
- }
- }),
- }
-})
-
-describe('AddKonnectorCard component', () => {
- it('should be rendered correctly', () => {
- const component = shallow(
- <AddKonnectorCard
- fluidType={FluidType.ELECTRICITY}
- fluidStatus={fluidStatusData[0]}
- />
- ).getElement()
- expect(component).toMatchSnapshot()
- })
- it('should be rendered with Elec connexion', () => {
- const component = shallow(
- <AddKonnectorCard
- fluidType={FluidType.ELECTRICITY}
- fluidStatus={fluidStatusData[0]}
- />
- )
- expect(component.find('.add-konnector-title').text()).toContain(
- 'ELECTRICITY'
- )
- })
-})
diff --git a/src/components/HomeCards/AddKonnectorCard.tsx b/src/components/HomeCards/AddKonnectorCard.tsx
deleted file mode 100644
index 723bffa39..000000000
--- a/src/components/HomeCards/AddKonnectorCard.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { useCallback } from 'react'
-import { useHistory } from 'react-router-dom'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-
-import { FluidType } from 'enum/fluid.enum'
-import { getAddPicto } from 'utils/picto'
-
-import StyledCard from 'components/CommonKit/Card/StyledCard'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import './addKonnectorCard.scss'
-import { FluidStatus } from 'models'
-
-interface AddKonnectorCardProps {
- fluidType: FluidType
- fluidStatus: FluidStatus
-}
-
-const AddKonnectorCard: React.FC<AddKonnectorCardProps> = ({
- fluidStatus,
- fluidType,
-}: AddKonnectorCardProps) => {
- const { t } = useI18n()
- const history = useHistory()
- const iconAddType = getAddPicto(fluidStatus.fluidType)
-
- const goToKonnector = useCallback(() => {
- history.push(`/options/${fluidType}`)
- }, [history, fluidType])
-
- return (
- <StyledCard
- fluidType={fluidType}
- className="fluidcard-content add-konnector-card"
- onClick={goToKonnector}
- >
- <StyledIcon className="add-konnector-icon" icon={iconAddType} size={50} />
- <div className="add-konnector-title">
- {t('FLUID.' + FluidType[fluidType] + '.ADD')}
- </div>
- </StyledCard>
- )
-}
-
-export default AddKonnectorCard
diff --git a/src/components/HomeCards/FluidCard.spec.tsx b/src/components/HomeCards/FluidCard.spec.tsx
deleted file mode 100644
index 9019702f8..000000000
--- a/src/components/HomeCards/FluidCard.spec.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-import FluidCard from './FluidCard'
-import { FluidType } from 'enum/fluid.enum'
-
-jest.mock('cozy-ui/transpiled/react/I18n', () => {
- return {
- useI18n: jest.fn(() => {
- return {
- t: (str: string) => str,
- }
- }),
- }
-})
-
-describe('FluidCard component', () => {
- it('should be rendered correctly', () => {
- const component = shallow(
- <FluidCard fluidType={FluidType.ELECTRICITY} />
- ).getElement()
- expect(component).toMatchSnapshot()
- })
- it('should be rendered multifluid', () => {
- const component = shallow(<FluidCard fluidType={FluidType.MULTIFLUID} />)
- expect(component.find('.mutlifluid')).toBeTruthy()
- })
-})
diff --git a/src/components/HomeCards/FluidCard.tsx b/src/components/HomeCards/FluidCard.tsx
deleted file mode 100644
index c735cc063..000000000
--- a/src/components/HomeCards/FluidCard.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { useCallback } from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useHistory } from 'react-router-dom'
-
-import { FluidType } from 'enum/fluid.enum'
-import { getPicto } from 'utils/picto'
-
-import StyledCard from 'components/CommonKit/Card/StyledCard'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import './fluidCard.scss'
-import { useClient } from 'cozy-client'
-import { UsageEventType } from 'enum/usageEvent.enum'
-import UsageEventService from 'services/usageEvent.service'
-
-interface FluidCardProps {
- fluidType: FluidType
-}
-
-const FluidCard: React.FC<FluidCardProps> = ({ fluidType }: FluidCardProps) => {
- const { t } = useI18n()
- const history = useHistory()
- const iconType = getPicto(fluidType)
- const client = useClient()
-
- const goToFluid = useCallback(async () => {
- await UsageEventService.addEvent(client, {
- type: UsageEventType.NAVIGATION_EVENT,
- target: FluidType[fluidType].toLowerCase(),
- })
-
- history.push(
- fluidType === FluidType.MULTIFLUID
- ? '/consumption'
- : `/consumption/${t(
- 'FLUID.' + FluidType[fluidType] + '.NAME'
- ).toLowerCase()}`
- )
- }, [history, fluidType, t, client])
-
- return (
- <StyledCard
- fluidType={fluidType}
- className="fluidcard-content"
- onClick={goToFluid}
- >
- <StyledIcon className="fluidcard-icon" icon={iconType} size={50} />
- <div className={`fluidcard-title ${FluidType[fluidType].toLowerCase()}`}>
- {t('FLUID.' + FluidType[fluidType] + '.LABEL')}
- </div>
- </StyledCard>
- )
-}
-
-export default FluidCard
diff --git a/src/components/HomeCards/__snapshots__/AddKonnectorCard.spec.tsx.snap b/src/components/HomeCards/__snapshots__/AddKonnectorCard.spec.tsx.snap
deleted file mode 100644
index 0912f6ba3..000000000
--- a/src/components/HomeCards/__snapshots__/AddKonnectorCard.spec.tsx.snap
+++ /dev/null
@@ -1,20 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AddKonnectorCard component should be rendered correctly 1`] = `
-<StyledCard
- className="fluidcard-content add-konnector-card"
- fluidType={0}
- onClick={[Function]}
->
- <StyledIcon
- className="add-konnector-icon"
- icon="test-file-stub"
- size={50}
- />
- <div
- className="add-konnector-title"
- >
- FLUID.ELECTRICITY.ADD
- </div>
-</StyledCard>
-`;
diff --git a/src/components/HomeCards/__snapshots__/FluidCard.spec.tsx.snap b/src/components/HomeCards/__snapshots__/FluidCard.spec.tsx.snap
deleted file mode 100644
index 809b164ba..000000000
--- a/src/components/HomeCards/__snapshots__/FluidCard.spec.tsx.snap
+++ /dev/null
@@ -1,20 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FluidCard component should be rendered correctly 1`] = `
-<StyledCard
- className="fluidcard-content"
- fluidType={0}
- onClick={[Function]}
->
- <StyledIcon
- className="fluidcard-icon"
- icon="test-file-stub"
- size={50}
- />
- <div
- className="fluidcard-title electricity"
- >
- FLUID.ELECTRICITY.LABEL
- </div>
-</StyledCard>
-`;
diff --git a/src/components/HomeCards/addKonnectorCard.scss b/src/components/HomeCards/addKonnectorCard.scss
deleted file mode 100644
index 468d37c9f..000000000
--- a/src/components/HomeCards/addKonnectorCard.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import 'src/styles/base/color';
-
-.add-konnector-card {
- height: 6rem;
- .add-konnector-icon {
- width: 2rem;
- height: 2rem;
- }
- .add-konnector-title {
- font-size: 0.875rem;
- color: $grey-bright;
- margin-top: 0.5rem;
- }
-}
diff --git a/src/components/HomeCards/fluidCard.scss b/src/components/HomeCards/fluidCard.scss
deleted file mode 100644
index 1942d1424..000000000
--- a/src/components/HomeCards/fluidCard.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@import 'src/styles/base/color';
-
-.fluidcard-content {
- &:not(:first-of-type) {
- margin-left: 0.6rem;
- }
-}
-
-button.fluidcard-content {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- text-align: center;
- height: 6rem;
- margin-top: 0;
- .fluidcard-title {
- color: $white;
- margin-top: 0.5rem;
- }
-}
diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx
index 326c55cc3..42c3cc380 100644
--- a/src/components/Konnector/KonnectorViewerCard.tsx
+++ b/src/components/Konnector/KonnectorViewerCard.tsx
@@ -16,7 +16,7 @@ import {
FluidStatus,
FluidConnection,
} from 'models'
-import { getPicto, getAddPicto, getParamPicto } from 'utils/picto'
+import { getAddPicto, getParamPicto } from 'utils/picto'
import { updateProfile } from 'store/profile/profile.actions'
import { setChallengeConsumption } from 'store/challenge/challenge.actions'
import {
@@ -51,6 +51,7 @@ import { setSelectedDate } from 'store/chart/chart.actions'
interface KonnectorViewerCardProps {
fluidStatus: FluidStatus
isParam: boolean
+ isDisconnected: boolean
}
interface ConnectParam {
connectParam: string | undefined
@@ -59,6 +60,7 @@ interface ConnectParam {
const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
fluidStatus,
isParam,
+ isDisconnected,
}: KonnectorViewerCardProps) => {
const { t } = useI18n()
const client = useClient()
@@ -84,7 +86,7 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
(state: AppStore) => state.ecolyo.challenge
)
- const iconType = getPicto(fluidStatus.fluidType)
+ const iconType = getParamPicto(fluidStatus.fluidType)
const iconAddType = isParam
? getParamPicto(fluidStatus.fluidType)
: getAddPicto(fluidStatus.fluidType)
@@ -249,71 +251,75 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
return (
<>
- <ExpansionPanel
- expanded={active}
- onChange={toggleAccordion}
- classes={{
- root: `expansion-panel-root ${
- fluidStatus.status === FluidState.ERROR ||
- fluidStatus.status === FluidState.ERROR_LOGIN_FAILED
- ? 'red-border'
- : ''
- }`,
- }}
- >
- <ExpansionPanelSummary
- aria-label={t(
- `konnector_options.accessibility.button_toggle_detail_${FluidType[
- fluidStatus.fluidType
- ].toLowerCase()}`
- )}
- expandIcon={<Icon icon={chevronDown} size={16} />}
+ {!isDisconnected ? (
+ <ExpansionPanel
+ expanded={active}
+ onChange={toggleAccordion}
classes={{
- root: 'expansion-panel-summary',
- content: 'expansion-panel-content',
+ root: `expansion-panel-root ${
+ fluidStatus.status === FluidState.ERROR ||
+ fluidStatus.status === FluidState.ERROR_LOGIN_FAILED
+ ? 'red-border'
+ : ''
+ }`,
}}
>
- <div className="konnector-icon">
- {fluidStatus.connection.account &&
- fluidStatus.status !== FluidState.ERROR_LOGIN_FAILED ? (
- <Icon icon={iconType} size={49} />
- ) : (
- <Icon icon={iconAddType} size={49} />
- )}
- {fluidStatus.status === FluidState.ERROR ? (
- <img
- className="konnector-state-picto"
- src={failurePicto}
- alt={t('konnector_options.accessibility.label_ko_status')}
- ></img>
- ) : null}
- </div>
- <div
- className={classNames('konnector-title', {
- [`${FluidType[
+ <ExpansionPanelSummary
+ aria-label={t(
+ `konnector_options.accessibility.button_toggle_detail_${FluidType[
fluidStatus.fluidType
- ].toLowerCase()}-connected text-18-bold`]:
- fluidStatus.status !== FluidState.NOT_CONNECTED,
- })}
+ ].toLowerCase()}`
+ )}
+ expandIcon={<Icon icon={chevronDown} size={16} />}
+ classes={{
+ root: 'expansion-panel-summary',
+ content: 'expansion-panel-content',
+ }}
>
- {fluidStatus.connection.account &&
- fluidStatus.status !== FluidState.ERROR_LOGIN_FAILED
- ? t('FLUID.' + FluidType[fluidStatus.fluidType] + '.LABEL')
- : t(
- `konnector_options.label_connect_to_${FluidType[
- fluidStatus.fluidType
- ].toLowerCase()}`
- )}
- </div>
- </ExpansionPanelSummary>
- <ExpansionPanelDetails
- classes={{
- root: 'expansion-panel-details',
- }}
- >
- {getConnectionCard()}
- </ExpansionPanelDetails>
- </ExpansionPanel>
+ <div className="konnector-icon">
+ {fluidStatus.connection.account &&
+ fluidStatus.status !== FluidState.ERROR_LOGIN_FAILED ? (
+ <Icon icon={iconType} size={49} />
+ ) : (
+ <Icon icon={iconAddType} size={49} />
+ )}
+ {fluidStatus.status === FluidState.ERROR ? (
+ <img
+ className="konnector-state-picto"
+ src={failurePicto}
+ alt={t('konnector_options.accessibility.label_ko_status')}
+ ></img>
+ ) : null}
+ </div>
+ <div
+ className={classNames('konnector-title', {
+ [`${FluidType[
+ fluidStatus.fluidType
+ ].toLowerCase()}-connected text-18-bold`]:
+ fluidStatus.status !== FluidState.NOT_CONNECTED,
+ })}
+ >
+ {fluidStatus.connection.account &&
+ fluidStatus.status !== FluidState.ERROR_LOGIN_FAILED
+ ? t('FLUID.' + FluidType[fluidStatus.fluidType] + '.LABEL')
+ : t(
+ `konnector_options.label_connect_to_${FluidType[
+ fluidStatus.fluidType
+ ].toLowerCase()}`
+ )}
+ </div>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails
+ classes={{
+ root: 'expansion-panel-details',
+ }}
+ >
+ {getConnectionCard()}
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ ) : (
+ <>{getConnectionCard()}</>
+ )}
<KonnectorModal
open={openModal}
isUpdating={isUpdating}
diff --git a/src/components/Konnector/KonnectorViewerList.tsx b/src/components/Konnector/KonnectorViewerList.tsx
index 8d2c8b725..9bf09ae83 100644
--- a/src/components/Konnector/KonnectorViewerList.tsx
+++ b/src/components/Konnector/KonnectorViewerList.tsx
@@ -1,36 +1,50 @@
-import React from 'react'
+import React, { useCallback } from 'react'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+
import { useSelector } from 'react-redux'
import { AppStore } from 'store'
import './konnectorViewerList.scss'
-
import { FluidStatus } from 'models'
-import KonnectorViewerCard from 'components/Konnector/KonnectorViewerCard'
-
-interface KonnectorViewerListProps {
- isParam: boolean
-}
+import StyledCard from 'components/CommonKit/Card/StyledCard'
+import { FluidType } from 'enum/fluid.enum'
+import { getAddPicto } from 'utils/picto'
+import { useHistory } from 'react-router'
-const KonnectorViewerList: React.FC<KonnectorViewerListProps> = ({
- isParam = false,
-}: KonnectorViewerListProps) => {
+const KonnectorViewerList: React.FC = () => {
const { t } = useI18n()
const { fluidStatus } = useSelector((state: AppStore) => state.ecolyo.global)
-
+ const history = useHistory()
+ const goToFluid = useCallback(
+ fluidType => {
+ history.push(`/consumption/${FluidType[fluidType].toLowerCase()}`)
+ },
+ [history]
+ )
return (
<div className="kv-root">
<div className="kv-content">
- <div className="kv-header text-16-normal-uppercase">
- {t('konnector_form.title')}
- </div>
<div>
- {fluidStatus.map((fluidStatusItem: FluidStatus, index: number) => {
+ {fluidStatus.map((fluidStatusItem: FluidStatus, key: number) => {
return (
- <KonnectorViewerCard
- key={index}
- isParam={isParam}
- fluidStatus={fluidStatusItem}
- />
+ <StyledCard
+ key={key}
+ className="connection-card"
+ onClick={() => goToFluid(fluidStatusItem.fluidType)}
+ >
+ <Icon icon={getAddPicto(fluidStatusItem.fluidType)} size={36} />
+ <div
+ className={`konnector-title text-18-bold ${FluidType[
+ fluidStatusItem.fluidType
+ ].toLowerCase()}`}
+ >
+ {t(
+ `konnector_options.label_connect_to_${FluidType[
+ fluidStatusItem.fluidType
+ ].toLowerCase()}`
+ )}
+ </div>
+ </StyledCard>
)
})}
</div>
diff --git a/src/components/Konnector/konnectorViewerList.scss b/src/components/Konnector/konnectorViewerList.scss
index 9b94c867f..b2a603cd3 100644
--- a/src/components/Konnector/konnectorViewerList.scss
+++ b/src/components/Konnector/konnectorViewerList.scss
@@ -6,7 +6,7 @@
flex-direction: column;
align-items: center;
justify-content: center;
- padding: 0 1.5rem;
+ padding: 1.5rem 1rem 1rem 1rem;
.kv-content {
width: 45.75rem;
@media #{$large-phone} {
@@ -19,10 +19,14 @@
}
}
}
-.state-icon {
- height: 22px;
- width: 22px;
- position: absolute;
- bottom: 8px;
- left: 30px;
+button.connection-card div {
+ display: flex;
+ align-items: center;
+ justify-content: start;
+ height: 80px;
+ font-weight: normal;
+ box-sizing: border-box;
+ svg {
+ margin-right: 1.5rem;
+ }
}
diff --git a/src/components/Options/OptionsView.tsx b/src/components/Options/OptionsView.tsx
index 73205bfea..a6fb18867 100644
--- a/src/components/Options/OptionsView.tsx
+++ b/src/components/Options/OptionsView.tsx
@@ -2,7 +2,6 @@ import React, { useState } from 'react'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
import Content from 'components/Content/Content'
-import KonnectorViewerList from 'components/Konnector/KonnectorViewerList'
import ReportOptions from 'components/Options/ReportOptions'
import FAQLink from 'components/FAQ/FAQLink'
import LegalNoticeLink from 'components/LegalNotice/LegalNoticeLink'
@@ -25,7 +24,6 @@ const OptionsView: React.FC = () => {
desktopTitleKey={'common.title_options'}
></Header>
<Content height={headerHeight}>
- <KonnectorViewerList isParam={true} />
<ProfileTypeOptions />
<ReportOptions />
<FAQLink />
diff --git a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
index 8cb686a01..a77207e38 100644
--- a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
+++ b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
@@ -12,9 +12,6 @@ exports[`OptionsView component should be rendered correctly 1`] = `
<Content
height={0}
>
- <KonnectorViewerList
- isParam={true}
- />
<ProfileTypeOptions />
<ReportOptions />
<FAQLink />
diff --git a/src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx b/src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx
index e3abfac38..0de905de9 100644
--- a/src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx
+++ b/src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx
@@ -49,12 +49,8 @@ const FluidPerformanceIndicator: React.FC<FluidPerformanceIndicatorProps> = ({
})
dispatch(setCurrentTimeStep(TimeStep.DAY))
dispatch(setSelectedDate(date))
- history.push(
- `/consumption/${t(
- 'FLUID.' + FluidType[fluidType] + '.NAME'
- ).toLowerCase()}`
- )
- }, [t, dispatch, history, date, fluidType, client])
+ history.push(`/consumption/${FluidType[fluidType].toLowerCase()}`)
+ }, [dispatch, history, date, fluidType, client])
return (
<StyledCard onClick={handleClick} fluidType={fluidType}>
diff --git a/src/components/Routes/Routes.tsx b/src/components/Routes/Routes.tsx
index 1be9bf646..15879a680 100644
--- a/src/components/Routes/Routes.tsx
+++ b/src/components/Routes/Routes.tsx
@@ -9,10 +9,7 @@ import ActionView from 'components/Action/ActionView'
import UnSubscribe from 'components/Options/UnSubscribe'
import TermsView from 'components/Terms/TermsView'
-const HomeView = lazy(() => import('components/Home/HomeView'))
-const SingleFluidView = lazy(() =>
- import('components/SingleFluid/SingleFluidView')
-)
+const ConsumptionView = lazy(() => import('components/Home/ConsumptionView'))
const EcogestureView = lazy(() =>
import('components/Ecogesture/EcogestureView')
@@ -48,19 +45,22 @@ const Routes: React.FC<RouteProps> = ({ isLastTermAccepted }: RouteProps) => {
path="/consumption"
render={({ match: { url } }) => (
<>
- <Route path={`${url}/electricité`} exact>
- <SingleFluidView fluidType={FluidType.ELECTRICITY} />
+ <Route path={`${url}/electricity`} exact>
+ <ConsumptionView fluidType={FluidType.ELECTRICITY} />
+ </Route>
+ <Route path={`${url}/water`} exact>
+ <ConsumptionView fluidType={FluidType.WATER} />
</Route>
- <Route path={`${url}/eau`} exact>
- <SingleFluidView fluidType={FluidType.WATER} />
+ <Route path={`${url}/gas`} exact>
+ <ConsumptionView fluidType={FluidType.GAS} />
</Route>
- <Route path={`${url}/gaz`} exact>
- <SingleFluidView fluidType={FluidType.GAS} />
+ <Route path={`${url}/`} exact>
+ <ConsumptionView fluidType={FluidType.MULTIFLUID} />
</Route>
- <Route path={`${url}/`} component={HomeView} exact />
</>
)}
/>
+
<Route
path="/challenges"
render={({ match: { url } }) => (
diff --git a/src/components/SingleFluid/SingleFluidView.tsx b/src/components/SingleFluid/SingleFluidView.tsx
deleted file mode 100644
index c59230923..000000000
--- a/src/components/SingleFluid/SingleFluidView.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import './singleFluidView.scss'
-import { useSelector, useDispatch } from 'react-redux'
-import { AppStore } from 'store'
-import classNames from 'classnames'
-
-import { FluidType } from 'enum/fluid.enum'
-import { TimeStep } from 'enum/timeStep.enum'
-
-import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
-import CozyBar from 'components/Header/CozyBar'
-import Header from 'components/Header/Header'
-import Content from 'components/Content/Content'
-import FluidChart from 'components/FluidChart/FluidChart'
-import DateNavigator from 'components/DateNavigator/DateNavigator'
-import { setCurrentTimeStep, setLoading } from 'store/chart/chart.actions'
-import ConsumptionDetails from 'components/Home/ConsumptionDetails'
-
-interface SingleFluidViewProps {
- fluidType: FluidType
-}
-const SingleFluidView: React.FC<SingleFluidViewProps> = ({
- fluidType,
-}: SingleFluidViewProps) => {
- const dispatch = useDispatch()
- const { currentTimeStep, loading } = useSelector(
- (state: AppStore) => state.ecolyo.chart
- )
-
- const [headerHeight, setHeaderHeight] = useState<number>(0)
-
- const defineHeaderHeight = useCallback((height: number) => {
- setHeaderHeight(height)
- }, [])
-
- useEffect(() => {
- if (
- fluidType !== FluidType.ELECTRICITY &&
- currentTimeStep == TimeStep.HALF_AN_HOUR
- ) {
- dispatch(setCurrentTimeStep(TimeStep.WEEK))
- }
- }, [dispatch, fluidType, currentTimeStep])
-
- useEffect(() => {
- dispatch(setLoading(true))
- }, [dispatch])
-
- return (
- <>
- <CozyBar
- titleKey={`FLUID.${FluidType[fluidType]}.NAME`}
- displayBackArrow={true}
- />
- <Header
- setHeaderHeight={defineHeaderHeight}
- desktopTitleKey={`FLUID.${FluidType[fluidType]}.NAME`}
- displayBackArrow={true}
- >
- <DateNavigator />
- </Header>
- <Content height={headerHeight}>
- {loading && (
- <div className={'singlefluidview-loading'} aria-busy="true">
- <StyledSpinner size="5em" fluidType={fluidType} />
- </div>
- )}
- <div
- className={classNames('singlefluidview-content', {
- ['--hidden']: loading,
- })}
- >
- <FluidChart fluidType={fluidType} />
- <ConsumptionDetails fluidType={fluidType} />
- </div>
- </Content>
- </>
- )
-}
-
-export default SingleFluidView
diff --git a/src/components/SingleFluid/singleFluidView.scss b/src/components/SingleFluid/singleFluidView.scss
deleted file mode 100644
index d3202ad7a..000000000
--- a/src/components/SingleFluid/singleFluidView.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.singlefluidview-loading {
- height: 80vh;
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-.singlefluidview-content {
- &.--hidden{
- display: none;
- }
-}
\ No newline at end of file
diff --git a/src/components/HomeCards/TotalConsumption.spec.tsx b/src/components/TotalConsumption/TotalConsumption.spec.tsx
similarity index 100%
rename from src/components/HomeCards/TotalConsumption.spec.tsx
rename to src/components/TotalConsumption/TotalConsumption.spec.tsx
diff --git a/src/components/HomeCards/TotalConsumption.tsx b/src/components/TotalConsumption/TotalConsumption.tsx
similarity index 100%
rename from src/components/HomeCards/TotalConsumption.tsx
rename to src/components/TotalConsumption/TotalConsumption.tsx
diff --git a/src/components/HomeCards/__snapshots__/TotalConsumption.spec.tsx.snap b/src/components/TotalConsumption/__snapshots__/TotalConsumption.spec.tsx.snap
similarity index 100%
rename from src/components/HomeCards/__snapshots__/TotalConsumption.spec.tsx.snap
rename to src/components/TotalConsumption/__snapshots__/TotalConsumption.spec.tsx.snap
diff --git a/src/components/HomeCards/totalConsumption.scss b/src/components/TotalConsumption/totalConsumption.scss
similarity index 100%
rename from src/components/HomeCards/totalConsumption.scss
rename to src/components/TotalConsumption/totalConsumption.scss
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 90036ca5a..3a03c4654 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -105,7 +105,8 @@
"placeholder": "Adresse mail",
"label1": "J'accède à mon",
"label2": "espace client Enedis",
- "info": "Pour accéder à vos données de consommation électrique, connectez-vous à votre compte Enedis via le bouton ci-dessous. Enedis est responsable de votre compteur Linky et en charge de relever vos consommations."
+ "info": "Veuillez donner votre accord pour qu’Enedis nous transmette vos données de consommation.",
+ "info2": "Enedis est responsable de votre compteur Linky et en charge de relever vos consommations."
},
"no_account": {
"title": "Pas de compte Enedis ?",
@@ -133,7 +134,8 @@
"placeholder": "Adresse email",
"label1": "Je me connecte à",
"label2": "mon compte GRDF",
- "info": "Pour accéder à vos données de consommation gaz, connectez-vous à votre compte GRDF. GRDF est responsable de votre compteur Gazpar et en charge de relever vos consommations."
+ "info": "Veuillez donner votre accord pour que GRDF nous transmette vos données de consommation.",
+ "info2": "GRDF est responsable de votre compteur Gazpar et en charge de relever vos consommations."
},
"no_account": {
"title": "Pas de compte GRDF ?",
@@ -495,7 +497,6 @@
}
},
"konnector_form": {
- "title": "Connexion aux distributeurs",
"label_updated_at": "dernière mise-à-jour le",
"button_update": "Mettre à jour",
"button_delete": "Supprimer",
@@ -507,6 +508,9 @@
"error_update": "Un problème est survenu lors du rapatriement de vos données.",
"error_update_oauth": "Le service demande d'autoriser à nouveau votre accès. Merci de supprimer puis reconnecter votre compte. Aucune donnée ne sera perdue.",
"OK": "Ok",
+ "not_connected_gas": "Ecolyo n'est pas connecté au gaz ",
+ "not_connected_electricity": "Ecolyo n'est pas connecté à l'électricité ",
+ "not_connected_water": "Ecolyo n'est pas connecté à l'eau ",
"accessibility": {
"button_install": "Installer le connecteur",
"button_update": "Mettre à jour votre connexion",
diff --git a/src/styles/base/_layout.scss b/src/styles/base/_layout.scss
index 2abaa0cde..5210a2da9 100644
--- a/src/styles/base/_layout.scss
+++ b/src/styles/base/_layout.scss
@@ -59,11 +59,6 @@ body {
@media #{$large-phone} {
top: 0;
}
- .header-bar {
- background: linear-gradient(180deg, #000000 0%, rgba(27, 28, 34, 0) 70%);
- height: 8px;
- width: 100%;
- }
.header-top {
background: radial-gradient(
74.83% 76.97% at 50% 13.64%,
diff --git a/src/utils/picto.ts b/src/utils/picto.ts
index 850937511..f85d0efc5 100644
--- a/src/utils/picto.ts
+++ b/src/utils/picto.ts
@@ -1,6 +1,9 @@
import ElecIcon from '../assets/icons/visu/elec.svg'
+import ElecUnactive from '../assets/icons/visu/elec-grey.svg'
import WaterIcon from '../assets/icons/visu/water.svg'
+import WaterUnactive from '../assets/icons/visu/water-grey.svg'
import GasIcon from '../assets/icons/visu/gas.svg'
+import GasUnactive from '../assets/icons/visu/gas-grey.svg'
import ElecSmallIcon from '../assets/icons/visu/elec-small.svg'
import WaterSmallIcon from '../assets/icons/visu/water-small.svg'
import GasSmallIcon from '../assets/icons/visu/gas-small.svg'
@@ -8,7 +11,10 @@ import AddElecIcon from 'assets/icons/ico/add-elec.svg'
import AddWaterIcon from 'assets/icons/ico/add-water.svg'
import AddGasIcon from 'assets/icons/ico/add-gas.svg'
import ElecParamIcon from 'assets/icons/visu/elec-param.svg'
-import MultiIcon from 'assets/icons/visu/multi-icon.svg'
+import Multi from 'assets/icons/visu/multi.svg'
+import MultiUnactive from 'assets/icons/visu/multi-grey.svg'
+import DisconnectedActive from 'assets/icons/visu/disconnected.svg'
+import Disconnected from 'assets/icons/visu/disconnected-grey.svg'
import WaterParamIcon from 'assets/icons/visu/water-param.svg'
import GasParamIcon from 'assets/icons/visu/gas-param.svg'
import { FluidType } from '../enum/fluid.enum'
@@ -26,7 +32,7 @@ export function getPicto(type: FluidType, small = false) {
case FluidType.GAS:
return small ? GasSmallIcon : GasIcon
case FluidType.MULTIFLUID:
- return MultiIcon
+ return Multi
default:
return ElecIcon
}
@@ -60,3 +66,50 @@ export function getParamPicto(type: FluidType) {
return ElecParamIcon
}
}
+
+/**
+ * Return an icon corresponding to FuildType enum
+ * @param type FluidType
+ */
+export function getNavPicto(
+ type: FluidType,
+ active: boolean,
+ connected: boolean
+) {
+ switch (type) {
+ case FluidType.ELECTRICITY:
+ return connected
+ ? active
+ ? ElecSmallIcon
+ : ElecUnactive
+ : active
+ ? DisconnectedActive
+ : Disconnected
+ case FluidType.WATER:
+ return connected
+ ? active
+ ? WaterSmallIcon
+ : WaterUnactive
+ : active
+ ? DisconnectedActive
+ : Disconnected
+ case FluidType.GAS:
+ return connected
+ ? active
+ ? GasSmallIcon
+ : GasUnactive
+ : active
+ ? DisconnectedActive
+ : Disconnected
+ case FluidType.MULTIFLUID:
+ return connected
+ ? active
+ ? Multi
+ : MultiUnactive
+ : active
+ ? DisconnectedActive
+ : Disconnected
+ default:
+ return ElecIcon
+ }
+}
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 124e620fd..45f940a60 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -1,6 +1,6 @@
import get from 'lodash/get'
-import { GetRelationshipsReturn, Relation } from 'models'
-import { FluidType } from '../enum/fluid.enum'
+import { FluidStatus, GetRelationshipsReturn, Relation } from 'models'
+import { FluidState, FluidType } from '../enum/fluid.enum'
import { KonnectorUpdate } from '../enum/konnectorUpdate.enum'
import { DateTime } from 'luxon'
@@ -24,6 +24,31 @@ export function getKonnectorUpdateError(type: string) {
return KonnectorUpdate.ERROR_UPDATE
}
}
+
+export function isKonnectorActive(
+ fluidStatus: FluidStatus[],
+ fluidType: FluidType
+): boolean {
+ if (fluidType === FluidType.MULTIFLUID) {
+ if (
+ fluidStatus.filter(
+ fluid =>
+ fluid.status === FluidState.NOT_CONNECTED ||
+ fluid.status === FluidState.ERROR_LOGIN_FAILED
+ ).length === 3
+ ) {
+ return false
+ } else {
+ return true
+ }
+ }
+ if (
+ fluidStatus[fluidType].status === FluidState.NOT_CONNECTED ||
+ fluidStatus[fluidType].status === FluidState.ERROR_LOGIN_FAILED
+ ) {
+ return false
+ } else return true
+}
export function formatNumberValues(
value: number | null,
fluidStyle?: string,
--
GitLab