Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import React 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 ModalUnlocked from 'components/CommonKit/Modal/ModalUnlocked'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
interface EcogestureModalProps {
opened: boolean
ecogesture: EcogestureType
t: Function
handleCloseClick: () => void
handleStartClick: () => void
}
const EcogestureModal: React.FC<EcogestureModalProps> = ({
opened,
ecogesture,
t,
handleCloseClick,
}: EcogestureModalProps) => {
return (
<>
{!ecogesture ? (
<></>
) : (
<Modal
open={opened}
border={ecogesture.unlocked}
handleCloseClick={handleCloseClick}
>
<div className="em-header text-14-normal-uppercase">
{t('ECOGESTURE.TITLE_ECOGESTURE')}
</div>
<div className="em-content-box">
<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>
</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="em-description text-16-normal-150">
{ecogesture.longDescription}
</div>
</div>
</Modal>
)}
</>
)
}
export default translate()(EcogestureModal)