From c975abdeab045b4b304bdfae1b57bf58544bc695 Mon Sep 17 00:00:00 2001
From: rpapin <rpapin@grandlyon.com>
Date: Fri, 5 Feb 2021 14:01:34 +0100
Subject: [PATCH] update efficienty modal
---
src/components/Ecogesture/EcogestureList.tsx | 33 +++++++-------
src/components/Ecogesture/EfficientyModal.tsx | 44 +++++++++++++++++++
.../Ecogesture/EfficientyRating.tsx | 37 +++++++++-------
src/components/Ecogesture/NegaWattModal.tsx | 39 ----------------
src/components/Ecogesture/ecogestureList.scss | 4 +-
.../Ecogesture/efficientyModal.scss | 17 +++++++
src/locales/fr.json | 6 +++
7 files changed, 108 insertions(+), 72 deletions(-)
create mode 100644 src/components/Ecogesture/EfficientyModal.tsx
delete mode 100644 src/components/Ecogesture/NegaWattModal.tsx
create mode 100644 src/components/Ecogesture/efficientyModal.scss
diff --git a/src/components/Ecogesture/EcogestureList.tsx b/src/components/Ecogesture/EcogestureList.tsx
index df9b88508..972fb8c82 100644
--- a/src/components/Ecogesture/EcogestureList.tsx
+++ b/src/components/Ecogesture/EcogestureList.tsx
@@ -16,10 +16,11 @@ import OrderIcon from 'assets/icons/ico/order.svg'
import StyledChallengeSpinner from 'components/CommonKit/Spinner/StyledEcogestureSpinner'
import EcogestureCard from 'components/Ecogesture/EcogestureCard'
import EcogestureModal from 'components/Ecogesture/EcogestureModal'
-import NegaWattModal from 'components/Ecogesture/NegaWattModal'
+import EfficientyModal from 'components/Ecogesture/EfficientyModal'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import MuiButton from '@material-ui/core/Button'
import './ecogestureList.scss'
+import thunderFilled from 'assets/icons/visu/thunderFilled.svg'
const EcogesturesList: React.FC = () => {
const { t } = useI18n()
@@ -31,10 +32,10 @@ const EcogesturesList: React.FC = () => {
const [ecogestures, setEcogestures] = useState<Ecogesture[] | null>(null)
const [isLoaded, setisLoaded] = useState(false)
const [openEcogestureModal, setOpenEcogestureModal] = useState(false)
- const [openNegaWattModal, setOpenNegaWattModal] = useState(false)
const [filterbyFluid, setfilterbyFluid] = useState<FluidType | null>(null)
const [ascendingSort, setascendingSort] = useState(false)
const [openDropDown, setopenDropDown] = useState(false)
+ const [openEfficientyModal, setopenEfficientyModal] = useState(false)
const handleClick = (ecogesture: Ecogesture) => {
setSelectedEcogesture(ecogesture)
@@ -45,14 +46,9 @@ const EcogesturesList: React.FC = () => {
setOpenEcogestureModal(false)
}, [])
- const handleNegaWattClick = () => {
- setOpenNegaWattModal(true)
+ const toggleModalEfficienty = () => {
+ setopenEfficientyModal(prev => !prev)
}
-
- const handleNegaWattCloseClick = () => {
- setOpenNegaWattModal(false)
- }
-
const toggleDropDown = () => {
setopenDropDown(prev => !prev)
}
@@ -113,8 +109,8 @@ const EcogesturesList: React.FC = () => {
return (
<div className="ecogesture-root">
<>
- {openNegaWattModal && (
- <NegaWattModal handleCloseClick={handleNegaWattCloseClick} />
+ {openEfficientyModal && (
+ <EfficientyModal handleCloseClick={toggleModalEfficienty} />
)}
<div className="negawatt-button-content">
<div className="filters text-16-normal">
@@ -281,11 +277,18 @@ const EcogesturesList: React.FC = () => {
>
<StyledIcon icon={OrderIcon} size={28} />
</MuiButton>
-
- <div className="ng-question" onClick={handleNegaWattClick}>
- {t('ECOGESTURE.QUESTION_NEGAWATT')}
- </div>
</div>
+ <MuiButton
+ onClick={() => {
+ toggleModalEfficienty()
+ }}
+ classes={{
+ root: 'btn-secondary-negative btn-order',
+ label: 'text-14-normal',
+ }}
+ >
+ <StyledIcon icon={thunderFilled} size={28} />
+ </MuiButton>
</div>
<div className="ecogesture-content">
{!ecogestures || !isLoaded ? (
diff --git a/src/components/Ecogesture/EfficientyModal.tsx b/src/components/Ecogesture/EfficientyModal.tsx
new file mode 100644
index 000000000..e8b56ef77
--- /dev/null
+++ b/src/components/Ecogesture/EfficientyModal.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Modal from 'components/CommonKit/Modal/Modal'
+import './efficientyModal.scss'
+import thunderFilled from 'assets/icons/visu/thunderFilled.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import EfficientyRating from './EfficientyRating'
+
+interface EfficientyModalProps {
+ handleCloseClick: () => void
+}
+
+const EfficientyModal: React.FC<EfficientyModalProps> = ({
+ handleCloseClick,
+}: EfficientyModalProps) => {
+ const { t } = useI18n()
+ return (
+ <Modal handleCloseClick={handleCloseClick}>
+ <div className="header-efficienty-modal text-22-bold">
+ <StyledIcon icon={thunderFilled} size={50} />
+ {t('modal_efficienty.title')}
+ </div>
+ <div className="em-content-box">
+ <div className="em-content-box-text">
+ <div className="em-title text-19-normal ">
+ {t('modal_efficienty.description')}
+ </div>
+ <div className="em-description-2 text-16">
+ <div className="star-efficienty-modal">
+ <EfficientyRating result={5} />
+ {t('modal_efficienty.important_eco')}
+ </div>
+ <div className="star-efficienty-modal">
+ <EfficientyRating result={1} />
+ {t('modal_efficienty.weak_eco')}
+ </div>
+ </div>
+ </div>
+ </div>
+ </Modal>
+ )
+}
+
+export default EfficientyModal
diff --git a/src/components/Ecogesture/EfficientyRating.tsx b/src/components/Ecogesture/EfficientyRating.tsx
index 83999e38f..322720d32 100644
--- a/src/components/Ecogesture/EfficientyRating.tsx
+++ b/src/components/Ecogesture/EfficientyRating.tsx
@@ -10,26 +10,29 @@ interface EfficientyRatingProps {
const EfficientyRating: React.FC<EfficientyRatingProps> = ({
result,
}: EfficientyRatingProps) => {
- 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])
+ const maxStars = [1, 2, 3, 4, 5]
return (
<div className="thunder">
- {elements.map((star, i) => {
- return <StyledIcon key={i} className="star" icon={star} size={15} />
+ {maxStars.map((number, i) => {
+ if (number <= result)
+ return (
+ <StyledIcon
+ key={i}
+ className="star"
+ icon={thunderFilled}
+ size={15}
+ />
+ )
+ else
+ return (
+ <StyledIcon
+ key={i}
+ className="star"
+ icon={thunderEmpty}
+ size={15}
+ />
+ )
})}
</div>
)
diff --git a/src/components/Ecogesture/NegaWattModal.tsx b/src/components/Ecogesture/NegaWattModal.tsx
deleted file mode 100644
index 5c44a34c2..000000000
--- a/src/components/Ecogesture/NegaWattModal.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Modal from 'components/CommonKit/Modal/Modal'
-import './ecogestureModal.scss'
-interface NegaWattModalProps {
- handleCloseClick: () => void
-}
-
-const NegaWattModal: React.FC<NegaWattModalProps> = ({
- handleCloseClick,
-}: NegaWattModalProps) => {
- const { t } = useI18n()
- return (
- <Modal handleCloseClick={handleCloseClick}>
- <div className="em-header text-14-normal-uppercase">
- {t('NEGAWATT.TITLE_NEGAWATT')}
- </div>
- <div className="em-content-box">
- <div className="em-content-box-text">
- <div className="em-title text-19-bold ">{t('NEGAWATT.QUESTION')}</div>
- <div className="em-description-2 text-16">
- {t('NEGAWATT.ANSWER.BASE')}
- </div>
- <div className="em-description-2 text-16">
- <div className="em-description-3">
- {t('NEGAWATT.ANSWER.STRONG')}
- </div>
- <div className="em-description-3">
- {t('NEGAWATT.ANSWER.MEDIUM')}
- </div>
- <div className="em-description-3">{t('NEGAWATT.ANSWER.WEAK')}</div>
- </div>
- </div>
- </div>
- </Modal>
- )
-}
-
-export default NegaWattModal
diff --git a/src/components/Ecogesture/ecogestureList.scss b/src/components/Ecogesture/ecogestureList.scss
index 6a56fabf5..49b100c5a 100644
--- a/src/components/Ecogesture/ecogestureList.scss
+++ b/src/components/Ecogesture/ecogestureList.scss
@@ -11,6 +11,9 @@
.negawatt-button-content {
max-width: 52rem;
width: 97%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
@media #{$tablet} {
width: 97%;
}
@@ -27,7 +30,6 @@
.filters {
display: flex;
align-items: center;
- justify-content: space-between;
height: 50px;
color: white;
position: relative;
diff --git a/src/components/Ecogesture/efficientyModal.scss b/src/components/Ecogesture/efficientyModal.scss
new file mode 100644
index 000000000..1b003ef7d
--- /dev/null
+++ b/src/components/Ecogesture/efficientyModal.scss
@@ -0,0 +1,17 @@
+.header-efficienty-modal {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ svg {
+ margin-bottom: 0.5rem;
+ }
+}
+.star-efficienty-modal {
+ padding-bottom: 0.5rem;
+ display: flex;
+ div {
+ margin-right: 1rem;
+ }
+ }
\ No newline at end of file
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 86df6f301..458d0b115 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -519,5 +519,11 @@
"label": "Grâce à ces nouvelles informations, votre comparaison sera bien plus précise et pertinente !",
"view_comparison": "Voir ma comparaison"
}
+ },
+ "modal_efficienty": {
+ "title": "Efficacité !",
+ "description": "L’efficacité sert d'unité de mesure de vos économies d'énergie. Cette unité est purement indicative et arbitraire.",
+ "important_eco": "Économie importante",
+ "weak_eco": "Économie faible"
}
}
--
GitLab