diff --git a/src/components/CommonKit/Card/StyledBorderCard.spec.tsx b/src/components/CommonKit/Card/StyledBorderCard.spec.tsx
deleted file mode 100644
index 38d535360f8a7667234e7fe9980bec0073e1c0a2..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/Card/StyledBorderCard.spec.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { mount } from 'enzyme'
-import React from 'react'
-import StyledBorderCard from './StyledBorderCard'
-
-describe('StyledBorderCard component test', () => {
- it('should render correctly StyleBorderCard', () => {
- const wrapper = mount(<StyledBorderCard />)
- expect(wrapper.getElement()).toMatchSnapshot()
- })
-})
diff --git a/src/components/CommonKit/Card/StyledBorderCard.tsx b/src/components/CommonKit/Card/StyledBorderCard.tsx
deleted file mode 100644
index 7f9a6a34dff44c65ac484dc88cc347521341c886..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/Card/StyledBorderCard.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import CardActionArea, {
- CardActionAreaProps,
-} from '@material-ui/core/CardActionArea'
-import CardContent from '@material-ui/core/CardContent'
-import { withStyles } from '@material-ui/core/styles'
-import React from 'react'
-
-const CardBase = withStyles({
- root: {
- border: '1px solid var(--softGrey)',
- boxSizing: 'border-box',
- borderRadius: '4px',
- width: '100hv',
- margin: '1.25rem 0',
- cursor: 'default',
- },
-})(CardActionArea) as React.FC<StyledBorderCardProps>
-
-type StyledBorderCardProps = CardActionAreaProps
-
-const StyledBorderCard = ({ ...props }: StyledBorderCardProps) => {
- return (
- <CardBase {...props}>
- <CardContent>{props.children}</CardContent>
- </CardBase>
- )
-}
-
-export default StyledBorderCard
diff --git a/src/components/CommonKit/Card/StyledCard.tsx b/src/components/CommonKit/Card/StyledCard.tsx
index caa675934560fd85d01f6e77e99f1a3d159391de..39e472c59d9876587c7923c6f51cde1eaa5626a8 100644
--- a/src/components/CommonKit/Card/StyledCard.tsx
+++ b/src/components/CommonKit/Card/StyledCard.tsx
@@ -5,6 +5,7 @@ import CardContent from '@material-ui/core/CardContent'
import { withStyles } from '@material-ui/core/styles'
import { FluidType } from 'enum/fluid.enum'
import React, { ReactNode } from 'react'
+import { getFluidName } from 'utils/utils'
const CardBase = withStyles({
root: {
@@ -12,84 +13,38 @@ const CardBase = withStyles({
boxSizing: 'border-box',
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.75)',
borderRadius: '4px',
- margin: '10px 0px 10px 0px',
},
})(CardActionArea) as React.FC<StyledCardProps>
-const CardElec = withStyles({
- root: {
- border: '1px solid var(--elecColor40)',
- },
-})(CardBase) as React.FC<StyledCardProps>
-
-const CardWater = withStyles({
- root: {
- border: '1px solid var(--waterColor40)',
- },
-})(CardBase) as React.FC<StyledCardProps>
-
-const CardGas = withStyles({
- root: {
- border: '1px solid var(--gasColor40)',
- },
-})(CardBase) as React.FC<StyledCardProps>
-
-const CardMulti = withStyles({
- root: {
- border: '1px solid var( --greyDark)',
- },
-})(CardBase) as React.FC<StyledCardProps>
-
const CardContentBase = withStyles({
root: {
color: 'white',
+ display: 'flex',
+ alignItems: 'center',
+ gap: '1rem',
+ boxSizing: 'border-box',
},
})(CardContent) as React.FC<StyledCardProps>
interface StyledCardProps extends CardActionAreaProps {
fluidType?: FluidType
-}
-
-const GenerateContentCard = (
- fluidType: FluidType,
children: ReactNode
-): React.ReactFragment => {
- return <CardContentBase>{children}</CardContentBase>
}
-const StyledCard = ({ fluidType, ...props }: StyledCardProps) => {
- switch (fluidType) {
- case FluidType.ELECTRICITY:
- return (
- <CardElec {...props}>
- {GenerateContentCard(fluidType, props.children)}
- </CardElec>
- )
- case FluidType.WATER:
- return (
- <CardWater {...props}>
- {GenerateContentCard(fluidType, props.children)}
- </CardWater>
- )
- case FluidType.GAS:
- return (
- <CardGas {...props}>
- {GenerateContentCard(fluidType, props.children)}
- </CardGas>
- )
- case FluidType.MULTIFLUID:
- return (
- <CardMulti {...props}>
- {GenerateContentCard(fluidType, props.children)}
- </CardMulti>
- )
- default:
- return (
- <CardBase {...props}>
- <CardContentBase>{props.children}</CardContentBase>
- </CardBase>
- )
- }
+const StyledCard = ({
+ fluidType,
+ children,
+ className,
+ ...props
+}: StyledCardProps) => {
+ const cardClass =
+ className + (fluidType !== undefined ? ` ${getFluidName(fluidType)}` : '')
+
+ return (
+ <CardBase {...props} className={cardClass}>
+ <CardContentBase>{children}</CardContentBase>
+ </CardBase>
+ )
}
export default StyledCard
diff --git a/src/components/CommonKit/Card/StyledEcogestureCard.tsx b/src/components/CommonKit/Card/StyledEcogestureCard.tsx
index dea5dd8310b6fb4091061c9daee31eff9581b9a8..31a8ad5ef4fff646c85a6b8bf4dc97e12aad045b 100644
--- a/src/components/CommonKit/Card/StyledEcogestureCard.tsx
+++ b/src/components/CommonKit/Card/StyledEcogestureCard.tsx
@@ -3,52 +3,18 @@ import CardActionArea, {
} from '@material-ui/core/CardActionArea'
import CardContent from '@material-ui/core/CardContent'
import { withStyles } from '@material-ui/core/styles'
-import React, { ReactNode } from 'react'
+import React from 'react'
const CardBase = withStyles({
root: {
background: 'var(--greyLinearGradientBackground)',
- // border: '1px solid',
boxSizing: 'border-box',
boxShadow: '0px 4px 16px black',
borderRadius: '4px',
padding: '0.5rem 1rem',
minHeight: '72px',
},
-})(CardActionArea) as React.FC<StyledEcogestureCardProps>
-
-const CardNew = withStyles({
- '@keyframes glowAnimation': {
- '0%': { boxShadow: '0px 0px 4px var(--blue)' },
- '50%': { boxShadow: '0px 0px 16px var(--blue)' },
- '100%': { boxShadow: '0px 0px 4px var(--blue)' },
- },
- root: {
- border: '1px solid var(--blue)',
- animation: '2s glowAnimation linear infinite',
- color: 'white',
- height: '100%',
- padding: 0,
- },
-})(CardBase) as React.FC<StyledEcogestureCardProps>
-
-const CardBlueBorderContentBase = withStyles({
- root: {
- border: '1px solid var(--blue)',
- height: '100%',
- padding: 0,
- },
-})(CardBase) as React.FC<StyledEcogestureCardProps>
-
-const CardChallengeBase = withStyles({
- root: {
- height: '100%',
- padding: 0,
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- },
-})(CardContent) as React.FC<StyledEcogestureCardProps>
+})(CardActionArea) as React.FC<CardActionAreaProps>
const CardContentBase = withStyles({
root: {
@@ -56,37 +22,14 @@ const CardContentBase = withStyles({
height: '100%',
padding: 0,
},
-})(CardContent) as React.FC<StyledEcogestureCardProps>
-
-interface StyledEcogestureCardProps extends CardActionAreaProps {
- border?: boolean
- newEcogesture?: boolean | null
-}
-
-const GenerateContentCard = (children: ReactNode): React.ReactFragment => {
- return <CardChallengeBase>{children}</CardChallengeBase>
-}
-
-const StyledEcogestureCard = ({
- border,
- newEcogesture,
- ...props
-}: StyledEcogestureCardProps) => {
- if (newEcogesture) {
- return <CardNew {...props}>{GenerateContentCard(props.children)}</CardNew>
- } else if (border) {
- return (
- <CardBlueBorderContentBase {...props}>
- {GenerateContentCard(props.children)}
- </CardBlueBorderContentBase>
- )
- } else {
- return (
- <CardBase {...props}>
- <CardContentBase>{props.children}</CardContentBase>
- </CardBase>
- )
- }
+})(CardContent) as React.FC<CardActionAreaProps>
+
+const StyledEcogestureCard = ({ children, ...props }: CardActionAreaProps) => {
+ return (
+ <CardBase {...props}>
+ <CardContentBase>{children}</CardContentBase>
+ </CardBase>
+ )
}
export default StyledEcogestureCard
diff --git a/src/components/CommonKit/Card/StyledIconCard.spec.tsx b/src/components/CommonKit/Card/StyledIconCard.spec.tsx
deleted file mode 100644
index 77b94a6844c58f58a39ce4f33d09a3cb42521a04..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/Card/StyledIconCard.spec.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { FluidType } from 'enum/fluid.enum'
-import { mount } from 'enzyme'
-import React from 'react'
-import StyledIconCard from './StyledIconCard'
-
-describe('StyledIconCard component test', () => {
- it('it should render correctly StyledIconCard', () => {
- const wrapper = mount(<StyledIconCard fluidType={FluidType.ELECTRICITY} />)
- expect(wrapper.getElement()).toMatchSnapshot()
- })
-})
diff --git a/src/components/CommonKit/Card/StyledIconCard.tsx b/src/components/CommonKit/Card/StyledIconCard.tsx
deleted file mode 100644
index 58e6b8d4f09fdad56642fb04e1059b0a5ad569af..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/Card/StyledIconCard.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import CardActionArea, {
- CardActionAreaProps,
-} from '@material-ui/core/CardActionArea'
-import CardContent from '@material-ui/core/CardContent'
-import Grid from '@material-ui/core/Grid'
-import { withStyles } from '@material-ui/core/styles'
-import { FluidType } from 'enum/fluid.enum'
-import React, { ReactNode } from 'react'
-import { getPicto } from 'utils/picto'
-import StyledIcon from '../Icon/StyledIcon'
-
-const CardBase = withStyles({
- root: {
- background: 'var(--greyLinearGradientBackground)',
- border: '1px solid',
- boxSizing: 'border-box',
- boxShadow: '0px 4px 16px',
- borderRadius: '4px',
- display: 'inline',
- margin: '0',
- },
-})(CardActionArea) as React.FC<StyledIconCardProps>
-
-const CardElec = withStyles({
- root: {
- border: '1px solid var(--elecColor40)',
- },
-})(CardBase) as React.FC<StyledIconCardProps>
-
-const CardWater = withStyles({
- root: {
- border: '1px solid var(--waterColor40)',
- },
-})(CardBase) as React.FC<StyledIconCardProps>
-
-const CardGas = withStyles({
- root: {
- border: '1px solid var(--gasColor40)',
- },
-})(CardBase) as React.FC<StyledIconCardProps>
-
-const CardContentBase = withStyles({
- root: {
- color: 'white',
- },
-})(CardContent) as React.FC<StyledIconCardProps>
-
-interface StyledIconCardProps extends CardActionAreaProps {
- fluidType?: FluidType
-}
-
-const GenerateContentCard = (
- fluidType: FluidType,
- children: ReactNode
-): React.ReactFragment => {
- const icon = getPicto(fluidType)
-
- return (
- <CardContentBase>
- <Grid
- container
- spacing={8}
- direction="column"
- alignItems="center"
- justifyContent="center"
- >
- <Grid item>
- <StyledIcon icon={icon} size={64} />
- </Grid>
- <Grid item>{children}</Grid>
- </Grid>
- </CardContentBase>
- )
-}
-
-const StyledIconCard = ({ fluidType, ...props }: StyledIconCardProps) => {
- switch (fluidType) {
- case FluidType.ELECTRICITY:
- return (
- <CardElec {...props}>
- {GenerateContentCard(fluidType, props.children)}
- </CardElec>
- )
- case FluidType.WATER:
- return (
- <CardWater {...props}>
- {GenerateContentCard(fluidType, props.children)}
- </CardWater>
- )
- case FluidType.GAS:
- return (
- <CardGas {...props}>
- {GenerateContentCard(fluidType, props.children)}
- </CardGas>
- )
- default:
- return (
- <CardBase {...props}>
- <CardContentBase>
- <Grid
- container
- spacing={8}
- alignItems="center"
- justifyContent="center"
- >
- <Grid item>{props.children}</Grid>
- </Grid>
- </CardContentBase>
- </CardBase>
- )
- }
-}
-
-export default StyledIconCard
diff --git a/src/components/CommonKit/Card/__snapshots__/StyledBorderCard.spec.tsx.snap b/src/components/CommonKit/Card/__snapshots__/StyledBorderCard.spec.tsx.snap
deleted file mode 100644
index 5da16e6b78dfc4aecea6d8b208df24b2bd89841c..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/Card/__snapshots__/StyledBorderCard.spec.tsx.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StyledBorderCard component test should render correctly StyleBorderCard 1`] = `<StyledBorderCard />`;
diff --git a/src/components/CommonKit/Card/__snapshots__/StyledIconCard.spec.tsx.snap b/src/components/CommonKit/Card/__snapshots__/StyledIconCard.spec.tsx.snap
deleted file mode 100644
index f9d8af05dbf5a9930b9cef8c760805c376c15b97..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/Card/__snapshots__/StyledIconCard.spec.tsx.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StyledIconCard component test it should render correctly StyledIconCard 1`] = `
-<StyledIconCard
- fluidType={0}
-/>
-`;
diff --git a/src/components/CommonKit/IconButton/StyledIconBorderedButton.spec.tsx b/src/components/CommonKit/IconButton/StyledIconBorderedButton.spec.tsx
deleted file mode 100644
index 1890bead1d5f57d01f15714b25869d263e9076d6..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/IconButton/StyledIconBorderedButton.spec.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { shallow } from 'enzyme'
-import React from 'react'
-import StyledIconBorderedButton from './StyledIconBorderedButton'
-
-describe('StyledIconBorderedButton component test', () => {
- const mockProps = {
- icon: 'icon',
- size: 20,
- }
-
- it('should render correctly UnselectedIconButtonBase ', () => {
- const wrapper = shallow(
- <StyledIconBorderedButton icon={mockProps.icon} sized={mockProps.size} />
- )
-
- expect(wrapper.getElement()).toMatchSnapshot()
- })
-
- it('should render correctly SelectedIconButtonBase', () => {
- const wrapper = shallow(
- <StyledIconBorderedButton
- icon={mockProps.icon}
- sized={mockProps.size}
- selected={true}
- />
- )
-
- expect(wrapper.getElement()).toMatchSnapshot()
- })
-})
diff --git a/src/components/CommonKit/IconButton/StyledIconBorderedButton.tsx b/src/components/CommonKit/IconButton/StyledIconBorderedButton.tsx
deleted file mode 100644
index 1b0c69df57541d11185e0993e65a7124e0dd2ea9..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/IconButton/StyledIconBorderedButton.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import IconButton, { IconButtonProps } from '@material-ui/core/IconButton'
-import { withStyles } from '@material-ui/core/styles'
-import StyledIconProps from 'components/CommonKit/Icon/StyledIcon'
-import React from 'react'
-
-const IconButtonBase = withStyles({
- root: {
- outline: 'none !important',
- borderRadius: '4px',
- width: '100%',
- padding: 'unset',
- },
- label: {
- display: 'flex',
- flexDirection: 'column',
- },
-})(IconButton) as React.FC<IconButtonProps>
-
-const SelectedIconButtonBase = withStyles({
- root: {
- border: '1px solid var(--multiColor)',
- background: 'var(--greyLinearGradientBackground)',
- boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.55)',
- },
-})(IconButtonBase) as React.FC<IconButtonProps>
-
-const UnselectedIconButtonBase = withStyles({
- root: {
- border: '1px solid var(--greyDark)',
- },
-})(IconButtonBase) as React.FC<IconButtonProps>
-
-interface StyledIconBorderedButtonProps extends IconButtonProps {
- icon: string
- sized?: number
- selected?: boolean
- children?: React.ReactNode
-}
-
-const StyledIconBorderedButton = ({
- icon,
- sized = 16,
- selected = false,
- children = null,
- ...props
-}: StyledIconBorderedButtonProps) => {
- return (
- <>
- {selected ? (
- <SelectedIconButtonBase {...props}>
- <StyledIconProps icon={icon} size={sized} />
- {children}
- </SelectedIconButtonBase>
- ) : (
- <UnselectedIconButtonBase {...props}>
- <StyledIconProps icon={icon} size={sized} />
- {children}
- </UnselectedIconButtonBase>
- )}
- </>
- )
-}
-
-export default StyledIconBorderedButton
diff --git a/src/components/CommonKit/IconButton/__snapshots__/StyledIconBorderedButton.spec.tsx.snap b/src/components/CommonKit/IconButton/__snapshots__/StyledIconBorderedButton.spec.tsx.snap
deleted file mode 100644
index 55ffe0707050115b083c4664fa1c380f7755ceeb..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/IconButton/__snapshots__/StyledIconBorderedButton.spec.tsx.snap
+++ /dev/null
@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StyledIconBorderedButton component test should render correctly SelectedIconButtonBase 1`] = `
-<React.Fragment>
- <WithStyles(WithStyles(WithStyles(ForwardRef(IconButton))))>
- <StyledIcon
- icon="icon"
- size={20}
- />
- </WithStyles(WithStyles(WithStyles(ForwardRef(IconButton))))>
-</React.Fragment>
-`;
-
-exports[`StyledIconBorderedButton component test should render correctly UnselectedIconButtonBase 1`] = `
-<React.Fragment>
- <WithStyles(WithStyles(WithStyles(ForwardRef(IconButton))))>
- <StyledIcon
- icon="icon"
- size={20}
- />
- </WithStyles(WithStyles(WithStyles(ForwardRef(IconButton))))>
-</React.Fragment>
-`;
diff --git a/src/components/Connection/ExpiredConsentModal.tsx b/src/components/Connection/ExpiredConsentModal.tsx
index c9eec3a1cf092aa1708d862fb4a370518b88a104..194ee25246f29f482eded5ffa267aa9fceaeb08e 100644
--- a/src/components/Connection/ExpiredConsentModal.tsx
+++ b/src/components/Connection/ExpiredConsentModal.tsx
@@ -15,6 +15,7 @@ import {
setShouldRefreshConsent,
updateSgeStore,
} from 'store/global/global.actions'
+import { getFluidName } from 'utils/utils'
import './expiredConsentModal.scss'
interface ExpiredConsentModalProps {
@@ -88,9 +89,7 @@ const ExpiredConsentModal = ({
/>
</div>
- <div
- className={`text-20-bold title ${FluidType[fluidType].toLowerCase()}`}
- >
+ <div className={`text-20-bold title ${getFluidName(fluidType)}`}>
{t(`consent_outdated.title.${fluidType}`)}
</div>
<div className="text-16-normal text1">
diff --git a/src/components/ConsumptionVisualizer/DataloadSection.tsx b/src/components/ConsumptionVisualizer/DataloadSection.tsx
index cbc2ca57e9fbd79f0726a93bded7145485ddd84e..85ddd0648f5e3fb88217789b499d4bc7d413247e 100644
--- a/src/components/ConsumptionVisualizer/DataloadSection.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSection.tsx
@@ -4,6 +4,7 @@ import { DataloadSectionType } from 'enum/dataload.enum'
import { FluidType } from 'enum/fluid.enum'
import { Dataload } from 'models'
import React from 'react'
+import { getFluidName } from 'utils/utils'
import DataloadSectionDetail from './DataloadSectionDetail'
import DataloadSectionValue from './DataloadSectionValue'
import './consumptionVisualizer.scss'
@@ -50,9 +51,9 @@ const DataloadSection = ({
>
<div
className={classNames('dataloadvisualizer-value', 'text-36-bold', {
- [`${FluidType[fluidType].toLowerCase()}-compare`]:
+ [`${getFluidName(fluidType)}-compare`]:
dataloadSectionType === DataloadSectionType.LEFT,
- [`${FluidType[fluidType].toLowerCase()}`]:
+ [`${getFluidName(fluidType)}`]:
dataloadSectionType === DataloadSectionType.NO_COMPARE ||
dataloadSectionType === DataloadSectionType.RIGHT,
['multifluid-compare-color']:
diff --git a/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx b/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
index 7ce1a123f3dd2b3a0022acb1c83599b16b8e419e..78861f7447c7eacecafa07f88a61f561afd9a039 100644
--- a/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
@@ -11,7 +11,7 @@ import { NavLink } from 'react-router-dom'
import ConverterService from 'services/converter.service'
import UsageEventService from 'services/usageEvent.service'
import { getNavPicto } from 'utils/picto'
-import { formatNumberValues } from 'utils/utils'
+import { formatNumberValues, getFluidName } from 'utils/utils'
interface DataloadSectionDetailProps {
dataload: Dataload
@@ -42,9 +42,9 @@ const DataloadSectionDetail = ({
return (
<div
className={classNames('dataloadvisualizer-euro text-16-normal', {
- [`${FluidType[fluidType].toLowerCase()}`]:
+ [`${getFluidName(fluidType)}`]:
dataloadSectionType !== DataloadSectionType.LEFT,
- [`${FluidType[fluidType].toLowerCase()}-compare`]:
+ [`${getFluidName(fluidType)}-compare`]:
dataloadSectionType === DataloadSectionType.LEFT,
})}
>
@@ -119,13 +119,11 @@ const DataloadSectionDetail = ({
return (
<div className="dataloadvisualizer-euro text-16-normal">
<NavLink
- to={`/consumption/${FluidType[fluidType].toLowerCase()}`}
+ to={`/consumption/${getFluidName(fluidType)}`}
className="dataloadvisualizer-euro-link"
>
<div
- className={`dataloadvisualizer-euro-fluid ${FluidType[
- fluidType
- ].toLowerCase()}`}
+ className={`dataloadvisualizer-euro-fluid ${getFluidName(fluidType)}`}
>
<Icon
className="dataloadvisualizer-euro-fluid-icon"
diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
index d1b1a370d08d87c057b7385d3b739b12bcbef122..caf29cd956b6185a27e3130d7256889265622533 100644
--- a/src/components/Content/Content.tsx
+++ b/src/components/Content/Content.tsx
@@ -7,7 +7,7 @@ import { changeScreenType } from 'store/global/global.actions'
import { openFeedbackModal } from 'store/modal/modal.slice'
import './content.scss'
interface ContentProps {
- children?: React.ReactNode
+ children: React.ReactNode
height?: number
background?: string
}
diff --git a/src/components/Ecogesture/EcogestureCard.tsx b/src/components/Ecogesture/EcogestureCard.tsx
index c4b58cac2ce496c9997e1bbb486b64a0112a45b3..cf8a69b2da5517748e8a22e7188453028965920e 100644
--- a/src/components/Ecogesture/EcogestureCard.tsx
+++ b/src/components/Ecogesture/EcogestureCard.tsx
@@ -43,18 +43,12 @@ const EcogestureCard = ({
className="ecogesture-list-item"
>
<StyledEcogestureCard>
- <div className="ec">
- <div className={`ec-content `}>
- <div className="ec-content-icon">
- <StyledIcon className="Icon" icon={ecogestureIcon} size={50} />
- </div>
- <div className="ec-content-short-name text-15-bold">
- {ecogesture.shortName}
- </div>
- <div className="ec-content-efficiency">
- <EfficiencyRating result={Math.round(ecogesture.efficiency)} />
- </div>
+ <div className="ec-content">
+ <StyledIcon className="Icon" icon={ecogestureIcon} size={50} />
+ <div className="ec-content-short-name text-15-bold">
+ {ecogesture.shortName}
</div>
+ <EfficiencyRating result={Math.round(ecogesture.efficiency)} />
</div>
</StyledEcogestureCard>
</Link>
diff --git a/src/components/Ecogesture/EcogestureView.tsx b/src/components/Ecogesture/EcogestureView.tsx
index 25e0e53311b4ba1986349711bb1337a913c52a81..afc1e1fe9bddcb1ac9fa0b80273b70bb54950668 100644
--- a/src/components/Ecogesture/EcogestureView.tsx
+++ b/src/components/Ecogesture/EcogestureView.tsx
@@ -21,7 +21,7 @@ import EcogestureReinitModal from './EcogestureReinitModal'
import './ecogestureView.scss'
interface TabPanelProps {
- children?: React.ReactNode
+ children: React.ReactNode
tab: EcogestureTab
value: number
}
diff --git a/src/components/Ecogesture/__snapshots__/EcogestureCard.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureCard.spec.tsx.snap
index ff294fcfbbb6576ea20f845c19234af57012df4b..0b7982f2b08cbc50e0630f0f786ca712212234d9 100644
--- a/src/components/Ecogesture/__snapshots__/EcogestureCard.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/EcogestureCard.spec.tsx.snap
@@ -302,92 +302,80 @@ exports[`EcogestureCard component should be rendered correctly 1`] = `
className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
>
<div
- className="ec"
+ className="ec-content"
>
+ <Component
+ className="Icon"
+ icon=""
+ size={50}
+ >
+ <div
+ id="StyledIcon"
+ />
+ </Component>
<div
- className="ec-content "
+ className="ec-content-short-name text-15-bold"
+ >
+ Bonhomme de neige
+ </div>
+ <EfficiencyRating
+ result={4}
>
<div
- className="ec-content-icon"
+ className="thunder"
>
<Component
- className="Icon"
- icon=""
- size={50}
+ className="star"
+ icon="test-file-stub"
+ key="1"
+ size={15}
>
<div
id="StyledIcon"
/>
</Component>
- </div>
- <div
- className="ec-content-short-name text-15-bold"
- >
- Bonhomme de neige
- </div>
- <div
- className="ec-content-efficiency"
- >
- <EfficiencyRating
- result={4}
+ <Component
+ className="star"
+ icon="test-file-stub"
+ key="2"
+ size={15}
+ >
+ <div
+ id="StyledIcon"
+ />
+ </Component>
+ <Component
+ className="star"
+ icon="test-file-stub"
+ key="3"
+ size={15}
>
<div
- className="thunder"
- >
- <Component
- className="star"
- icon="test-file-stub"
- key="1"
- size={15}
- >
- <div
- id="StyledIcon"
- />
- </Component>
- <Component
- className="star"
- icon="test-file-stub"
- key="2"
- size={15}
- >
- <div
- id="StyledIcon"
- />
- </Component>
- <Component
- className="star"
- icon="test-file-stub"
- key="3"
- size={15}
- >
- <div
- id="StyledIcon"
- />
- </Component>
- <Component
- className="star"
- icon="test-file-stub"
- key="4"
- size={15}
- >
- <div
- id="StyledIcon"
- />
- </Component>
- <Component
- className="star"
- icon="test-file-stub"
- key="5"
- size={15}
- >
- <div
- id="StyledIcon"
- />
- </Component>
- </div>
- </EfficiencyRating>
+ id="StyledIcon"
+ />
+ </Component>
+ <Component
+ className="star"
+ icon="test-file-stub"
+ key="4"
+ size={15}
+ >
+ <div
+ id="StyledIcon"
+ />
+ </Component>
+ <Component
+ className="star"
+ icon="test-file-stub"
+ key="5"
+ size={15}
+ >
+ <div
+ id="StyledIcon"
+ />
+ </Component>
</div>
- </div>
+ </EfficiencyRating>
</div>
</div>
</ForwardRef(CardContent)>
diff --git a/src/components/Ecogesture/ecogestureCard.scss b/src/components/Ecogesture/ecogestureCard.scss
index 2c1f2ef9d328b85301bbe7a242b467dbf9efe73e..9ba0270176634771b20b8b07232411715ec84a3a 100644
--- a/src/components/Ecogesture/ecogestureCard.scss
+++ b/src/components/Ecogesture/ecogestureCard.scss
@@ -1,54 +1,27 @@
@import 'src/styles/base/breakpoint';
@import 'src/styles/base/color';
-.ec {
- display: flex;
- justify-content: center;
- width: 100%;
+.ec-content {
height: 100%;
- .ecogesture-card-notif {
- position: absolute;
- display: flex;
- justify-content: center;
- align-items: center;
- right: 8px;
- top: 8px;
- width: 1.25rem;
- height: 1.25rem;
- color: $dark-light;
- border-radius: 50%;
- border: 1px solid $dark-light;
- z-index: 1;
- background: $blue-radial-gradient;
- font-size: 12px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-around;
+ &.ec-content-unlocked {
+ padding: 0.4rem 0;
+ }
+ &.ec-content-challenge {
+ padding: 0.5rem 0;
}
- .ec-content {
+
+ .ec-content-short-name {
display: flex;
- flex-direction: column;
+ flex: 1;
align-items: center;
- justify-content: space-around;
- &.ec-content-unlocked {
- padding: 0.4rem 0;
- }
- &.ec-content-challenge {
- padding: 0.5rem 0;
- }
- .ec-content-icon {
- min-height: 50px;
- }
- .ec-content-short-name {
- display: flex;
- flex: 1;
- align-items: center;
- text-align: center;
- min-height: 38px;
- }
- .ec-content-efficiency {
- margin-top: 0.5rem;
- color: $soft-grey;
- }
+ text-align: center;
}
}
+
.cp-eg-1 {
height: 8rem;
width: 100%;
diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx
index 5cf885281dd230d075b35dd804ba08ed8389fcab..158f05147fa75b80d0ee524d3fa1d24be833e13a 100644
--- a/src/components/FluidChart/FluidChart.tsx
+++ b/src/components/FluidChart/FluidChart.tsx
@@ -25,7 +25,7 @@ import {
setShowOfflineData,
} from 'store/chart/chart.slice'
import { openConnectionModal } from 'store/modal/modal.slice'
-import { getKonnectorSlug, isKonnectorActive } from 'utils/utils'
+import { getFluidName, getKonnectorSlug, isKonnectorActive } from 'utils/utils'
import FluidChartSwipe from './FluidChartSwipe'
import './fluidChart.scss'
@@ -51,14 +51,14 @@ const FluidChart = ({ fluidType, setActive }: FluidChartProps) => {
useState<boolean>(false)
const lowercaseTimeStep = TimeStep[currentTimeStep].toLowerCase()
- const lowercaseFluidType = FluidType[fluidType].toLowerCase()
+ const lowercaseFluidType = getFluidName(fluidType)
const handleChangeSwitch = async () => {
if (!showCompare) {
await UsageEventService.addEvent(client, {
type: UsageEventType.CONSUMPTION_COMPARE_EVENT,
target: TimeStep[currentTimeStep].toLowerCase(),
- context: FluidType[fluidType].toLowerCase(),
+ context: lowercaseFluidType,
})
}
dispatch(setShowCompare(!showCompare))
diff --git a/src/components/Home/FluidButton.tsx b/src/components/Home/FluidButton.tsx
index 7ceed80870fb15891436834e7a501565882e3ac6..dcc93f5344cb85a26f2b9f95753b5e68ed24e731 100644
--- a/src/components/Home/FluidButton.tsx
+++ b/src/components/Home/FluidButton.tsx
@@ -12,7 +12,7 @@ import DateChartService from 'services/dateChart.service'
import UsageEventService from 'services/usageEvent.service'
import { AppStore } from 'store'
import { getNavPicto } from 'utils/picto'
-import { isKonnectorActive } from 'utils/utils'
+import { getFluidName, isKonnectorActive } from 'utils/utils'
interface FluidButtonProps {
fluidType: FluidType
@@ -58,19 +58,19 @@ const FluidButton = ({ fluidType, isActive }: FluidButtonProps) => {
const goToFluid = useCallback(async () => {
await UsageEventService.addEvent(client, {
type: UsageEventType.NAVIGATION_EVENT,
- target: FluidType[fluidType].toLowerCase(),
+ target: getFluidName(fluidType),
})
navigate(
fluidType === FluidType.MULTIFLUID
? '/consumption'
- : `/consumption/${FluidType[fluidType].toLowerCase()}`
+ : `/consumption/${getFluidName(fluidType)}`
)
}, [navigate, fluidType, client])
const isFluidMaintenance = () => fluidStatus[fluidType]?.maintenance
useEffect(() => {
- // Show errors only on konnected konnectors that are in error, outdated, with no data (specific case), and not in multifluid
+ // Show errors only on connected konnectors that are in error, outdated, with no data (specific case), and not in multifluid
if (
(fluidType !== FluidType.MULTIFLUID && isConnected() && isErrored()) ||
(fluidType !== FluidType.MULTIFLUID && isConnected() && isOutdated())
@@ -102,7 +102,7 @@ const FluidButton = ({ fluidType, isActive }: FluidButtonProps) => {
)
)}
<div
- className={`fluid-title ${FluidType[fluidType].toLowerCase()} ${
+ className={`fluid-title ${getFluidName(fluidType)} ${
isActive && 'active'
} text-14-normal`}
>
diff --git a/src/components/Home/consumptionView.scss b/src/components/Home/consumptionView.scss
index f06c407a5913320cf0e2444356ad729786c7545a..174d986a8c3b601c82e2a35243727d1f0843b622 100644
--- a/src/components/Home/consumptionView.scss
+++ b/src/components/Home/consumptionView.scss
@@ -20,8 +20,10 @@
margin: 0 auto;
width: 45.75rem;
box-sizing: border-box;
+ padding-bottom: 1rem;
@media #{$large-phone} {
width: 100%;
- padding: 0rem 1rem 3rem 1rem;
+ padding-left: 1rem;
+ padding-right: 1rem;
}
}
diff --git a/src/components/Konnector/KonnectorViewerList.tsx b/src/components/Konnector/KonnectorViewerList.tsx
index f66db82fdfc3a17e48d9960f6b06a745e9268300..e4c0c6190ead10314feb40b986357b73821e3537 100644
--- a/src/components/Konnector/KonnectorViewerList.tsx
+++ b/src/components/Konnector/KonnectorViewerList.tsx
@@ -8,6 +8,7 @@ import { useSelector } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import { AppStore } from 'store'
import { getAddPicto } from 'utils/picto'
+import { getFluidName } from 'utils/utils'
import './konnectorViewerList.scss'
const KonnectorViewerList = () => {
@@ -16,7 +17,7 @@ const KonnectorViewerList = () => {
const navigate = useNavigate()
const goToFluid = useCallback(
fluidType => {
- navigate(`/consumption/${FluidType[fluidType].toLowerCase()}`)
+ navigate(`/consumption/${getFluidName(fluidType)}`)
},
[navigate]
)
@@ -27,6 +28,7 @@ const KonnectorViewerList = () => {
key={key}
className="connection-card"
onClick={() => goToFluid(fluidStatusItem.fluidType)}
+ fluidType={fluidStatusItem.fluidType}
>
<Icon icon={getAddPicto(fluidStatusItem.fluidType)} size={36} />
<div
diff --git a/src/components/Konnector/konnectorViewerList.scss b/src/components/Konnector/konnectorViewerList.scss
index 38e239582c1daec3ab65df0dab38f4152a2d3113..4005432f3ca26f473d1689fdc87837cbcd3cb251 100644
--- a/src/components/Konnector/konnectorViewerList.scss
+++ b/src/components/Konnector/konnectorViewerList.scss
@@ -1,14 +1,16 @@
@import 'src/styles/base/color';
@import 'src/styles/base/breakpoint';
-button.connection-card div {
- display: flex;
- align-items: center;
- justify-content: start;
+button.connection-card {
height: 80px;
- font-weight: normal;
- box-sizing: border-box;
- svg {
- margin-right: 1.5rem;
+ margin-bottom: 1rem;
+ &.electricity {
+ border: 1px solid var(--elecColor40);
+ }
+ &.gas {
+ border: 1px solid var(--gasColor40);
+ }
+ &.water {
+ border: 1px solid var(--waterColor40);
}
}
diff --git a/src/components/Options/ExportData/exportData.scss b/src/components/Options/ExportData/exportData.scss
index 86950681878ff8458c8cf239fa45fc9d8141f95a..fec065e3b8beda0a6d03a05bf5441490dbe5f79c 100644
--- a/src/components/Options/ExportData/exportData.scss
+++ b/src/components/Options/ExportData/exportData.scss
@@ -24,7 +24,6 @@ div.expansion-panel-root.Mui-expanded:last-child {
margin: 0;
}
.accordion-title {
- padding-left: 1rem;
color: $white;
}
.expansion-panel-details {
@@ -67,5 +66,8 @@ div.expansion-panel-root.Mui-expanded:last-child {
}
div.expansion-panel-summary {
padding: 0 0.25rem 0 1rem;
+ .expansion-panel-content {
+ gap: 1rem;
+ }
}
}
diff --git a/src/components/Options/ProfileTypeOptions/profileTypeOptions.scss b/src/components/Options/ProfileTypeOptions/profileTypeOptions.scss
index 5f912a4f9e2bdebbcb530fb3193151c03955ee16..8dfc6023eff956b94d903867850bda2fc1f7669b 100644
--- a/src/components/Options/ProfileTypeOptions/profileTypeOptions.scss
+++ b/src/components/Options/ProfileTypeOptions/profileTypeOptions.scss
@@ -61,15 +61,10 @@
}
button.profile-link {
- color: $grey-bright;
- text-decoration: none;
- min-height: 4rem;
+ height: 64px !important;
.profile-icon {
vertical-align: middle;
}
- .link-label {
- margin-left: 1rem;
- }
> button {
margin-bottom: 0;
> div {
diff --git a/src/components/TimeStepSelector/TimeStepSelector.tsx b/src/components/TimeStepSelector/TimeStepSelector.tsx
index d6cf1e041994d524a68bcaf927ca1b5536b72b4a..6a72bc1eb2f2c1ff068bec5e62eff491c1d50151 100644
--- a/src/components/TimeStepSelector/TimeStepSelector.tsx
+++ b/src/components/TimeStepSelector/TimeStepSelector.tsx
@@ -1,114 +1,115 @@
-import { Button } from '@material-ui/core'
-import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { FluidType } from 'enum/fluid.enum'
-import { TimeStep } from 'enum/timeStep.enum'
-import { UsageEventType } from 'enum/usageEvent.enum'
-import { DateTime } from 'luxon'
-import React, { Dispatch } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import DateChartService from 'services/dateChart.service'
-import UsageEventService from 'services/usageEvent.service'
-import { AppActionsTypes, AppStore } from 'store'
-import {
- setCurrentIndex,
- setCurrentTimeStep,
- setSelectedDate,
-} from 'store/chart/chart.slice'
-import './timeStepSelector.scss'
-
-const TimeStepSelector = ({ fluidType }: { fluidType: FluidType }) => {
- const { currentTimeStep, selectedDate } = useSelector(
- (state: AppStore) => state.ecolyo.chart
- )
- const { t } = useI18n()
- const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
- const dateChartService = new DateChartService()
- const client = useClient()
- const timeStepElecArray: TimeStep[] = [
- TimeStep.HALF_AN_HOUR,
- TimeStep.WEEK,
- TimeStep.DAY,
- TimeStep.MONTH,
- TimeStep.YEAR,
- ]
- const timeStepMultiArray: TimeStep[] = [
- TimeStep.WEEK,
- TimeStep.DAY,
- TimeStep.MONTH,
- TimeStep.YEAR,
- ]
- const timeStepArray: TimeStep[] =
- fluidType === FluidType.ELECTRICITY
- ? [...timeStepElecArray]
- : [...timeStepMultiArray]
-
- const handleToday = () => {
- const today = DateTime.local()
- .setZone('utc', {
- keepLocalTime: true,
- })
- .startOf('day')
- UsageEventService.addEvent(client, {
- type: UsageEventType.CONSUMPTION_CHANGE_TIMESTEP_EVENT,
- target: TimeStep[TimeStep.WEEK].toLowerCase(),
- context: FluidType[fluidType].toLowerCase(),
- })
- dispatch(setCurrentIndex(0))
- dispatch(setSelectedDate(today))
- dispatch(setCurrentTimeStep(TimeStep.WEEK))
- }
- const handleChangeTimeStep = (targetTimestep: TimeStep) => {
- const index: number = dateChartService.defineDateIndex(
- targetTimestep,
- selectedDate
- )
- UsageEventService.addEvent(client, {
- type: UsageEventType.CONSUMPTION_CHANGE_TIMESTEP_EVENT,
- target: TimeStep[currentTimeStep].toLowerCase(),
- context: FluidType[fluidType].toLowerCase(),
- })
- dispatch(setCurrentTimeStep(targetTimestep))
- dispatch(setCurrentIndex(index))
- }
- return (
- <div className={'timestep-selector'}>
- <Button
- onClick={handleToday}
- classes={{
- root: 'btn-today',
- label: 'text-13-normal',
- }}
- >
- {t('timestep.today')}
- </Button>
- <div className={'timestep-container'}>
- <ul
- className={`timestep-bar ${
- fluidType === FluidType.ELECTRICITY && 'elec-bar'
- }`}
- >
- {timeStepArray.map(step => (
- <React.Fragment key={step}>
- <li
- className={
- step === currentTimeStep ? 'active circle' : 'circle'
- }
- onClick={() => handleChangeTimeStep(step)}
- id={TimeStep[step].toLowerCase()}
- >
- <span className="clickable-area" />
- <span className={'text text-14-normal'}>
- {t(`timestep.${TimeStep[step].toLowerCase()}.period`)}
- </span>
- </li>
- <li className="bar" />
- </React.Fragment>
- ))}
- </ul>
- </div>
- </div>
- )
-}
-
-export default TimeStepSelector
+import { Button } from '@material-ui/core'
+import { useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { FluidType } from 'enum/fluid.enum'
+import { TimeStep } from 'enum/timeStep.enum'
+import { UsageEventType } from 'enum/usageEvent.enum'
+import { DateTime } from 'luxon'
+import React, { Dispatch } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import DateChartService from 'services/dateChart.service'
+import UsageEventService from 'services/usageEvent.service'
+import { AppActionsTypes, AppStore } from 'store'
+import {
+ setCurrentIndex,
+ setCurrentTimeStep,
+ setSelectedDate,
+} from 'store/chart/chart.slice'
+import { getFluidName } from 'utils/utils'
+import './timeStepSelector.scss'
+
+const TimeStepSelector = ({ fluidType }: { fluidType: FluidType }) => {
+ const { currentTimeStep, selectedDate } = useSelector(
+ (state: AppStore) => state.ecolyo.chart
+ )
+ const { t } = useI18n()
+ const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
+ const dateChartService = new DateChartService()
+ const client = useClient()
+ const timeStepElecArray: TimeStep[] = [
+ TimeStep.HALF_AN_HOUR,
+ TimeStep.WEEK,
+ TimeStep.DAY,
+ TimeStep.MONTH,
+ TimeStep.YEAR,
+ ]
+ const timeStepMultiArray: TimeStep[] = [
+ TimeStep.WEEK,
+ TimeStep.DAY,
+ TimeStep.MONTH,
+ TimeStep.YEAR,
+ ]
+ const timeStepArray: TimeStep[] =
+ fluidType === FluidType.ELECTRICITY
+ ? [...timeStepElecArray]
+ : [...timeStepMultiArray]
+
+ const handleToday = () => {
+ const today = DateTime.local()
+ .setZone('utc', {
+ keepLocalTime: true,
+ })
+ .startOf('day')
+ UsageEventService.addEvent(client, {
+ type: UsageEventType.CONSUMPTION_CHANGE_TIMESTEP_EVENT,
+ target: TimeStep[TimeStep.WEEK].toLowerCase(),
+ context: getFluidName(fluidType),
+ })
+ dispatch(setCurrentIndex(0))
+ dispatch(setSelectedDate(today))
+ dispatch(setCurrentTimeStep(TimeStep.WEEK))
+ }
+ const handleChangeTimeStep = (targetTimestep: TimeStep) => {
+ const index: number = dateChartService.defineDateIndex(
+ targetTimestep,
+ selectedDate
+ )
+ UsageEventService.addEvent(client, {
+ type: UsageEventType.CONSUMPTION_CHANGE_TIMESTEP_EVENT,
+ target: TimeStep[currentTimeStep].toLowerCase(),
+ context: getFluidName(fluidType),
+ })
+ dispatch(setCurrentTimeStep(targetTimestep))
+ dispatch(setCurrentIndex(index))
+ }
+ return (
+ <div className={'timestep-selector'}>
+ <Button
+ onClick={handleToday}
+ classes={{
+ root: 'btn-today',
+ label: 'text-13-normal',
+ }}
+ >
+ {t('timestep.today')}
+ </Button>
+ <div className={'timestep-container'}>
+ <ul
+ className={`timestep-bar ${
+ fluidType === FluidType.ELECTRICITY && 'elec-bar'
+ }`}
+ >
+ {timeStepArray.map(step => (
+ <React.Fragment key={step}>
+ <li
+ className={
+ step === currentTimeStep ? 'active circle' : 'circle'
+ }
+ onClick={() => handleChangeTimeStep(step)}
+ id={TimeStep[step].toLowerCase()}
+ >
+ <span className="clickable-area" />
+ <span className={'text text-14-normal'}>
+ {t(`timestep.${TimeStep[step].toLowerCase()}.period`)}
+ </span>
+ </li>
+ <li className="bar" />
+ </React.Fragment>
+ ))}
+ </ul>
+ </div>
+ </div>
+ )
+}
+
+export default TimeStepSelector
diff --git a/src/utils/utils.spec.ts b/src/utils/utils.spec.ts
index 1394922982da09dd5ce6d269bdbaf314908e8ac6..d4e3771e7ad2f5a844033c10ef984309035275cf 100644
--- a/src/utils/utils.spec.ts
+++ b/src/utils/utils.spec.ts
@@ -5,6 +5,7 @@ import { DateTime } from 'luxon'
import {
formatNumberValues,
getChallengeTitleWithLineReturn,
+ getFluidName,
getFluidType,
getKonnectorSlug,
getMonthNameWithPrep,
@@ -116,4 +117,19 @@ describe('utils test', () => {
expect(getMonthNameWithPrep(date)).toBe('d’octobre')
})
})
+
+ describe('getFluidName', () => {
+ it('should return electricity', () => {
+ expect(getFluidName(FluidType.ELECTRICITY)).toBe('electricity')
+ })
+ it('should return water', () => {
+ expect(getFluidName(FluidType.WATER)).toBe('water')
+ })
+ it('should return gas', () => {
+ expect(getFluidName(FluidType.GAS)).toBe('gas')
+ })
+ it('should return multifluid', () => {
+ expect(getFluidName(FluidType.MULTIFLUID)).toBe('multifluid')
+ })
+ })
})
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 146fa92638a8a381d15af1115748b81984466fe0..cae5a543900c147b1bf784d9e5b12705af4d3430 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -31,6 +31,13 @@ export function getKonnectorSlug(fluidType: FluidType) {
throw new Error('unknown fluidtype')
}
}
+/** Return lowercase fluidtype
+ * @example FluidType.ELECTRICITY => 'electricity'
+ */
+export function getFluidName(fluidType: FluidType) {
+ return FluidType[fluidType].toLowerCase()
+}
+
export function getKonnectorUpdateError(type: string) {
switch (type.toUpperCase()) {
case 'USER_ACTION_NEEDED.OAUTH_OUTDATED':