Newer
Older
import React, { useState, useEffect, useContext } from 'react'
import { translate } from 'cozy-ui/react/I18n'
import Modal from 'components/CommonKit/Modal/Modal'
import { getPicto } from 'utils/utils'
import { EcogestureType } from 'services/dataChallengeContracts'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import def from 'assets/icons/visu/ecogesture/default.svg'
import { AppContext } from 'components/Contexts/AppContextProvider'
interface EcogestureModalProps {
opened: boolean
ecogesture: EcogestureType
unlockedEcogesture: boolean
t: Function
handleCloseClick: () => void
handleStartClick: () => void
}
const EcogestureModal: React.FC<EcogestureModalProps> = ({
opened,
ecogesture,
unlockedEcogesture,
const [ecogestureIcon, setEcogestureIcon] = useState(def)
const { userProfile, setNotificationEcogesture } = useContext(AppContext)
async function importEcogestureIcon(id: string) {
// Les svg doivent être au format id.svg
let importedEcogesture
try {
importedEcogesture = await import(
/* webpackMode: "eager" */ `assets/icons/visu/ecogesture/${id}.svg`
)
} catch (e) {}
if (importedEcogesture) {
setEcogestureIcon(importedEcogesture.default)
}
}
useEffect(() => {
let index = -1
index = userProfile.notificationEcogesture.indexOf(ecogesture.id)
if (index > -1) {
const updatedNotificationEcogestureList =
userProfile && userProfile.notificationEcogesture
updatedNotificationEcogestureList.splice(index, 1)
setNotificationEcogesture(updatedNotificationEcogestureList)
}
}, [])
useEffect(() => {
if (ecogesture) {
importEcogestureIcon(ecogesture.id)
}
}, [ecogesture])
border={ecogesture.unlocked || unlockedEcogesture}
handleCloseClick={handleCloseClick}
>
<div className="em-header text-14-normal-uppercase">
{t('ECOGESTURE.TITLE_ECOGESTURE')}
</div>
<div className="em-root">
<div className="em-content">
<div className="em-content-box-img">
{(ecogesture.unlocked || unlockedEcogesture) &&
ecogestureIcon && (
<Icon className="icon" icon={ecogestureIcon} size={140} />
)}
</div>
<div className="em-title text-24-bold ">
{ecogesture.shortName}
<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>
</div>
<div className="em-picto-flow">
{ecogesture.fluidTypes.map((fluid, index) => (
<div key={index}>
<StyledIcon
className="em-pic-content"
icon={getPicto(fluid)}
size={25}
/>
</div>
))}
</div>
</div>
<div className="long-name">{ecogesture.longName}</div>
<div className="em-description text-16-normal-150">
{ecogesture.longDescription}