diff --git a/src/assets/icons/visu/thunderEmpty.svg b/src/assets/icons/visu/thunderEmpty.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b6b398e1ec6670eeca70c2ccd7a50751bcd9d9a2
--- /dev/null
+++ b/src/assets/icons/visu/thunderEmpty.svg
@@ -0,0 +1,4 @@
+<svg width="12" height="19" viewBox="0 0 12 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.07817 1.44859C6.34673 1.02657 7 1.21681 7 1.71703V10.5C7 10.7761 6.77614 11 6.5 11H0.910837C0.516291 11 0.277184 10.5644 0.489006 10.2316L6.07817 1.44859Z" fill="#121212"/>
+<path d="M5.93189 17.4025C5.67473 17.8433 5 17.6609 5 17.1505V7.5C5 7.22386 5.22386 7 5.5 7H11.1295C11.5154 7 11.7558 7.41861 11.5614 7.75194L5.93189 17.4025Z" fill="#121212"/>
+</svg>
diff --git a/src/assets/icons/visu/thunderFilled.svg b/src/assets/icons/visu/thunderFilled.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a1685f68460bfc0c87f9ba9f212759a58c402f2f
--- /dev/null
+++ b/src/assets/icons/visu/thunderFilled.svg
@@ -0,0 +1,4 @@
+<svg width="12" height="19" viewBox="0 0 12 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.07817 1.44859C6.34673 1.02657 7 1.21681 7 1.71703V10.5C7 10.7761 6.77614 11 6.5 11H0.910837C0.516291 11 0.277184 10.5644 0.489006 10.2316L6.07817 1.44859Z" fill="#E3B82A"/>
+<path d="M5.93189 17.4025C5.67473 17.8433 5 17.6609 5 17.1505V7.5C5 7.22386 5.22386 7 5.5 7H11.1295C11.5154 7 11.7558 7.41861 11.5614 7.75194L5.93189 17.4025Z" fill="#E3B82A"/>
+</svg>
diff --git a/src/components/Ecogesture/EcogestureList.tsx b/src/components/Ecogesture/EcogestureList.tsx
index 10e7e925d34d56020dfd7d44e3a26a53f7ff709b..19e4ef38d652cbeba6082d5c73225aec5f3faec9 100644
--- a/src/components/Ecogesture/EcogestureList.tsx
+++ b/src/components/Ecogesture/EcogestureList.tsx
@@ -317,6 +317,7 @@ const EcogesturesList: React.FC = () => {
{openEcogestureModal && selectedEcogesture && (
<EcogestureModal
ecogesture={selectedEcogesture}
+ isAction={false}
handleCloseClick={handleCloseClick}
/>
)}
diff --git a/src/components/Ecogesture/EcogestureModal.tsx b/src/components/Ecogesture/EcogestureModal.tsx
index 16d888a5406192b494257478582434022487813e..da2b47d83d3798b333665c0d849c0b11bcb79a68 100644
--- a/src/components/Ecogesture/EcogestureModal.tsx
+++ b/src/components/Ecogesture/EcogestureModal.tsx
@@ -13,24 +13,34 @@ import useExploration from 'components/Hooks/useExploration'
import { UserExplorationID } from 'enum/userExploration.enum'
import { AppStore } from 'store'
import { useSelector } from 'react-redux'
+import StyledStopButton from 'components/CommonKit/Button/StyledStopButton'
+import ThunderContainer from './ThunderContainer'
interface EcogestureModalProps {
ecogesture: Ecogesture
+ isAction: boolean
handleCloseClick: () => void
}
const EcogestureModal: React.FC<EcogestureModalProps> = ({
ecogesture,
+ isAction,
handleCloseClick,
}: EcogestureModalProps) => {
const { t } = useI18n()
const [ecogestureIcon, setEcogestureIcon] = useState(defaultIcon)
+ const [isMoreDetail, setIsMoreDetail] = useState(false)
const { currentChallenge } = useSelector(
(state: AppStore) => state.ecolyo.challenge
)
const [, setValidExploration] = useExploration()
-
+ const selectAction = () => {
+ console.log('selectAction')
+ }
+ const toggleMoreDetail = () => {
+ setIsMoreDetail(prev => !prev)
+ }
useEffect(() => {
if (ecogesture) {
importIconbyId(ecogesture.id, 'ecogesture').then(icon => {
@@ -48,7 +58,7 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
return (
<Modal border={true} handleCloseClick={handleCloseClick}>
<div className="em-header text-14-normal-uppercase">
- {t('ECOGESTURE.TITLE_ECOGESTURE')}
+ {isAction ? t('action.title_action') : t('ECOGESTURE.TITLE_ECOGESTURE')}
</div>
<div className="em-root">
<div className="em-content">
@@ -60,8 +70,10 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
<div className="em-title text-24-bold ">{ecogesture.shortName}</div>
<div className="em-detail">
<div className="em-detail-nwh">
- <span className="text-16-bold">{ecogesture.nwh} </span>
- <span className="em-detail-nwh-unit text-16-normal">nWh</span>
+ <span className="em-efficiency">
+ {t('ECOGESTURE.EFFICIENCY')}
+ </span>
+ <ThunderContainer result={Math.round(ecogesture.nwh / 2)} />
</div>
<div className="em-picto-flow">
{ecogesture.fluidTypes.map((fluid, index) => (
@@ -75,10 +87,69 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
))}
</div>
</div>
- <div className="long-name">{ecogesture.longName}</div>
- <div className="em-description text-16-normal-150">
- {ecogesture.longDescription}
+ <div className="long-name-container">
+ <svg
+ viewBox="0 0 273 143"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ width="100%"
+ >
+ <path
+ d="M0.5 39.6312C0.5 37.8664 1.32986 36.2403 2.79162 35.2971C13.8991 28.13 61.452 0.5 134.4 0.5C207.386 0.5 258.134 28.1583 270.044 35.3156C271.599 36.2503 272.5 37.9368 272.5 39.7746V137C272.5 140.038 270.038 142.5 267 142.5H6C2.96243 142.5 0.5 140.038 0.5 137V39.6312Z"
+ fill="url(#paint0_radial)"
+ stroke="url(#paint1_linear)"
+ />
+ <defs>
+ <radialGradient
+ id="paint0_radial"
+ cx="0"
+ cy="0"
+ r="1"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="translate(136.5 4.46875) rotate(90) scale(43.7937 165.567)"
+ >
+ <stop stopColor="#2A2B30" />
+ <stop offset="1" stopColor="#1B1C22" />
+ </radialGradient>
+ <linearGradient
+ id="paint1_linear"
+ x1="131.808"
+ y1="9.45156e-07"
+ x2="131.808"
+ y2="143"
+ gradientUnits="userSpaceOnUse"
+ >
+ <stop stopColor="#61F0F2" />
+
+ <stop offset="1" stopColor="#48C2C4" />
+ </linearGradient>
+ </defs>
+ <foreignObject x="20" y="30" width="90%" height="90%">
+ <p xmlns="http://www.w3.org/1999/xhtml" className="long-name">
+ {ecogesture.longName}
+ </p>
+ </foreignObject>
+ </svg>
</div>
+ {/* <div className="long-name">{ecogesture.longName}</div> */}
+ {isAction ? (
+ <StyledStopButton color="secondary" onClick={selectAction}>
+ {t('action.select_action')}
+ </StyledStopButton>
+ ) : isMoreDetail ? (
+ <div>
+ <div className="em-description text-16-normal-150">
+ {ecogesture.longDescription}
+ </div>
+ <StyledStopButton color="secondary" onClick={toggleMoreDetail}>
+ {t('ECOGESTURE.SHOW_LESS')}
+ </StyledStopButton>
+ </div>
+ ) : (
+ <StyledStopButton color="secondary" onClick={toggleMoreDetail}>
+ {t('ECOGESTURE.SHOW_MORE')}
+ </StyledStopButton>
+ )}
</div>
</div>
</Modal>
diff --git a/src/components/Ecogesture/ThunderContainer.tsx b/src/components/Ecogesture/ThunderContainer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8bb12376370c2de7e5ad0c87886dcb80243ae7f3
--- /dev/null
+++ b/src/components/Ecogesture/ThunderContainer.tsx
@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from 'react'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import thunderFilled from 'assets/icons/visu/thunderFilled.svg'
+import thunderEmpty from 'assets/icons/visu/thunderEmpty.svg'
+
+interface ThunderContainerProps {
+ result: number
+}
+
+const ThunderContainer: React.FC<ThunderContainerProps> = ({
+ result,
+}: ThunderContainerProps) => {
+ const [elements] = useState<string[]>([])
+ useEffect(() => {
+ const renderThunder = () => {
+ //To be removed when action and explorations will be done
+ if (result === 5) {
+ elements.splice(0, elements.length)
+ }
+ for (let i = 0; i < 5; i++) {
+ if (i < result) elements.push(thunderFilled)
+ else if (i >= result) elements.push(thunderEmpty)
+ }
+ }
+
+ renderThunder()
+ }, [result, elements])
+
+ return (
+ <div className="thunder">
+ {elements.map((star, i) => {
+ return <StyledIcon key={i} className="star" icon={star} size={15} />
+ })}
+ </div>
+ )
+}
+
+export default ThunderContainer
diff --git a/src/components/Ecogesture/ecogestureModal.scss b/src/components/Ecogesture/ecogestureModal.scss
index 0956bc70a4333dcdb938b0e682c687ae37d6c17a..faefc696f2929eb288fe0aa988fa2842d6ec2476 100644
--- a/src/components/Ecogesture/ecogestureModal.scss
+++ b/src/components/Ecogesture/ecogestureModal.scss
@@ -29,6 +29,7 @@
}
.em-content {
padding: 1.5rem 2.5rem 0;
+ width: 100%;
@media #{$large-phone} {
width: 100%;
@@ -65,18 +66,26 @@
}
}
}
+ .em-efficiency {
+ margin: 0 0.5rem 0 0.25rem;
+ }
.em-title {
margin-bottom: 0;
text-align: center;
}
-
+ .long-name-container{
+ margin: 0 0.25rem;
+ width: 100%;
+ }
.long-name {
font-weight: bold;
line-height: 150%;
- margin: 0.5rem 0 1rem;
+ color: $white
}
.em-description {
padding-bottom: 2rem;
+ margin: 1rem 0.75rem 1rem 1.25rem;
+ //margin: 1rem;
}
}
}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index ff8692a106d46e5ff099f5cc10d1d40989553425..a6950b410203e2fd17834df5469556c11eb3f615 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -202,7 +202,10 @@
"FILTER_TITLE": "Tous les ecogestes",
"TITLE_ECOGESTURE": "Ecogeste",
"NO_ECOGESTURE": "Pas d'ecogeste",
- "QUESTION_NEGAWATT": "nWh ?"
+ "QUESTION_NEGAWATT": "nWh ?",
+ "EFFICIENCY": "Efficacité",
+ "SHOW_LESS": "Je veux moins d’infos",
+ "SHOW_MORE": "Je veux plus d’infos"
},
"NEGAWATT": {
"TITLE_NEGAWATT": "NégaWatt",
@@ -398,5 +401,9 @@
"interval": {
"explanation": "Vous pouvez vérifier cette informations sur l'écran Conso."
}
+ },
+ "action": {
+ "title_action": "Action",
+ "select_action" : "Je choisis cette action"
}
}