diff --git a/src/assets/icons/visu/offline-param.svg b/src/assets/icons/visu/offline-param.svg
new file mode 100644
index 0000000000000000000000000000000000000000..dcd75ad76d78ca9253d2e7195848e67289a1091a
--- /dev/null
+++ b/src/assets/icons/visu/offline-param.svg
@@ -0,0 +1,5 @@
+<svg width="51" height="52" viewBox="0 0 51 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="25.5" cy="26.25" r="25" fill="#121212" stroke="#7B7B7B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.0044 49.2337C31.3552 50.2143 28.4902 50.75 25.5 50.75C15.1546 50.75 6.3069 44.3379 2.71426 35.2711H4.09929L4.4043 34.0316C5.01421 32.4823 5.62412 30.9331 6.23404 29.6937L6.84396 28.7641L3.18439 25.0458C2.57446 24.7359 2.57446 24.4261 2.57446 24.4261C2.57446 24.4261 2.57446 24.1162 2.87943 23.8063L5.62411 21.0176C5.92907 20.7077 6.23404 20.7077 6.23404 20.7077L10.1986 24.7359L11.1135 24.1162C12.6383 23.1866 14.1631 22.257 15.9929 21.9472L17.2128 21.6373V15.75H22.3972V21.3275L23.617 21.6373C25.4468 22.257 26.9716 22.8768 28.4964 23.8063L29.4113 24.4261L32.7659 21.0176C33.0709 20.3979 33.3759 20.3979 33.3759 20.3979C33.3759 20.3979 33.6808 20.3979 33.9858 20.7077L36.7305 23.4965C37.0355 23.8063 37.0355 24.1162 37.0355 24.1162L32.7659 28.4542L33.3759 29.3838C34.2908 30.9331 34.9007 32.1725 35.2057 33.7218L35.5106 34.9613H41V40.5387H35.5106L35.2057 41.7782C34.5957 43.6373 33.9858 45.1866 33.0709 46.7359L32.461 47.6655L34.0044 49.2337ZM14 37.0643C14 33.7214 16.9714 30.75 20.6857 30.75C24.4 30.75 27 33.7214 27 37.0643C27 40.7786 24.4 43.75 20.6857 43.75C16.9714 43.75 14 40.7786 14 37.0643Z" fill="#7B7B7B"/>
+<path d="M40.5886 19.75H45.4113V14.2641L46.5461 13.9754C46.5945 13.9655 46.6425 13.9553 46.6903 13.9448C42.4463 6.65218 34.5457 1.75 25.5 1.75C24.656 1.75 23.822 1.79268 23 1.87599V2.13732H28.1064L28.3901 3.29225C28.6738 5.02464 29.5248 6.4683 30.3759 7.91195L30.9433 8.77816L26.9716 12.8204C26.9716 12.8204 26.9716 13.1091 27.2553 13.3979L29.8085 15.9965C30.0922 16.2852 30.3759 16.2852 30.3759 16.2852C30.3759 16.2852 30.6596 16.2852 30.9433 15.7077L34.3475 12.243L35.1986 12.8204C35.9936 13.4273 36.9279 13.7507 37.9038 14.0885C38.3209 14.2329 38.7455 14.3799 39.1702 14.5528L40.305 14.8415V19.4613C40.5887 19.4613 40.5886 19.4613 40.5886 19.75Z" fill="#7B7B7B" fill-opacity="0.5"/>
+</svg>
diff --git a/src/components/CommonKit/Card/StyledCard.tsx b/src/components/CommonKit/Card/StyledCard.tsx
index c6a10c174f8a963203718d9ca263be35aefab5d5..caa675934560fd85d01f6e77e99f1a3d159391de 100644
--- a/src/components/CommonKit/Card/StyledCard.tsx
+++ b/src/components/CommonKit/Card/StyledCard.tsx
@@ -12,7 +12,7 @@ const CardBase = withStyles({
boxSizing: 'border-box',
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.75)',
borderRadius: '4px',
- margin: '10px 0px 20px 0px',
+ margin: '10px 0px 10px 0px',
},
})(CardActionArea) as React.FC<StyledCardProps>
diff --git a/src/components/Connection/connection.scss b/src/components/Connection/connection.scss
index 023ce95fe7fd2dce854b0ddcbc9e320a19ab34b6..dba6ead256a7f487f925308624793d2c3b135cfd 100644
--- a/src/components/Connection/connection.scss
+++ b/src/components/Connection/connection.scss
@@ -18,8 +18,7 @@
font-weight: bold;
}
.connection-form-title {
- margin-top: 0;
- padding: 0 1rem;
+ margin: 0;
&.enedissgegrandlyon {
color: $elec-color;
}
@@ -31,6 +30,7 @@
}
}
.connection-form-subtitle {
+ margin: 0 auto 0.5rem auto;
color: $white;
}
.connection-form-infotext {
diff --git a/src/components/FluidChart/fluidChart.scss b/src/components/FluidChart/fluidChart.scss
index ddd1e84f187533863f33a7cf447656d18452727e..bc1536b6cace470356a4edaae9cee782947a1c62 100644
--- a/src/components/FluidChart/fluidChart.scss
+++ b/src/components/FluidChart/fluidChart.scss
@@ -4,10 +4,8 @@
.fluidchart-root {
background-color: $dark-light-2;
padding: 0.5rem 2rem 1rem 2rem;
- margin-bottom: 1rem;
@media #{$large-phone} {
padding: 0rem 1rem 1rem 1rem;
- margin-bottom: 0rem;
}
}
.fluidchart-content {
@@ -80,8 +78,10 @@
cursor: pointer;
text-decoration: underline;
}
-}
-
-button {
- max-width: 22.5rem;
+ button {
+ margin-top: 0rem !important;
+ width: 70% !important;
+ height: 40px !important;
+ max-width: 22.5rem;
+ }
}
diff --git a/src/components/Home/ConsumptionView.tsx b/src/components/Home/ConsumptionView.tsx
index ab268ed1cea10a17f5af7b36963e353b496743ec..baa2de7e732b7acab84bb7e4def60d4ff12de6ce 100644
--- a/src/components/Home/ConsumptionView.tsx
+++ b/src/components/Home/ConsumptionView.tsx
@@ -216,6 +216,7 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
fluidType={fluidType}
isParam={true}
isDisconnected={false}
+ showOfflineData={true}
setActive={setActive}
active={active}
key={fluidType}
@@ -234,6 +235,7 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
fluidType={fluidType}
isParam={false}
isDisconnected={true}
+ showOfflineData={false}
setActive={setActive}
active={active}
/>
diff --git a/src/components/Home/consumptionView.scss b/src/components/Home/consumptionView.scss
index ff6b76363fa44ddd30bf3ed4de1916b8de7e6f53..f06c407a5913320cf0e2444356ad729786c7545a 100644
--- a/src/components/Home/consumptionView.scss
+++ b/src/components/Home/consumptionView.scss
@@ -17,14 +17,11 @@
}
.konnector-section {
background-color: $default-background;
- margin: auto;
+ margin: 0 auto;
width: 45.75rem;
box-sizing: border-box;
- margin-top: 1rem;
- margin-bottom: 2rem;
@media #{$large-phone} {
width: 100%;
padding: 0rem 1rem 3rem 1rem;
- margin-bottom: 0;
}
}
diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx
index 4ea9c7b4fa0203b3370f71e8bc80f920bfa7fdfe..f1f613b0236e10717c1976db947c67be6c4a8d9b 100644
--- a/src/components/Konnector/KonnectorViewerCard.tsx
+++ b/src/components/Konnector/KonnectorViewerCard.tsx
@@ -2,10 +2,12 @@ import {
Accordion,
AccordionDetails,
AccordionSummary,
+ Button,
} from '@material-ui/core'
import chevronDown from 'assets/icons/ico/chevron-down.svg'
import ErrorNotif from 'assets/icons/ico/notif_error.svg'
import PartnersIssueNotif from 'assets/icons/ico/notif_maintenance.svg'
+import OfflinePicto from 'assets/icons/visu/offline-param.svg'
import classNames from 'classnames'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import Connection from 'components/Connection/Connection'
@@ -47,6 +49,7 @@ import React, {
useState,
} from 'react'
import { useDispatch, useSelector } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
import AccountService from 'services/account.service'
import ChallengeService from 'services/challenge.service'
import DateChartService from 'services/dateChart.service'
@@ -55,19 +58,22 @@ import PartnersInfoService from 'services/partnersInfo.service'
import UsageEventService from 'services/usageEvent.service'
import { AppActionsTypes, AppStore } from 'store'
import { setChallengeConsumption } from 'store/challenge/challenge.actions'
-import { setSelectedDate } from 'store/chart/chart.slice'
+import { setSelectedDate, setShowOfflineData } from 'store/chart/chart.slice'
import {
setFluidStatus,
toggleChallengeDuelNotification,
updatedFluidConnection,
} from 'store/global/global.actions'
+import { openConnectionModal } from 'store/modal/modal.slice'
import { getAddPicto, getParamPicto } from 'utils/picto'
+import { getKonnectorSlug } from 'utils/utils'
import './konnectorViewerCard.scss'
interface KonnectorViewerCardProps {
fluidStatus: FluidStatus
isParam: boolean
isDisconnected: boolean
+ showOfflineData: boolean
active: boolean
fluidType: FluidType
setActive: React.Dispatch<React.SetStateAction<boolean>>
@@ -77,6 +83,7 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
fluidStatus,
isParam,
isDisconnected,
+ showOfflineData,
active,
fluidType,
setActive,
@@ -84,6 +91,7 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
const { t } = useI18n()
const client = useClient()
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
+ const navigate = useNavigate()
const fluidSlug = fluidStatus.connection.konnectorConfig.slug
const fluidState = fluidStatus.status
@@ -291,7 +299,33 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
[client]
)
+ const toggleModalConnection = () => {
+ switch (fluidType) {
+ case FluidType.ELECTRICITY:
+ navigate('/sge-connect')
+ break
+ case FluidType.GAS:
+ case FluidType.WATER:
+ dispatch(setShowOfflineData(false))
+ dispatch(openConnectionModal(true))
+ break
+ }
+ }
+
const getConnectionCard = useCallback(() => {
+ if (showOfflineData && !account) {
+ return (
+ <Button
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-16-bold',
+ }}
+ onClick={toggleModalConnection}
+ >
+ {t(`auth.${getKonnectorSlug(fluidType)}.connect`)}
+ </Button>
+ )
+ }
if (fluidState === FluidState.KONNECTOR_NOT_FOUND && !isUpdating) {
return <ConnectionNotFound konnectorSlug={fluidSlug} />
}
@@ -352,7 +386,7 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
return (
<div className="konnector-icon">
<Icon
- icon={fluidStatus.connection.account ? iconType : iconAddType}
+ icon={fluidStatus.connection.account ? iconType : OfflinePicto}
size={49}
/>
{fluidStatus.maintenance ? (
@@ -364,7 +398,8 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
) : (
(fluidStatus.status === FluidState.ERROR ||
isOutdatedData ||
- fluidStatus.status === FluidState.ERROR_LOGIN_FAILED) && (
+ fluidStatus.status === FluidState.ERROR_LOGIN_FAILED) &&
+ fluidStatus.connection.account && (
<StyledIcon
icon={ErrorNotif}
size={24}
@@ -402,7 +437,7 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
return t(`FLUID.${FluidType[fluidStatus.fluidType]}.LABEL`)
} else {
return t(
- `konnector_options.label_connect_to_${FluidType[
+ `konnector_options.label_offline_${FluidType[
fluidStatus.fluidType
].toLowerCase()}`
)
@@ -493,8 +528,7 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
root: `expansion-panel-root ${
!fluidStatus.maintenance &&
(fluidStatus.status === FluidState.ERROR ||
- fluidStatus.status === FluidState.ERROR_LOGIN_FAILED ||
- isOutdatedData)
+ fluidStatus.status === FluidState.ERROR_LOGIN_FAILED)
? 'red-border'
: ''
}`,
@@ -516,10 +550,8 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
>
{displayKonnectorIcon()}
<div
- className={classNames('konnector-title', {
- [`${FluidType[
- fluidStatus.fluidType
- ].toLowerCase()}-connected text-16-bold`]:
+ className={classNames('text-16-bold konnector-title', {
+ [`${FluidType[fluidStatus.fluidType].toLowerCase()}-connected`]:
fluidStatus.status !== FluidState.NOT_CONNECTED &&
!fluidStatus.maintenance,
})}
@@ -536,7 +568,9 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
</AccordionDetails>
</Accordion>
) : (
- <>{getConnectionCard()}</>
+ <>
+ <AccordionDetails>{getConnectionCard()}</AccordionDetails>
+ </>
)}
<KonnectorModal
open={openModal}
diff --git a/src/components/Konnector/KonnectorViewerList.tsx b/src/components/Konnector/KonnectorViewerList.tsx
index 74d0cbba4d8d93dd5536373bb354225b2a0f0f27..9f6022b292346eacad015ff06a72a5a92bc99633 100644
--- a/src/components/Konnector/KonnectorViewerList.tsx
+++ b/src/components/Konnector/KonnectorViewerList.tsx
@@ -10,7 +10,7 @@ import { AppStore } from 'store'
import { getAddPicto } from 'utils/picto'
import './konnectorViewerList.scss'
-const KonnectorViewerList: React.FC = () => {
+const KonnectorViewerList = () => {
const { t } = useI18n()
const { fluidStatus } = useSelector((state: AppStore) => state.ecolyo.global)
const navigate = useNavigate()
@@ -20,36 +20,26 @@ const KonnectorViewerList: React.FC = () => {
},
[navigate]
)
- return (
- <div className="kv-root">
- <div className="kv-content">
- <div>
- {fluidStatus.map((fluidStatusItem: FluidStatus, key: number) => {
- return (
- <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>
+ return fluidStatus.map((fluidStatusItem: FluidStatus, key: number) => (
+ <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>
- </div>
- )
+ </StyledCard>
+ ))
}
export default KonnectorViewerList
diff --git a/src/components/Konnector/konnectorViewerList.scss b/src/components/Konnector/konnectorViewerList.scss
index db4a790cbd08ed6a6dafbcf246ce14bcbfd2a23b..38e239582c1daec3ab65df0dab38f4152a2d3113 100644
--- a/src/components/Konnector/konnectorViewerList.scss
+++ b/src/components/Konnector/konnectorViewerList.scss
@@ -1,24 +1,6 @@
@import 'src/styles/base/color';
@import 'src/styles/base/breakpoint';
-.kv-root {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 0rem 0rem 1rem 0rem;
- .kv-content {
- width: 45.75rem;
- @media #{$large-phone} {
- width: 100%;
- }
- .kv-header {
- margin-top: 2.5rem;
- margin-bottom: 1.25rem;
- color: $grey-bright;
- }
- }
-}
button.connection-card div {
display: flex;
align-items: center;
diff --git a/src/components/TotalConsumption/TotalConsumption.tsx b/src/components/TotalConsumption/TotalConsumption.tsx
index 7e40893e1dd8c532c960b8fd5ee7caf67d247746..281b7acd175eaeed56f6a35750302500d450cda7 100644
--- a/src/components/TotalConsumption/TotalConsumption.tsx
+++ b/src/components/TotalConsumption/TotalConsumption.tsx
@@ -80,13 +80,17 @@ const TotalConsumption = ({ fluidType }: { fluidType: FluidType }) => {
}
}, [currentDatachart, fluidType, currentTimeStep, client, computeTotal])
+ const compareIcon = () => (
+ <StyledIcon
+ className="pile-icon"
+ icon={showCompare ? Coins : Coin}
+ size={showCompare ? 48 : 36}
+ />
+ )
+
return (
- <div className="icon-line">
- {showCompare ? (
- <StyledIcon className="pile-icon" icon={Coins} size={48} />
- ) : (
- <StyledIcon className="pile-icon" icon={Coin} size={48} />
- )}
+ <div className={`icon-line ${showCompare ? 'compare' : ''}`}>
+ {compareIcon()}
<div>
<span className="euro-value">{totalValue}</span>
<span className="euro-symbol"> €</span>
diff --git a/src/components/TotalConsumption/totalConsumption.scss b/src/components/TotalConsumption/totalConsumption.scss
index dd30f11ec133ebacc2b901b851dd2775d4fa79ea..d36b15977ca31574e2365c54a4934f7040a04bdb 100644
--- a/src/components/TotalConsumption/totalConsumption.scss
+++ b/src/components/TotalConsumption/totalConsumption.scss
@@ -2,7 +2,10 @@
.icon-line {
display: flex;
- align-items: flex-end;
+ align-items: baseline;
+ &.compare {
+ align-items: flex-end;
+ }
svg {
transform: translate(0px, 4px);
diff --git a/src/locales/fr.json b/src/locales/fr.json
index da2a1f8ef8aeb23dc3b21bdb44cea9902e2d5c71..87addeb078e03c01c04889cf7dcbabfd23fe9695 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -765,6 +765,9 @@
"label_connect_to_electricity": "Se connecter à l'électricité",
"label_connect_to_water": "Se connecter à l'eau",
"label_connect_to_gas": "Se connecter au gaz",
+ "label_offline_electricity": "Électricité déconnectée",
+ "label_offline_water": "Eau déconnectée",
+ "label_offline_gas": "Gaz déconnecté",
"partner_issue": "En maintenance",
"outdated": "Données manquantes depuis %{isOutdatedData} jours",
"accessibility": {