diff --git a/src/components/Analysis/MonthlyAnalysis.tsx b/src/components/Analysis/MonthlyAnalysis.tsx
index 078bc9ad04ef1c22cf669c349fb105d5162b845e..21c067240a86a5c054db2b6f26bc15010928713f 100644
--- a/src/components/Analysis/MonthlyAnalysis.tsx
+++ b/src/components/Analysis/MonthlyAnalysis.tsx
@@ -143,6 +143,7 @@ const MonthlyAnalysis: React.FC = () => {
performanceIndicator={aggregatedPerformanceIndicators}
timeStep={timeStep}
fluidLackOfData={fluidLackOfData}
+ isHome={false}
/>
<div>
<div className="analysis-header text-16-normal-uppercase">
diff --git a/src/components/Home/HomeIndicators.spec.tsx b/src/components/Home/HomeDetails.spec.tsx
similarity index 95%
rename from src/components/Home/HomeIndicators.spec.tsx
rename to src/components/Home/HomeDetails.spec.tsx
index c75849b725e9ca8950571381412b44840b1c846b..c1867892eea3a7a8e3f69f85a5b6ddbf5c5d4b12 100644
--- a/src/components/Home/HomeIndicators.spec.tsx
+++ b/src/components/Home/HomeDetails.spec.tsx
@@ -1,6 +1,6 @@
import React from 'react'
import { shallow } from 'enzyme'
-import HomeIndicators from './HomeIndicators'
+import HomeIndicators from './HomeDetails'
import * as reactRedux from 'react-redux'
import { globalStateData } from '../../../test/__mocks__/globalStateData.mock'
import { TimeStep } from 'enum/timeStep.enum'
diff --git a/src/components/Home/HomeIndicators.tsx b/src/components/Home/HomeDetails.tsx
similarity index 70%
rename from src/components/Home/HomeIndicators.tsx
rename to src/components/Home/HomeDetails.tsx
index e2687dcff2103d0a0ecabadf9b0c1dc305464e39..789548082008da81e789a0125005097fae424033 100644
--- a/src/components/Home/HomeIndicators.tsx
+++ b/src/components/Home/HomeDetails.tsx
@@ -14,18 +14,19 @@ import ConfigService from 'services/fluidConfig.service'
import { convertDateToShortDateString } from 'utils/date'
import PerformanceIndicatorContent from 'components/PerformanceIndicator/PerformanceIndicatorContent'
-import FluidPerformanceIndicator from 'components/PerformanceIndicator/FluidPerformanceIndicator'
-import KonnectorViewerCard from 'components/Konnector/KonnectorViewerCard'
+import FluidCard from 'components/HomeCards/FluidCard'
+import './homeDetails.scss'
+import AddKonnectorCard from 'components/HomeCards/AddKonnectorCard'
-interface HomeIndicatorsProps {
+interface HomeDetailsProps {
timeStep: TimeStep
setIndicatorsLoaded(): void
}
-const HomeIndicators: React.FC<HomeIndicatorsProps> = ({
+const HomeDetails: React.FC<HomeDetailsProps> = ({
timeStep,
setIndicatorsLoaded,
-}: HomeIndicatorsProps) => {
+}: HomeDetailsProps) => {
const { t } = useI18n()
const client = useClient()
const { fluidStatus, fluidTypes } = useSelector(
@@ -89,10 +90,9 @@ const HomeIndicators: React.FC<HomeIndicatorsProps> = ({
return (
<>
{isLoaded ? (
- <div className="fi-root">
- <div className="fi-content">
- <div className="fi-header text-14-normal-uppercase">
- {t('COMMON.CONSO_CARDS_LABEL')}{' '}
+ <div className="home-details-root">
+ <div className="home-details-content">
+ <div className="home-details-header text-14-normal-uppercase">
{convertDateToShortDateString(currentTimePeriod, timeStep, true)}
</div>
<PerformanceIndicatorContent
@@ -101,36 +101,35 @@ const HomeIndicators: React.FC<HomeIndicatorsProps> = ({
)}
timeStep={timeStep}
fluidLackOfData={fluidLackOfData}
+ isHome={true}
/>
- <div>
+ <div className="fluid-details">
<span className="text-16-normal-uppercase details-title">
{t('INDICATOR.DETAIL')}
- {convertDateToShortDateString(
- currentTimePeriod,
- timeStep,
- true
- )}
</span>
- {fluidConfig.map((fluid, index) => {
- return fluidTypes.includes(fluid.fluidTypeId) ? (
- <FluidPerformanceIndicator
- key={index}
- fluidType={fluid.fluidTypeId}
- performanceIndicator={
- performanceIndicators[fluid.fluidTypeId]
- }
- />
- ) : null
- })}
- {fluidConfig.map((fluid, index) => {
- return fluidTypes.includes(fluid.fluidTypeId) ? null : (
- <KonnectorViewerCard
- key={index}
- fluidStatus={fluidStatus[index]}
- isParam={false}
- />
- )
- })}
+ <div className="home-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('INDICATOR.CONNECT')}
+ </span>
+ )}
+ <div className="home-details-container">
+ {fluidConfig.map((fluid, index) => {
+ return fluidTypes.includes(fluid.fluidTypeId) ? null : (
+ <AddKonnectorCard
+ key={index}
+ fluidStatus={fluidStatus[index]}
+ fluidType={fluid.fluidTypeId}
+ />
+ )
+ })}
+ </div>
</div>
</div>
</div>
@@ -139,4 +138,4 @@ const HomeIndicators: React.FC<HomeIndicatorsProps> = ({
)
}
-export default HomeIndicators
+export default HomeDetails
diff --git a/src/components/Home/HomeView.tsx b/src/components/Home/HomeView.tsx
index 76a9df467da2438a59e2bba9c2737e1c8c65af52..47d550442cb6d84454da58596b81fc674ebedb54 100644
--- a/src/components/Home/HomeView.tsx
+++ b/src/components/Home/HomeView.tsx
@@ -12,7 +12,7 @@ import Header from 'components/Header/Header'
import Content from 'components/Content/Content'
import FluidChart from 'components/FluidChart/FluidChart'
import ConsumptionNavigator from 'components/ConsumptionNavigator/ConsumptionNavigator'
-import HomeIndicators from 'components/Home/HomeIndicators'
+import HomeDetails from 'components/Home/HomeDetails'
import KonnectorViewerList from 'components/Konnector/KonnectorViewerList'
import OldFluidDataModal from 'components/Home/OldFluidDataModal'
@@ -158,7 +158,7 @@ const HomeView: React.FC = () => {
multiFluid={true}
setChartLoaded={setChartLoaded}
/>
- <HomeIndicators
+ <HomeDetails
timeStep={timeStep}
setIndicatorsLoaded={setIndicatorsLoaded}
/>
diff --git a/src/components/Home/homeDetails.scss b/src/components/Home/homeDetails.scss
new file mode 100644
index 0000000000000000000000000000000000000000..38b30d4f9b6f4702287cc57847339b7b5cbf2653
--- /dev/null
+++ b/src/components/Home/homeDetails.scss
@@ -0,0 +1,35 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+.home-details-root {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 0.5rem 1.5rem;
+ @media #{$large-phone} {
+ margin-bottom: 0;
+ }
+ .home-details-content {
+ min-height: 23.875rem;
+ width: 45.75rem;
+ @media #{$large-phone} {
+ width: 100%;
+ }
+ .home-details-header {
+ margin-top: 1rem;
+ margin-bottom: 1.25rem;
+ color: $grey-bright;
+ font-size: 1rem;
+ }
+ .fluid-details {
+ margin-top: 2rem;
+ }
+ }
+}
+
+.home-details-container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
diff --git a/src/components/HomeCards/AddKonnectorCard.tsx b/src/components/HomeCards/AddKonnectorCard.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ce9a2857a4744507b88bb1963449789e72e2e02e
--- /dev/null
+++ b/src/components/HomeCards/AddKonnectorCard.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import { NavLink } 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 iconAddType = getAddPicto(fluidStatus.fluidType)
+ return (
+ <NavLink className="fluidcard-link" to="/options">
+ <StyledCard
+ fluidType={fluidType}
+ className="fluidcard-content add-konnector-card"
+ >
+ <StyledIcon
+ className="add-konnector-icon"
+ icon={iconAddType}
+ size={50}
+ />
+ <div className="add-konnector-title">
+ {t('FLUID.' + FluidType[fluidType] + '.ADD')}
+ </div>
+ </StyledCard>
+ </NavLink>
+ )
+}
+
+export default AddKonnectorCard
diff --git a/src/components/HomeCards/FluidCard.tsx b/src/components/HomeCards/FluidCard.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0ea778945b19d764fb283770e43d1c8539c3d16f
--- /dev/null
+++ b/src/components/HomeCards/FluidCard.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import { NavLink } from 'react-router-dom'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+
+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'
+
+interface FluidCardProps {
+ fluidType: FluidType
+}
+
+const FluidCard: React.FC<FluidCardProps> = ({ fluidType }: FluidCardProps) => {
+ const { t } = useI18n()
+ const iconType = getPicto(fluidType)
+
+ return (
+ <NavLink
+ className="fluidcard-link"
+ to={`/consumption/${t(
+ 'FLUID.' + FluidType[fluidType] + '.NAME'
+ ).toLowerCase()}`}
+ >
+ <StyledCard fluidType={fluidType} className="fluidcard-content">
+ <StyledIcon className="fluidcard-icon" icon={iconType} size={50} />
+ <div
+ className={`fluidcard-title ${FluidType[fluidType].toLowerCase()}`}
+ >
+ {t('FLUID.' + FluidType[fluidType] + '.LABEL')}
+ </div>
+ </StyledCard>
+ </NavLink>
+ )
+}
+
+export default FluidCard
diff --git a/src/components/HomeCards/addKonnectorCard.scss b/src/components/HomeCards/addKonnectorCard.scss
new file mode 100644
index 0000000000000000000000000000000000000000..468d37c9fde067856f4d85cb3133f239da0b0d7b
--- /dev/null
+++ b/src/components/HomeCards/addKonnectorCard.scss
@@ -0,0 +1,14 @@
+@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
new file mode 100644
index 0000000000000000000000000000000000000000..43be12d1f303dec3bde734f882a8750020701ca0
--- /dev/null
+++ b/src/components/HomeCards/fluidCard.scss
@@ -0,0 +1,29 @@
+@import 'src/styles/base/color';
+
+.fluidcard-link {
+ width: 100%;
+ text-decoration: none;
+ &: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;
+ .fluidcard-title {
+ &.gas {
+ color: $gas-color;
+ }
+ &.electricity {
+ color: $elec-color;
+ }
+ &.water {
+ color: $water-color;
+ }
+ }
+}
diff --git a/src/components/PerformanceIndicator/PerformanceIndicatorContent.tsx b/src/components/PerformanceIndicator/PerformanceIndicatorContent.tsx
index d22b9781d0a7f724c278b91382cccbb4ef72df16..07c183a90225ce687f59ed0d63b801483114836e 100644
--- a/src/components/PerformanceIndicator/PerformanceIndicatorContent.tsx
+++ b/src/components/PerformanceIndicator/PerformanceIndicatorContent.tsx
@@ -19,12 +19,14 @@ interface PerformanceIndicatorContentProps {
performanceIndicator: PerformanceIndicator
timeStep: TimeStep
fluidLackOfData?: Array<FluidType>
+ isHome: boolean
}
const PerformanceIndicatorContent: React.FC<PerformanceIndicatorContentProps> = ({
performanceIndicator,
timeStep,
fluidLackOfData = [],
+ isHome,
}: PerformanceIndicatorContentProps) => {
const { t } = useI18n()
let displayedValue: string
@@ -105,68 +107,72 @@ const PerformanceIndicatorContent: React.FC<PerformanceIndicatorContentProps> =
</div>
</div>
</div>
- {perfStatus[0] === 'positive' ||
- perfStatus[0] === 'negative' ||
- perfStatus[0] === 'zero' ? (
- <div className="fpi-content-perf-indicator bilan-card card-text">
- <div className="icon-line">
- <StyledIcon
- className="fpi-content-icon perf-icon"
- icon={perfStatus[1]}
- size={35}
- />
- <div className="evolution-text">
- {t('INDICATOR.BILAN.TEXT1')}
- <span
- className={`fpi-content-perf-indicator-kpi ${perfStatus[0]} card-text-bold`}
- >
- {perfStatus[0] === 'positive' ? ' + ' : ' '}
- {perfString}%
- </span>
- <br />
- <span>
- {t('INDICATOR.BILAN.TEXT2')}
- <span className="diff-value">{diffString} €</span>
- <br />
- {t(
- 'INDICATOR.BILAN.' +
- `${getRelevantFrequencyLabel(timeStep)}`
- )}
- </span>
- </div>
- </div>
- </div>
- ) : (
- <div className="fpi-content-perf-indicator card-text error">
- <StyledIcon
- className="fpi-content-icon perf-icon"
- icon={perfStatus[1]}
- size={35}
- />
-
- {fluidLackOfData.length !== 0 ? (
- <div>
- <div> {t('INDICATOR.ERROR_NO_COMPARE_NO_DATA')} </div>
- <div>
- {fluidLackOfData.map(fluidType => {
- return (
- <div key={fluidType} className="fluid-enum">
- {' '}
- - {t(
- 'FLUID.' + FluidType[fluidType] + '.NAME'
- )}{' '}
- </div>
- )
- })}
+ {!isHome && (
+ <>
+ {perfStatus[0] === 'positive' ||
+ perfStatus[0] === 'negative' ||
+ perfStatus[0] === 'zero' ? (
+ <div className="fpi-content-perf-indicator bilan-card card-text">
+ <div className="icon-line">
+ <StyledIcon
+ className="fpi-content-icon perf-icon"
+ icon={perfStatus[1]}
+ size={35}
+ />
+ <div className="evolution-text">
+ {t('INDICATOR.BILAN.TEXT1')}
+ <span
+ className={`fpi-content-perf-indicator-kpi ${perfStatus[0]} card-text-bold`}
+ >
+ {perfStatus[0] === 'positive' ? ' + ' : ' '}
+ {perfString}%
+ </span>
+ <br />
+ <span>
+ {t('INDICATOR.BILAN.TEXT2')}
+ <span className="diff-value">{diffString} €</span>
+ <br />
+ {t(
+ 'INDICATOR.BILAN.' +
+ `${getRelevantFrequencyLabel(timeStep)}`
+ )}
+ </span>
+ </div>
</div>
</div>
) : (
- <div>
- <div> {t('INDICATOR.ERROR_NO_COMPARE')} </div>
- <div> {t('INDICATOR.ERROR_NO_COMPARE_REASON')} </div>
+ <div className="fpi-content-perf-indicator card-text error">
+ <StyledIcon
+ className="fpi-content-icon perf-icon"
+ icon={perfStatus[1]}
+ size={35}
+ />
+
+ {fluidLackOfData.length !== 0 ? (
+ <div>
+ <div> {t('INDICATOR.ERROR_NO_COMPARE_NO_DATA')} </div>
+ <div>
+ {fluidLackOfData.map(fluidType => {
+ return (
+ <div key={fluidType} className="fluid-enum">
+ {' '}
+ - {t(
+ 'FLUID.' + FluidType[fluidType] + '.NAME'
+ )}{' '}
+ </div>
+ )
+ })}
+ </div>
+ </div>
+ ) : (
+ <div>
+ <div> {t('INDICATOR.ERROR_NO_COMPARE')} </div>
+ <div> {t('INDICATOR.ERROR_NO_COMPARE_REASON')} </div>
+ </div>
+ )}
</div>
)}
- </div>
+ </>
)}
</div>
</div>
diff --git a/src/components/PerformanceIndicator/performanceIndicatorContent.scss b/src/components/PerformanceIndicator/performanceIndicatorContent.scss
new file mode 100644
index 0000000000000000000000000000000000000000..70a2d267d23e5f96c2051fab08ae8c71f75e32d6
--- /dev/null
+++ b/src/components/PerformanceIndicator/performanceIndicatorContent.scss
@@ -0,0 +1,3 @@
+.performance-indicator {
+ margin-bottom: 2rem;
+}
diff --git a/src/components/SingleFluid/SingleFluidIndicators.tsx b/src/components/SingleFluid/SingleFluidIndicators.tsx
index 6b0a5d73cfb88f4295b0cab6d7f8516053492edc..674024152ab03ea62f4066d7ea98bdf69dcd235b 100644
--- a/src/components/SingleFluid/SingleFluidIndicators.tsx
+++ b/src/components/SingleFluid/SingleFluidIndicators.tsx
@@ -96,6 +96,7 @@ const SingleFluidIndicators: React.FC<SingleFluidIndicatorsProps> = ({
performanceIndicators
)}
timeStep={timeStep}
+ isHome={true}
/>
{filteredFluidTypes && filteredFluidTypes.length > 0 && (
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 88a31debeb81cabbf9add61b5cada8deddf606e3..17cde8b5511cf434397c7998b9d55279336d4a92 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -69,6 +69,7 @@
"NAME": "Electricité",
"LABEL": "Électricité",
"UNIT": "kWh",
+ "ADD": "Ajouter l'électricité",
"MEGAUNIT": "MWh",
"RELEVANT_METRICS": [
{ "BULB": "Vous avez consommé l'équivalent de 42 ampoules" },
@@ -81,6 +82,7 @@
"WATER": {
"NAME": "Eau",
"LABEL": "Eau",
+ "ADD": "Ajouter l'eau",
"UNIT": "L",
"MEGAUNIT": "m³",
"provider": "Eau du Grand Lyon"
@@ -88,6 +90,7 @@
"GAS": {
"NAME": "Gaz",
"LABEL": "Gaz",
+ "ADD": "Ajouter le gaz",
"UNIT": "kWh",
"MEGAUNIT": "MWh",
"provider": "GRDF"
@@ -174,7 +177,8 @@
"OK": "Ok"
},
"INDICATOR": {
- "DETAIL": "Détail",
+ "DETAIL": "Détail par fluide",
+ "CONNECT": "Connecter d'autres fluides",
"BILAN": {
"TEXT1": "Evolution de : ",
"TEXT2": "soit une différence de : ",