diff --git a/src/assets/icons/visu/disconnected-grey.svg b/src/assets/icons/visu/disconnected-grey.svg
new file mode 100644
index 0000000000000000000000000000000000000000..12836c7178cbf344db830f046ab77ac4e54d42a1
--- /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 0000000000000000000000000000000000000000..3dcc636176900f677b538f375d5d16dace01e3d7
--- /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 0000000000000000000000000000000000000000..a18d88a66e9f449e786d863a02df8a71dea85de4
--- /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 0000000000000000000000000000000000000000..01f147596e1360b3c8737042c9a933b8b1b560f4
--- /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 0000000000000000000000000000000000000000..15ffda8d5aeaa443da3199ae2bdebe31b44d3a33
--- /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 a3e8ba50567335277f6a6cfa3af5c4abf123e903..0000000000000000000000000000000000000000
--- 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 0000000000000000000000000000000000000000..203fdbba1869252fd69eb4ee79f1d6c2af5b77b8
--- /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 0000000000000000000000000000000000000000..bf80ae683c82dff063a2abf27d076a95e0e41716
--- /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 0000000000000000000000000000000000000000..353df1419e8dc637fe9b47bc9e7fafda282d0361
--- /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 58c291320d3d4aa67fedf6ec8a7de0189cb13489..d3c431ae610b113e19f6104d4bdfb40bb624e194 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 014e6b2133b28067612a77a5868fd6188003cf5c..2a4545433e5504700403d2767e59171fcc78d0b9 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 8478ca06ac463927604df660f32d516a0cc2f7a5..c8ce8316344b1c426af17fe4d81caf9540224dcd 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 12df801606b3759e21097f6acfa6ed2240be60de..f66e04b31c0d4e32802cbd44b4204f45e8f10295 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 00653773152bf85efd85f03b666ce1742d0a4429..b11ddd45c025fa38f26b0c5deea37c99ba6f6f4c 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 5a04afc9f03aa84594b8a34df279a8d18b0727a5..1c882b407940cb77307486d2002d39b22160e6bb 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 0000000000000000000000000000000000000000..5e81b045002b95ad56b5858202e86b63349a1aef
--- /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 d89314bce95ef4ba730bfd78a17d89d10adaf294..4477632d8821a3f1dd3294d1fb478776ebd7e599 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 b3e52680d436a1b91eba518911ac6233b419844b..0536978936e53ee1153b6c7cfec1d06721fbd0cc 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 63bde2a1f86c331073c71f6f42b70e23e00da032..d597d11730337827aaea332f8f55ca26a30199ae 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 549df9a7dc6857a387daf13e8858afc163ee67df..79439d735bede102363c3aa0418aa68c7d60600e 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 e61efb30a7159d75c93c7aa6dcd8fc423c0ba239..5a902402aef0a616080aa3b0c7e9e3513a7ff9e4 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 a828a2d0e7f7694c2233c079cb1c3eb74dc30b37..1c496d4de8a2f460ec0a1e6e9e83cae00099c09a 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 99c23ffe2e0044e973b449a6f4a4dd7649503200..8751ba7e3204f9be5c43a90dedf0ca587f77a16f 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 059982cba7c503327e410c0ce77c7f635fa96c81..d22433afecc8bdaba6b34fc94d36e0a8529dbc00 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 0be60bcfcced78769da2f9081cd1bf78254176e3..35ef9122812653b396cdcc5eec1ec7df64932472 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 a98db775c226810c8ff84bd4d1e3d2a790b1c4ce..5fdd7c022c339f8b01e15afed2a00c83ce8a349b 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 2960395d15ea027933101b94314f5c2fac90be61..63290850868c1e64f39b8fab138bd3192e73c501 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 0000000000000000000000000000000000000000..16c93051a84825c854d3d2507d26111095a529b1
--- /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 0000000000000000000000000000000000000000..c29a109e4b71f9bddcb2ac9849e18e7e9a585f7d
--- /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 0000000000000000000000000000000000000000..d8302292d174856e5b586d6d2d116ef7923913e7
--- /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 0000000000000000000000000000000000000000..06e18813a88d99421af90c577cd8e90cd669073c
--- /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 0000000000000000000000000000000000000000..07eed7d11a007b13ce3de9f539208a01e5d842af
--- /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 386d5dce3cfc1ea328947311075daa17cc6a5181..0000000000000000000000000000000000000000
--- 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 6994ba59fdd27c6d3f71a5b1a30e59a92ee51c91..0000000000000000000000000000000000000000
--- 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 0000000000000000000000000000000000000000..062bfb67a4efb775037d3dd976dad6a8913b0c7c
--- /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 0000000000000000000000000000000000000000..62953c6cfcb2c2b772eb3f11badb4e6f97e5dc57
--- /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 6428889841d3b38359dfb636eb5651443ffee5ee..bfcec46d586c97406bc344a6c0966a6f161408d8 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 0000000000000000000000000000000000000000..a00c6ae2aefcc30d5b615cf4d27eb9d2ccc461ba
--- /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 0000000000000000000000000000000000000000..5bc8da7d9b086ad7867e0a9766e55b804f545c95
--- /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 d465d7b2c8ecb9f9b7efd6713e999d32b016bcfa..0000000000000000000000000000000000000000
--- 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 7840621f083c81cd112a2baf014c25f9585271b8..0000000000000000000000000000000000000000
--- 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 723bffa390ac051097b02518610b93e4988018e7..0000000000000000000000000000000000000000
--- 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 9019702f8bff3337a98ea8e84d4dcaf92b799e5f..0000000000000000000000000000000000000000
--- 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 c735cc06363ae21b2452e411328cee154e9aed2e..0000000000000000000000000000000000000000
--- 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 0912f6ba34ff0bd07fcb27503290be32275d462f..0000000000000000000000000000000000000000
--- 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 809b164baa452448ab87e2a499cfd14e292f6b81..0000000000000000000000000000000000000000
--- 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 468d37c9fde067856f4d85cb3133f239da0b0d7b..0000000000000000000000000000000000000000
--- 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 1942d14243bf183a39c511883c3f0c1e5da0e783..0000000000000000000000000000000000000000
--- 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 326c55cc37a4cc26703a794ee50cb59c5ad4bfc7..42c3cc38074f75eaf4dd3acf1ef4eaf2a63649c3 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 8d2c8b725dc9a0180d27f0331e2e0d7fa00d1ade..9bf09ae83a2924742d2c0bf7d59765720bd3e3e4 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 9b94c867f8953202bf117a8fadc361f62779bf03..b2a603cd36590905667b50edb27d1635a9feb0f6 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 73205bfea2de34af490a7c9e461248f598a96471..a6fb18867dd2b948369bd0bd0a1ecec6c7fc5f33 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 8cb686a01e54c89e949425fb78795144ad6d929d..a77207e38365d2469fe2a4384dff0645f4ad9872 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 e3abfac385797e6ee20154c5021e736fe79bf7d0..0de905de98b67f8b75acf3101c6d0a1929b89fa6 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 1be9bf646b80aa41c25fd25959d8b8e8dae2c294..15879a680961aa1af5bf95607a6f38b77116a1ea 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 c592309232987e688fd6f878e74bfdfe0d377dcb..0000000000000000000000000000000000000000
--- 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 d3202ad7ac4dd9d2ee9564ebf07b026a28f5729b..0000000000000000000000000000000000000000
--- 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 90036ca5a73fcd609c5c1b18a351cc788d609472..3a03c46542a3e98bb17198693b3582857d418e7e 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 2abaa0cde4f99db6f2a4831297a0a23c2372d107..5210a2da96856e9b50517dc5741819354bbe29df 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 850937511034e3e0dcd7b460ce47fc2ee8d34d5b..f85d0efc5cee6d2a696f5ef3097052be41e4b54e 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 124e620fd2b22577142fd6a581e94891c68def5e..45f940a609cbcb16fc4b1976599c9bb6e642854e 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,