diff --git a/src/assets/icons/ico/doing-disabled.svg b/src/assets/icons/ico/doing-disabled.svg
new file mode 100644
index 0000000000000000000000000000000000000000..77db903d23e7a3521412f0f02e3f30218344f742
--- /dev/null
+++ b/src/assets/icons/ico/doing-disabled.svg
@@ -0,0 +1,18 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_11435_1783)">
+<g clip-path="url(#clip1_11435_1783)">
+<path d="M22.6828 5.17873C22.6213 5.17821 22.5599 5.17769 22.5049 5.17578L20.1355 5.06101L20.1208 5.34363C20.036 5.36172 19.9527 5.38632 19.86 5.39928L18.5192 32.5978C18.6058 32.6202 18.6887 32.6571 18.7687 32.6809L18.7554 32.97L21.1249 33.0848L21.1235 33.0783C21.185 33.0788 21.2413 33.0872 21.3041 33.0943C28.2765 33.4403 34.2422 27.4707 34.6219 19.7618C35.0082 12.0515 29.6617 5.5234 22.6828 5.17873Z" fill="#666666"/>
+<path d="M32.1416 19.6335C32.5219 11.9257 27.175 5.39835 20.1991 5.05418C13.2231 4.71002 7.25973 10.6794 6.87946 18.3871C6.49919 26.0949 11.8461 32.6223 18.822 32.9664C25.798 33.3106 31.7614 27.3412 32.1416 19.6335Z" fill="#989898"/>
+<path d="M29.5447 19.505C29.847 13.3785 25.5995 8.1904 20.0577 7.91699C14.5159 7.64358 9.77837 12.3884 9.47612 18.5149C9.17386 24.6414 13.4213 29.8296 18.9631 30.103C24.5049 30.3764 29.2424 25.6315 29.5447 19.505Z" fill="#E5E5E5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.3898 12.9541C26.0218 13.4046 26.1688 14.2822 25.7183 14.9142L18.6774 24.7898C18.4244 25.1447 18.0211 25.3621 17.5856 25.3784C17.1501 25.3946 16.7317 25.2079 16.4529 24.873L13.0806 20.8207C12.5842 20.2242 12.6653 19.3381 13.2619 18.8416C13.8585 18.3451 14.7445 18.4263 15.241 19.0228L17.4472 21.6738L23.4297 13.2825C23.8803 12.6506 24.7578 12.5035 25.3898 12.9541Z" fill="#C0C0C0"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_11435_1783">
+<rect width="40" height="40" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+<clipPath id="clip1_11435_1783">
+<rect width="40" height="40" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/ico/doing-enabled.svg b/src/assets/icons/ico/doing-enabled.svg
new file mode 100644
index 0000000000000000000000000000000000000000..87ca053f52ebf01622b7ce52f26f83b7f2ff1c05
--- /dev/null
+++ b/src/assets/icons/ico/doing-enabled.svg
@@ -0,0 +1,19 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_11435_1751)">
+<g clip-path="url(#clip1_11435_1751)">
+<path d="M22.6828 5.17873C22.6213 5.17821 22.5599 5.17769 22.5049 5.17578L20.1355 5.06101L20.1208 5.34363C20.036 5.36172 19.9527 5.38632 19.86 5.39928L18.5192 32.5978C18.6058 32.6202 18.6887 32.6571 18.7687 32.6809L18.7554 32.97L21.1249 33.0848L21.1235 33.0783C21.185 33.0788 21.2413 33.0872 21.3041 33.0943C28.2765 33.4403 34.2422 27.4707 34.6219 19.7618C35.0082 12.0515 29.6617 5.5234 22.6828 5.17873Z" fill="#2B6F1F"/>
+<path d="M34.4793 16.7926L31.863 16.192L18.5297 32.3908L18.5192 32.5975C18.6058 32.6199 18.6887 32.6568 18.7687 32.6806L18.7554 32.9697L21.1249 33.0845L21.1235 33.078C21.185 33.0785 21.2413 33.0869 21.3041 33.094C28.2765 33.44 34.2422 27.4705 34.6219 19.7615C34.6768 18.7409 34.6223 17.7505 34.4793 16.7926Z" fill="#295721"/>
+<path d="M32.1416 19.6335C32.5219 11.9257 27.175 5.39835 20.1991 5.05418C13.2231 4.71002 7.25973 10.6794 6.87946 18.3871C6.49919 26.0949 11.8461 32.6223 18.822 32.9664C25.798 33.3106 31.7614 27.3412 32.1416 19.6335Z" fill="#1ABA00"/>
+<path d="M29.5447 19.505C29.847 13.3785 25.5995 8.1904 20.0577 7.91699C14.5159 7.64358 9.77837 12.3884 9.47612 18.5149C9.17386 24.6414 13.4213 29.8296 18.9631 30.103C24.5049 30.3764 29.2424 25.6315 29.5447 19.505Z" fill="white"/>
+<path d="M26.1254 15.2044C26.7363 14.3476 26.5369 13.1578 25.6801 12.5469C24.8233 11.9361 23.6335 12.1355 23.0226 12.9923L17.4166 20.8554L15.6253 18.703C14.9522 17.8942 13.7509 17.7842 12.942 18.4573C12.1332 19.1304 12.0232 20.3317 12.6963 21.1406L16.0686 25.1928C16.4466 25.647 17.0139 25.9001 17.6043 25.878C18.1947 25.8559 18.7415 25.5612 19.0846 25.0801L26.1254 15.2044Z" fill="#1ABA00" stroke="white" stroke-linejoin="round"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_11435_1751">
+<rect width="40" height="40" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+<clipPath id="clip1_11435_1751">
+<rect width="40" height="40" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/ico/objective-disabled.svg b/src/assets/icons/ico/objective-disabled.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b0304a2e21698302639bb0f63385ce1ab0838643
--- /dev/null
+++ b/src/assets/icons/ico/objective-disabled.svg
@@ -0,0 +1,15 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_11435_2942)">
+<path d="M22.0284 4.8345C21.9671 4.83784 21.9057 4.84118 21.8507 4.84273L19.4788 4.87705L19.4819 5.16003C19.3984 5.1834 19.3168 5.2132 19.2251 5.23195L19.5957 32.461C19.6836 32.4779 19.7686 32.5095 19.85 32.5282L19.8549 32.8176L22.2268 32.7833L22.225 32.7769C22.2864 32.7735 22.3431 32.7784 22.4063 32.7815C29.3866 32.6888 34.9655 26.3562 34.8602 18.6387C34.7613 10.9193 29.0152 4.74003 22.0284 4.8345Z" fill="#666666"/>
+<path d="M32.3767 18.6669C32.272 10.9505 26.5256 4.77191 19.5418 4.8667C12.558 4.96148 6.98141 11.2937 7.08613 19.0101C7.19086 26.7265 12.9372 32.9051 19.921 32.8103C26.9048 32.7155 32.4814 26.3833 32.3767 18.6669Z" fill="#989898"/>
+<path d="M29.777 18.7024C29.6937 12.5691 25.1287 7.65802 19.5807 7.73332C14.0327 7.80862 9.60258 12.8417 9.68583 18.9751C9.76907 25.1085 14.3341 30.0195 19.8821 29.9442C25.4301 29.8689 29.8602 24.8358 29.777 18.7024Z" fill="#E5E5E5"/>
+<path d="M27.1838 18.7373C27.1221 14.187 23.7354 10.5435 19.6195 10.5994C15.5036 10.6552 12.217 14.3893 12.2788 18.9396C12.3406 23.4899 15.7272 27.1334 19.8431 27.0776C23.9591 27.0217 27.2456 23.2876 27.1838 18.7373Z" fill="#989898"/>
+<path d="M24.5908 18.7725C24.5506 15.8089 22.3423 13.436 19.6585 13.4724C16.9747 13.5088 14.8317 15.9408 14.8719 18.9044C14.9121 21.868 17.1204 24.241 19.8042 24.2046C22.488 24.1681 24.631 21.7361 24.5908 18.7725Z" fill="#E5E5E5"/>
+<path d="M21.9912 18.8076C21.9725 17.427 20.9455 16.3216 19.6975 16.3385C18.4495 16.3555 17.453 17.4884 17.4717 18.8689C17.4904 20.2495 18.5173 21.3549 19.7654 21.338C21.0134 21.321 22.0099 20.1881 21.9912 18.8076Z" fill="#989898"/>
+</g>
+<defs>
+<clipPath id="clip0_11435_2942">
+<rect width="40" height="40" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/ico/objective-enabled.svg b/src/assets/icons/ico/objective-enabled.svg
new file mode 100644
index 0000000000000000000000000000000000000000..eb15ce13b268c126676d99edd9fdfbe7c7b0e0c3
--- /dev/null
+++ b/src/assets/icons/ico/objective-enabled.svg
@@ -0,0 +1,29 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_11435_17184)">
+<path d="M22.0284 4.8345C21.9671 4.83784 21.9057 4.84118 21.8507 4.84273L19.4788 4.87705L19.4819 5.16003C19.3984 5.1834 19.3168 5.2132 19.2251 5.23195L19.5957 32.461C19.6836 32.4779 19.7686 32.5095 19.85 32.5282L19.8549 32.8176L22.2268 32.7833L22.225 32.7769C22.2864 32.7735 22.3431 32.7784 22.4063 32.7815C29.3866 32.6888 34.9655 26.3562 34.8602 18.6387C34.7613 10.9193 29.0152 4.74003 22.0284 4.8345Z" fill="#1B4D97"/>
+<path d="M34.5313 15.6846L31.8824 15.2496L19.5931 32.2541L19.5957 32.461C19.6835 32.478 19.7685 32.5096 19.8499 32.5283L19.8548 32.8177L22.2268 32.7834L22.225 32.777C22.2864 32.7736 22.3431 32.7785 22.4063 32.7816C29.3866 32.6889 34.9655 26.3563 34.8602 18.6387C34.8509 17.6167 34.7342 16.6317 34.5313 15.6846Z" fill="#0C2C5B"/>
+<path d="M32.3767 18.6669C32.272 10.9505 26.5256 4.77191 19.5418 4.8667C12.558 4.96148 6.98141 11.2937 7.08613 19.0101C7.19086 26.7265 12.9372 32.9051 19.921 32.8103C26.9048 32.7155 32.4814 26.3833 32.3767 18.6669Z" fill="#538DE3"/>
+<path d="M29.777 18.7024C29.6937 12.5691 25.1287 7.65802 19.5807 7.73332C14.0327 7.80862 9.60258 12.8417 9.68583 18.9751C9.76907 25.1085 14.3341 30.0195 19.8821 29.9442C25.4301 29.8689 29.8602 24.8358 29.777 18.7024Z" fill="white"/>
+<path d="M27.1838 18.7373C27.1221 14.187 23.7354 10.5435 19.6195 10.5994C15.5036 10.6552 12.217 14.3893 12.2788 18.9396C12.3406 23.4899 15.7272 27.1334 19.8431 27.0776C23.9591 27.0217 27.2456 23.2876 27.1838 18.7373Z" fill="#538DE3"/>
+<path d="M24.5908 18.7725C24.5506 15.8089 22.3423 13.436 19.6585 13.4724C16.9747 13.5088 14.8317 15.9408 14.8719 18.9044C14.9121 21.868 17.1204 24.241 19.8042 24.2046C22.488 24.1681 24.631 21.7361 24.5908 18.7725Z" fill="white"/>
+<path d="M21.9912 18.8076C21.9725 17.427 20.9455 16.3216 19.6975 16.3385C18.4495 16.3555 17.453 17.4884 17.4717 18.8689C17.4904 20.2495 18.5173 21.3549 19.7654 21.338C21.0134 21.321 22.0099 20.1881 21.9912 18.8076Z" fill="#538DE3"/>
+<path opacity="0.35" d="M9.97602 27.6783C10.3998 28.252 10.8677 28.7855 11.3733 29.2808L19.6986 19.7767L19.0851 19.2424L17.3469 19.2653L9.97602 27.6783Z" fill="#0C2C5B"/>
+<path d="M19.5667 17.9404C19.5534 17.9404 19.5401 17.9404 19.5334 17.9404L3.16672 13.5938V13.6004C3.42672 13.7271 3.54005 14.1738 3.41339 14.6604C3.28672 15.1404 2.96672 15.4738 2.68005 15.4604L19.0067 19.7938C19.0267 19.8071 19.0467 19.8138 19.0734 19.8204C19.3801 19.9004 19.7401 19.5471 19.8801 19.0271C20.0067 18.5071 19.8734 18.0204 19.5667 17.9404Z" fill="#BCB1C9"/>
+<path d="M19.9068 18.4404L19.1668 18.2471L19.0201 18.2071L3.44676 14.0737C3.46676 14.2204 3.46676 14.3871 3.42676 14.5671L18.7868 18.6471L19.0401 18.7137L19.8868 18.9404C19.9268 18.7537 19.9268 18.5871 19.9068 18.4404Z" fill="#EAEAEA"/>
+<path d="M19.18 19.2667L18.7067 19.14L3.25334 15.04C3.10001 15.3067 2.88001 15.4667 2.68001 15.4534L2.67334 15.4667L19.04 19.8134V19.8C19.0467 19.8067 19.06 19.8134 19.0667 19.8134C19.2867 19.8734 19.54 19.7 19.7133 19.4067L19.18 19.2667Z" fill="#8B8496"/>
+<path d="M3.44529 14.6675C3.58323 14.1479 3.44696 13.6609 3.14092 13.5796C2.83489 13.4984 2.47497 13.8537 2.33704 14.3732C2.1991 14.8928 2.33537 15.3798 2.64141 15.4611C2.94744 15.5423 3.30735 15.187 3.44529 14.6675Z" fill="#EAEAEA"/>
+<path d="M4.58001 13.9735L5.24001 14.1468L4.71334 11.5335L4.05334 11.3535L4.58001 13.9735Z" fill="#F3D4FE"/>
+<path d="M6.87996 14.5801L7.53996 14.7534L7.03329 12.0801L6.37329 11.9067L6.87996 14.5801Z" fill="#F3D4FE"/>
+<path d="M5.05338 14.1002L4.59338 11.4868C4.59338 11.4868 5.41338 11.7068 5.63338 11.7601C6.18672 11.9068 7.12672 13.6735 7.12672 13.6735L6.73338 12.0002C6.73338 12.0002 7.98005 12.3335 8.40005 12.4402C8.81338 12.5535 9.33338 15.2268 9.33338 15.2268L5.05338 14.1002Z" fill="#D96FFF"/>
+<path opacity="0.45" d="M8.33994 14.4204L7.41327 13.0337L7.70661 14.2537L4.43994 13.387L4.57994 13.9737L5.05994 14.1004L5.24661 14.147L9.34661 15.2337C9.34661 15.2337 9.29327 15.087 9.18661 14.6404L8.33994 14.4204Z" fill="#9F25CA"/>
+<path d="M4.08012 15.8472L4.74012 16.0205L2.98678 18.0338L2.32678 17.8538L4.08012 15.8472Z" fill="#B67DCA"/>
+<path d="M6.38019 16.4536L7.04019 16.6336L5.27353 18.7069L4.61353 18.5269L6.38019 16.4536Z" fill="#B67DCA"/>
+<path d="M4.56015 15.9736L2.86682 18.0136C2.86682 18.0136 3.68682 18.2336 3.90682 18.287C4.46015 18.4336 6.15349 17.367 6.15349 17.367L4.98015 18.627C4.98015 18.627 6.22682 18.9603 6.64682 19.067C7.06015 19.1803 8.84015 17.107 8.84015 17.107L4.56015 15.9736Z" fill="#8C18B6"/>
+<path opacity="0.45" d="M7.56674 17.3203L6.07341 18.0603L6.93341 17.147L3.70007 16.287L4.08007 15.8403L4.56007 15.967L4.74674 16.0137L8.84674 17.1003C8.84674 17.1003 8.75341 17.207 8.44674 17.547L7.56674 17.3203Z" fill="#590478"/>
+</g>
+<defs>
+<clipPath id="clip0_11435_17184">
+<rect width="40" height="40" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/CommonKit/ErrorPage/ErrorPage.spec.tsx b/src/components/CommonKit/ErrorPage/ErrorPage.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fdc9f8093f7249ebba4cca314b06af13e510ecd4
--- /dev/null
+++ b/src/components/CommonKit/ErrorPage/ErrorPage.spec.tsx
@@ -0,0 +1,65 @@
+/* eslint-disable react/display-name */
+import React from 'react'
+import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
+import configureStore from 'redux-mock-store'
+import { globalStateData } from '../../../../tests/__mocks__/globalStateData.mock'
+import { Provider } from 'react-redux'
+import ErrorPage from './ErrorPage'
+import { Button } from '@material-ui/core'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+const mockHistoryPush = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useHistory: () => ({
+ push: mockHistoryPush,
+ }),
+}))
+
+jest.mock('components/Header/Header', () => () => <div id="Header"></div>)
+jest.mock('components/Header/CozyBar', () => () => <div id="CozyBar"></div>)
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+jest.mock('components/Content/Content', () => (props: any) => (
+ <div id="content">{props.children}</div>
+))
+const mockStore = configureStore([])
+
+describe('ErrorPage component', () => {
+ it('should be rendered correctly', async () => {
+ const store = mockStore({
+ ecolyo: {
+ global: globalStateData,
+ },
+ })
+ const wrapper = mount(
+ <Provider store={store}>
+ <ErrorPage text={'test'} returnPage={'ecogestures'} />
+ </Provider>
+ )
+
+ expect(toJson(wrapper)).toMatchSnapshot()
+ })
+ it('should click on button and be redirected', () => {
+ const store = mockStore({
+ ecolyo: {
+ global: globalStateData,
+ },
+ })
+ const wrapper = mount(
+ <Provider store={store}>
+ <ErrorPage text={'test'} returnPage={'ecogestures'} />
+ </Provider>
+ )
+ wrapper.find(Button).simulate('click')
+ expect(mockHistoryPush).toHaveBeenCalledWith('/ecogestures')
+ })
+})
diff --git a/src/components/CommonKit/ErrorPage/ErrorPage.tsx b/src/components/CommonKit/ErrorPage/ErrorPage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1a673d0111f983735179c7d291bbbd767b4ae189
--- /dev/null
+++ b/src/components/CommonKit/ErrorPage/ErrorPage.tsx
@@ -0,0 +1,61 @@
+import React, { useCallback, useState } from 'react'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import Content from 'components/Content/Content'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import BearIcon from 'assets/icons/visu/duelResult/CHALLENGE0001-0.svg'
+import { Button } from '@material-ui/core'
+import { useHistory } from 'react-router-dom'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import './errorPage.scss'
+
+interface ErrorPageProps {
+ text: string
+ returnPage: string
+}
+
+const ErrorPage: React.FC<ErrorPageProps> = ({
+ text,
+ returnPage,
+}: ErrorPageProps) => {
+ const history = useHistory()
+ const { t } = useI18n()
+
+ const [headerHeight, setHeaderHeight] = useState<number>(0)
+ const defineHeaderHeight = (height: number) => {
+ setHeaderHeight(height)
+ }
+ const handleClick = useCallback(() => {
+ history.push(`/${returnPage}`)
+ }, [history, returnPage])
+ return (
+ <>
+ <CozyBar titleKey={'error_page.main'} />
+ <Header
+ setHeaderHeight={defineHeaderHeight}
+ desktopTitleKey={'error_page.main'}
+ ></Header>
+ <Content height={headerHeight}>
+ <div className="error-container">
+ <StyledIcon className="profile-icon" icon={BearIcon} size={250} />
+
+ <div className="text-18-bold head">{text}</div>
+ <Button
+ aria-label={t('error_page.back')}
+ onClick={handleClick}
+ variant={'contained'}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-18-bold',
+ }}
+ type="submit"
+ >
+ {t('error_page.back')}
+ </Button>
+ </div>
+ </Content>
+ </>
+ )
+}
+
+export default ErrorPage
diff --git a/src/components/CommonKit/ErrorPage/__snapshots__/ErrorPage.spec.tsx.snap b/src/components/CommonKit/ErrorPage/__snapshots__/ErrorPage.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..bf887521e977eb7e5d8226e3ad4713e0388ba034
--- /dev/null
+++ b/src/components/CommonKit/ErrorPage/__snapshots__/ErrorPage.spec.tsx.snap
@@ -0,0 +1,224 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ErrorPage component should be rendered correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <ErrorPage
+ returnPage="ecogestures"
+ text="test"
+ >
+ <Component
+ titleKey="error_page.main"
+ >
+ <div
+ id="CozyBar"
+ />
+ </Component>
+ <Component
+ desktopTitleKey="error_page.main"
+ setHeaderHeight={[Function]}
+ >
+ <div
+ id="Header"
+ />
+ </Component>
+ <Component
+ height={0}
+ >
+ <div
+ id="content"
+ >
+ <div
+ className="error-container"
+ >
+ <StyledIcon
+ className="profile-icon"
+ icon="test-file-stub"
+ size={250}
+ >
+ <Icon
+ aria-hidden={true}
+ className="profile-icon"
+ icon="test-file-stub"
+ size={250}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="profile-icon styles__icon___23x3R"
+ height={250}
+ style={Object {}}
+ width={250}
+ >
+ <svg
+ aria-hidden={true}
+ className="profile-icon styles__icon___23x3R"
+ height={250}
+ style={Object {}}
+ width={250}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <div
+ className="text-18-bold head"
+ >
+ test
+ </div>
+ <WithStyles(ForwardRef(Button))
+ aria-label="error_page.back"
+ classes={
+ Object {
+ "label": "text-18-bold",
+ "root": "btn-highlight",
+ }
+ }
+ onClick={[Function]}
+ type="submit"
+ variant="contained"
+ >
+ <ForwardRef(Button)
+ aria-label="error_page.back"
+ classes={
+ Object {
+ "colorInherit": "MuiButton-colorInherit",
+ "contained": "MuiButton-contained",
+ "containedPrimary": "MuiButton-containedPrimary",
+ "containedSecondary": "MuiButton-containedSecondary",
+ "containedSizeLarge": "MuiButton-containedSizeLarge",
+ "containedSizeSmall": "MuiButton-containedSizeSmall",
+ "disableElevation": "MuiButton-disableElevation",
+ "disabled": "Mui-disabled",
+ "endIcon": "MuiButton-endIcon",
+ "focusVisible": "Mui-focusVisible",
+ "fullWidth": "MuiButton-fullWidth",
+ "iconSizeLarge": "MuiButton-iconSizeLarge",
+ "iconSizeMedium": "MuiButton-iconSizeMedium",
+ "iconSizeSmall": "MuiButton-iconSizeSmall",
+ "label": "MuiButton-label text-18-bold",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root btn-highlight",
+ "sizeLarge": "MuiButton-sizeLarge",
+ "sizeSmall": "MuiButton-sizeSmall",
+ "startIcon": "MuiButton-startIcon",
+ "text": "MuiButton-text",
+ "textPrimary": "MuiButton-textPrimary",
+ "textSecondary": "MuiButton-textSecondary",
+ "textSizeLarge": "MuiButton-textSizeLarge",
+ "textSizeSmall": "MuiButton-textSizeSmall",
+ }
+ }
+ onClick={[Function]}
+ type="submit"
+ variant="contained"
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="error_page.back"
+ className="MuiButton-root btn-highlight MuiButton-contained"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="submit"
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="error_page.back"
+ className="MuiButton-root btn-highlight MuiButton-contained"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="submit"
+ >
+ <button
+ aria-label="error_page.back"
+ className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-contained"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={0}
+ type="submit"
+ >
+ <span
+ className="MuiButton-label text-18-bold"
+ >
+ error_page.back
+ </span>
+ <NoSsr>
+ <WithStyles(memo)
+ center={false}
+ >
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </NoSsr>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(Button)>
+ </WithStyles(ForwardRef(Button))>
+ </div>
+ </div>
+ </Component>
+ </ErrorPage>
+</Provider>
+`;
diff --git a/src/components/CommonKit/ErrorPage/errorPage.scss b/src/components/CommonKit/ErrorPage/errorPage.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3724f53ad83c13f77cf694c5c5e83a154b2effd8
--- /dev/null
+++ b/src/components/CommonKit/ErrorPage/errorPage.scss
@@ -0,0 +1,15 @@
+@import 'src/styles/base/color';
+
+.error-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ max-width: 450px;
+ margin: auto;
+ padding: 2rem;
+ text-align: center;
+ .head {
+ color: $gold-shadow;
+ }
+}
diff --git a/src/components/Ecogesture/EcogestureCard.spec.tsx b/src/components/Ecogesture/EcogestureCard.spec.tsx
index 923e9edfb873722b9c85d17bcabfa24009ba434d..3cedda23b443140952e3187ce7b4dbf13b2b847c 100644
--- a/src/components/Ecogesture/EcogestureCard.spec.tsx
+++ b/src/components/Ecogesture/EcogestureCard.spec.tsx
@@ -1,7 +1,14 @@
+/* eslint-disable react/display-name */
import React from 'react'
-import { shallow } from 'enzyme'
+import { mount } from 'enzyme'
import EcogestureCard from 'components/Ecogesture/EcogestureCard'
import { ecogesturesData } from '../../../tests/__mocks__/ecogesturesData.mock'
+import toJson from 'enzyme-to-json'
+import configureStore from 'redux-mock-store'
+import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
+import { Provider } from 'react-redux'
+import { BrowserRouter } from 'react-router-dom'
+import { act } from 'react-dom/test-utils'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -12,6 +19,9 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
+jest.mock('components/CommonKit/Icon/StyledIcon', () => () => (
+ <div id="StyledIcon"></div>
+))
const mockImportIconbyId = jest.fn()
jest.mock('utils/utils', () => {
return {
@@ -21,11 +31,47 @@ jest.mock('utils/utils', () => {
}
})
+const mockStore = configureStore([])
+
describe('EcogestureCard component', () => {
- it('should be rendered correctly', () => {
- const component = shallow(
- <EcogestureCard ecogesture={ecogesturesData[0]} />
- ).getElement
- expect(component).toMatchSnapshot()
+ it('should be rendered correctly', async () => {
+ const store = mockStore({
+ ecolyo: {
+ global: globalStateData,
+ },
+ })
+ mockImportIconbyId.mockReturnValue('')
+ const wrapper = mount(
+ <Provider store={store}>
+ <BrowserRouter>
+ <EcogestureCard ecogesture={ecogesturesData[0]} />
+ </BrowserRouter>
+ </Provider>
+ )
+ await act(async () => {
+ await new Promise(resolve => setTimeout(resolve))
+ wrapper.update()
+ })
+ expect(toJson(wrapper)).toMatchSnapshot()
+ })
+ it('should be with default icon', async () => {
+ const store = mockStore({
+ ecolyo: {
+ global: globalStateData,
+ },
+ })
+ mockImportIconbyId.mockReturnValue(null)
+ const wrapper = mount(
+ <Provider store={store}>
+ <BrowserRouter>
+ <EcogestureCard ecogesture={ecogesturesData[0]} />
+ </BrowserRouter>
+ </Provider>
+ )
+ await act(async () => {
+ await new Promise(resolve => setTimeout(resolve))
+ wrapper.update()
+ })
+ expect(wrapper.find('.Icon').exists()).toBeTruthy()
})
})
diff --git a/src/components/Ecogesture/EcogestureCard.tsx b/src/components/Ecogesture/EcogestureCard.tsx
index 8ea970b48f7e482441dcaaab9d74997103597ab8..082e2727d97993fba473cfe580ef7fb9f51a1b21 100644
--- a/src/components/Ecogesture/EcogestureCard.tsx
+++ b/src/components/Ecogesture/EcogestureCard.tsx
@@ -6,22 +6,17 @@ import { importIconbyId } from 'utils/utils'
import './ecogestureCard.scss'
import EfficientyRating from './EfficientyRating'
import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
+import { Link as RouterLink } from 'react-router-dom'
+import { Link } from '@material-ui/core/'
interface EcogestureCardProps {
ecogesture: Ecogesture
- handleClick?: (ecogesture: Ecogesture) => void
- challengeEcogesture?: number
}
const EcogestureCard: React.FC<EcogestureCardProps> = ({
ecogesture,
- handleClick,
}: EcogestureCardProps) => {
- const handleCardclick = () => {
- handleClick && ecogesture && handleClick(ecogesture)
- }
const [ecogestureIcon, setEcogestureIcon] = useState<string>('')
-
useEffect(() => {
async function handleEcogestureIcon() {
const icon = await importIconbyId(ecogesture.id, 'ecogesture')
@@ -37,8 +32,12 @@ const EcogestureCard: React.FC<EcogestureCardProps> = ({
}, [ecogesture])
return (
- <>
- <StyledEcogestureCard onClick={handleCardclick}>
+ <Link
+ to={`/ecogestures/${ecogesture.id}`}
+ component={RouterLink}
+ className="ecogesture-list-item"
+ >
+ <StyledEcogestureCard>
<div className="ec">
<div className={`ec-content `}>
<div className="ec-content-icon">
@@ -53,7 +52,7 @@ const EcogestureCard: React.FC<EcogestureCardProps> = ({
</div>
</div>
</StyledEcogestureCard>
- </>
+ </Link>
)
}
diff --git a/src/components/Ecogesture/EcogestureInfoModal.spec.tsx b/src/components/Ecogesture/EcogestureInfoModal.spec.tsx
index e6f7bc0acb97f3be4bebe5ac1704e3017a6b202e..aa58956ee7579e83a06c2193f67edfb489a7224c 100644
--- a/src/components/Ecogesture/EcogestureInfoModal.spec.tsx
+++ b/src/components/Ecogesture/EcogestureInfoModal.spec.tsx
@@ -2,6 +2,7 @@ import React from 'react'
import { mount } from 'enzyme'
import EcogestureInfoModal from './EcogestureInfoModal'
import Button from '@material-ui/core/Button'
+import toJson from 'enzyme-to-json'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -23,6 +24,7 @@ describe('EcogestureInfoModal component', () => {
handleCloseClick={mockHandleCloseClick}
/>
)
+ expect(toJson(wrapper)).toMatchSnapshot()
expect(wrapper.find('.info-header').exists()).toBeTruthy()
expect(wrapper.find('.info-title').exists()).toBeTruthy()
expect(wrapper.find('.info-detail').exists()).toBeTruthy()
diff --git a/src/components/Ecogesture/EcogestureList.spec.tsx b/src/components/Ecogesture/EcogestureList.spec.tsx
index 23a5010f45db065ead90777b479dbf2de68d2aa2..83b087bbd1f43eda3b9be8f0fc68d955924644c6 100644
--- a/src/components/Ecogesture/EcogestureList.spec.tsx
+++ b/src/components/Ecogesture/EcogestureList.spec.tsx
@@ -1,6 +1,11 @@
import React from 'react'
-import { shallow } from 'enzyme'
+import { mount } from 'enzyme'
import EcogestureList from 'components/Ecogesture/EcogestureList'
+import toJson from 'enzyme-to-json'
+import { Provider } from 'react-redux'
+import configureStore from 'redux-mock-store'
+import { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock'
+import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -11,11 +16,21 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
+const mockStore = configureStore([])
describe('EcogesturesList component', () => {
it('should be rendered correctly', () => {
- const component = shallow(<EcogestureList filteredByProfile={false} />)
- .getElement
- expect(component).toMatchSnapshot()
+ const store = mockStore({
+ ecolyo: {
+ global: globalStateData,
+ challenge: challengeStateData,
+ },
+ })
+ const wrapper = mount(
+ <Provider store={store}>
+ <EcogestureList filteredByProfile={false} />
+ </Provider>
+ )
+ expect(toJson(wrapper)).toMatchSnapshot()
})
})
diff --git a/src/components/Ecogesture/EcogestureList.tsx b/src/components/Ecogesture/EcogestureList.tsx
index d2d54b6ad47be6ca19b83328759dac1c0f0c7551..94e9a62855499a070d229742e21a5f75ea055333 100644
--- a/src/components/Ecogesture/EcogestureList.tsx
+++ b/src/components/Ecogesture/EcogestureList.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect } from 'react'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { useClient } from 'cozy-client'
@@ -11,7 +11,6 @@ import CheckIcon from 'assets/icons/ico/check.svg'
import QuestionIcon from 'assets/icons/ico/efficiency-question.svg'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import EcogestureCard from 'components/Ecogesture/EcogestureCard'
-import EcogestureModal from 'components/Ecogesture/EcogestureModal'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import Button from '@material-ui/core/Button'
import './ecogestureList.scss'
@@ -19,6 +18,7 @@ import { ProfileType } from 'models/profileType.model'
import { Usage } from 'enum/ecogesture.enum'
import EcogestureInfoModal from './EcogestureInfoModal'
import { getSeason } from 'utils/utils'
+import { FluidType } from 'enum/fluid.enum'
interface EcogestureListProps {
filteredByProfile: boolean
@@ -32,27 +32,14 @@ const EcogestureList: React.FC<EcogestureListProps> = ({
const { t } = useI18n()
const client = useClient()
- const [
- selectedEcogesture,
- setSelectedEcogesture,
- ] = useState<Ecogesture | null>(null)
const [ecogestures, setEcogestures] = useState<Ecogesture[] | null>(null)
const [isLoaded, setisLoaded] = useState(false)
- const [openEcogestureModal, setOpenEcogestureModal] = useState(false)
const [activeFilter, setactiveFilter] = useState<string>(Usage[Usage.ALL])
const [openDropDown, setopenDropDown] = useState<boolean>(false)
const [openInfoModal, setOpenInfoModal] = useState<boolean>(false)
- const handleClick = (ecogesture: Ecogesture) => {
- setSelectedEcogesture(ecogesture)
- setOpenEcogestureModal(true)
- }
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
- const handleCloseClick = useCallback(() => {
- setOpenEcogestureModal(false)
- }, [])
-
const toggleInfoModal = () => {
setOpenInfoModal(prev => !prev)
}
@@ -74,7 +61,7 @@ const EcogestureList: React.FC<EcogestureListProps> = ({
.filter(ecogesture => Usage[ecogesture.usage] === activeFilter)
.map((ecogesture, index) => (
<div key={index} className="ecogesture-list-item">
- <EcogestureCard ecogesture={ecogesture} handleClick={handleClick} />
+ <EcogestureCard ecogesture={ecogesture} />
</div>
))
if (filtered.length > 0) {
@@ -206,16 +193,11 @@ const EcogestureList: React.FC<EcogestureListProps> = ({
<div className="ecogesture-content">
{!ecogestures || !isLoaded ? (
<div className="ecogesture-content-loading">
- <StyledSpinner size="5em" />
+ <StyledSpinner size="5em" fluidType={FluidType.MULTIFLUID} />
</div>
) : ecogestures && activeFilter === Usage[Usage.ALL] ? (
ecogestures.map((ecogesture, index) => (
- <div key={index} className="ecogesture-list-item">
- <EcogestureCard
- ecogesture={ecogesture}
- handleClick={handleClick}
- />
- </div>
+ <EcogestureCard ecogesture={ecogesture} key={index} />
))
) : ecogestures && activeFilter !== Usage[Usage.ALL] ? (
filterEcogesture(ecogestures)
@@ -228,15 +210,6 @@ const EcogestureList: React.FC<EcogestureListProps> = ({
)}
</div>
</>
-
- {selectedEcogesture && (
- <EcogestureModal
- open={openEcogestureModal}
- ecogesture={selectedEcogesture}
- isAction={false}
- handleCloseClick={handleCloseClick}
- />
- )}
<EcogestureInfoModal
open={openInfoModal}
handleCloseClick={toggleInfoModal}
diff --git a/src/components/Ecogesture/EcogestureView.tsx b/src/components/Ecogesture/EcogestureView.tsx
index e40a59ccf6bf2c40bf61019aba43377bc41bfee1..160f7c9733bfac26169401901b1debea80838a66 100644
--- a/src/components/Ecogesture/EcogestureView.tsx
+++ b/src/components/Ecogesture/EcogestureView.tsx
@@ -40,7 +40,7 @@ const EcogestureView: React.FC = () => {
}
const { t } = useI18n()
const profile = useSelector((state: AppStore) => state.ecolyo.profile)
- const profileType = useSelector((state: Appstore) => state.ecolyo.profileType)
+ const profileType = useSelector((state: AppStore) => state.ecolyo.profileType)
const [value, setValue] = useState<number>(0)
const handleChange = () => {
diff --git a/src/components/Ecogesture/EfficientyRating.spec.tsx b/src/components/Ecogesture/EfficientyRating.spec.tsx
index e167effc6d036e47862ad27703d9492928490aee..6b28de3796cfd74894268ca53e83d975ae5531fa 100644
--- a/src/components/Ecogesture/EfficientyRating.spec.tsx
+++ b/src/components/Ecogesture/EfficientyRating.spec.tsx
@@ -1,6 +1,11 @@
import React from 'react'
-import { shallow } from 'enzyme'
+import { mount } from 'enzyme'
import EfficientyRating from 'components/Ecogesture/EfficientyRating'
+import toJson from 'enzyme-to-json'
+import { Provider } from 'react-redux'
+import configureStore from 'redux-mock-store'
+import { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock'
+import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -12,9 +17,21 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}
})
+const mockStore = configureStore([])
+
describe('EfficientyRating component', () => {
it('should be rendered correctly', () => {
- const component = shallow(<EfficientyRating result={3} />).getElement
- expect(component).toMatchSnapshot()
+ const store = mockStore({
+ ecolyo: {
+ global: globalStateData,
+ challenge: challengeStateData,
+ },
+ })
+ const wrapper = mount(
+ <Provider store={store}>
+ <EfficientyRating result={3} />
+ </Provider>
+ )
+ expect(toJson(wrapper)).toMatchSnapshot()
})
})
diff --git a/src/components/Ecogesture/SingleEcogesture.spec.tsx b/src/components/Ecogesture/SingleEcogesture.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f33822e810073aac9f631657df7488397888750a
--- /dev/null
+++ b/src/components/Ecogesture/SingleEcogesture.spec.tsx
@@ -0,0 +1,135 @@
+/* eslint-disable react/display-name */
+import React from 'react'
+import { mount } from 'enzyme'
+import { Provider } from 'react-redux'
+import SingleEcogesture from 'components/Ecogesture/SingleEcogesture'
+import toJson from 'enzyme-to-json'
+import { act } from 'react-dom/test-utils'
+import { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock'
+import { ecogesturesData } from '../../../tests/__mocks__/ecogesturesData.mock'
+import configureStore from 'redux-mock-store'
+import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+const mockImportIconbyId = jest.fn()
+jest.mock('utils/utils', () => {
+ return {
+ importIconbyId: () => mockImportIconbyId,
+ }
+})
+
+jest.mock('components/Ecogesture/EfficientyRating', () => () => (
+ <div id="EfficientyRating"></div>
+))
+jest.mock('components/Header/Header', () => () => <div id="Header"></div>)
+jest.mock('components/Header/CozyBar', () => () => <div id="CozyBar"></div>)
+jest.mock('components/CommonKit/Spinner/StyledSpinner', () => () => (
+ <div id="spinner"></div>
+))
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+jest.mock('components/Content/Content', () => (props: any) => (
+ <div id="content">{props.children}</div>
+))
+
+const mockgetEcogesturesByIds = jest.fn()
+const mockupdateEcogesture = jest.fn()
+jest.mock('services/ecogesture.service', () => {
+ return jest.fn(() => {
+ return {
+ getEcogesturesByIds: mockgetEcogesturesByIds,
+ updateEcogesture: mockupdateEcogesture,
+ }
+ })
+})
+
+const mockStore = configureStore([])
+
+describe('SingleEcogesture component', () => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+ it('should be rendered correctly', async () => {
+ const store = mockStore({
+ ecolyo: {
+ global: globalStateData,
+ challenge: challengeStateData,
+ },
+ })
+
+ mockgetEcogesturesByIds.mockResolvedValue([ecogesturesData[0]])
+
+ const wrapper = mount(
+ <Provider store={store}>
+ <SingleEcogesture match={{ params: { id: 'ECOGESTURE0001' } }} />
+ </Provider>
+ )
+ await act(async () => {
+ await new Promise(resolve => setTimeout(resolve))
+ wrapper.update()
+ })
+ expect(toJson(wrapper)).toMatchSnapshot()
+ })
+ it('should change doing status', async () => {
+ const store = mockStore({
+ ecolyo: {
+ global: globalStateData,
+ challenge: challengeStateData,
+ },
+ })
+
+ mockgetEcogesturesByIds.mockResolvedValue([ecogesturesData[0]])
+ mockImportIconbyId.mockReturnValue('')
+ const updatedEcogesture = { ...ecogesturesData[0], doing: true }
+ const wrapper = mount(
+ <Provider store={store}>
+ <SingleEcogesture match={{ params: { id: 'ECOGESTURE0001' } }} />
+ </Provider>
+ )
+ await act(async () => {
+ await new Promise(resolve => setTimeout(resolve))
+ wrapper.update()
+ })
+
+ wrapper
+ .find('.doing-btn')
+ .first()
+ .simulate('click')
+
+ expect(mockupdateEcogesture).toHaveBeenCalledWith(updatedEcogesture)
+ })
+ it('should change objective status', async () => {
+ const store = mockStore({
+ ecolyo: {
+ global: globalStateData,
+ challenge: challengeStateData,
+ },
+ })
+
+ mockgetEcogesturesByIds.mockResolvedValue([ecogesturesData[0]])
+ mockImportIconbyId.mockReturnValue('icontest')
+ const updatedEcogesture = { ...ecogesturesData[0], objective: true }
+
+ const wrapper = mount(
+ <Provider store={store}>
+ <SingleEcogesture match={{ params: { id: 'ECOGESTURE0001' } }} />
+ </Provider>
+ )
+ await act(async () => {
+ await new Promise(resolve => setTimeout(resolve))
+ wrapper.update()
+ })
+ wrapper
+ .find('.objective-btn')
+ .first()
+ .simulate('click')
+
+ expect(mockupdateEcogesture).toHaveBeenCalledWith(updatedEcogesture)
+ })
+})
diff --git a/src/components/Ecogesture/SingleEcogesture.tsx b/src/components/Ecogesture/SingleEcogesture.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4b1236c285ff69ff1f19014a2632b278e8f5d22e
--- /dev/null
+++ b/src/components/Ecogesture/SingleEcogesture.tsx
@@ -0,0 +1,226 @@
+import React, { useState, useEffect, useCallback, useMemo } from 'react'
+import './singleEcogesture.scss'
+import classNames from 'classnames'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { AppStore } from 'store'
+import { useSelector } from 'react-redux'
+import useExploration from 'components/Hooks/useExploration'
+import { importIconbyId } from 'utils/utils'
+import EcogestureService from 'services/ecogesture.service'
+import IconButton from '@material-ui/core/IconButton'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import { Ecogesture } from 'models'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import EfficientyRating from './EfficientyRating'
+import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
+import doingEnabledIcon from 'assets/icons/ico/doing-enabled.svg'
+import doingDisabledIcon from 'assets/icons/ico/doing-disabled.svg'
+import objectiveEnabledIcon from 'assets/icons/ico/objective-enabled.svg'
+import objectiveDisabledIcon from 'assets/icons/ico/objective-disabled.svg'
+import Content from 'components/Content/Content'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import { useClient } from 'cozy-client'
+import ErrorPage from 'components/CommonKit/ErrorPage/ErrorPage'
+import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
+import { FluidType } from 'enum/fluid.enum'
+
+interface SingleEcogestureProps {
+ match: { params: { id: string } }
+}
+
+const SingleEcogesture: React.FC<SingleEcogestureProps> = ({
+ match,
+}: SingleEcogestureProps) => {
+ const { t } = useI18n()
+ const client = useClient()
+ const [ecogesture, setEcogesture] = useState<Ecogesture>()
+ const [ecogestureIcon, setEcogestureIcon] = useState<string>('')
+ const [isMoreDetail, setIsMoreDetail] = useState<boolean>(false)
+ const [isDoing, setIsDoing] = useState<boolean>(false)
+ const [isObjective, setIsObjective] = useState<boolean>(false)
+ const [isLoading, setIsLoading] = useState<boolean>(true)
+ const ecogestureID: string = match.params.id
+
+ const ecogestureService = useMemo(() => new EcogestureService(client), [
+ client,
+ ])
+ const { currentChallenge } = useSelector(
+ (state: AppStore) => state.ecolyo.challenge
+ )
+ const [headerHeight, setHeaderHeight] = useState<number>(0)
+ const defineHeaderHeight = (height: number) => {
+ setHeaderHeight(height)
+ }
+ const [, setValidExploration] = useExploration()
+ const toggleMoreDetail = () => {
+ setIsMoreDetail(prev => !prev)
+ }
+ const toggleObjective = useCallback(async () => {
+ if (ecogesture) {
+ const toUpdate: Ecogesture = { ...ecogesture, objective: !isObjective }
+ const updatedEcogesture = await ecogestureService.updateEcogesture(
+ toUpdate
+ )
+ if (updatedEcogesture) {
+ setIsObjective(prev => !prev)
+ setEcogesture(updatedEcogesture)
+ }
+ }
+ }, [ecogesture, ecogestureService, isObjective])
+
+ const toggleDoing = useCallback(async () => {
+ if (ecogesture) {
+ const toUpdate: Ecogesture = { ...ecogesture, doing: !isDoing }
+ const updatedEcogesture = await ecogestureService.updateEcogesture(
+ toUpdate
+ )
+ if (updatedEcogesture) {
+ setIsDoing(prev => !prev)
+ setEcogesture(updatedEcogesture)
+ }
+ }
+ }, [ecogesture, ecogestureService, isDoing])
+
+ useEffect(() => {
+ let subscribed = true
+ async function getSingleEcogesture() {
+ const data = await ecogestureService.getEcogesturesByIds([ecogestureID])
+ if (subscribed) {
+ if (data && data[0]) {
+ setEcogesture(data[0])
+ //Prevent case this key doesn't exist in doctype
+ setIsObjective(data[0].objective ? true : false)
+ setIsDoing(data[0].doing ? true : false)
+ const icon = await importIconbyId(data[0].id, 'ecogesture')
+ if (subscribed) {
+ if (icon) {
+ setEcogestureIcon(icon)
+ } else {
+ setEcogestureIcon(defaultIcon)
+ }
+ if (
+ currentChallenge &&
+ currentChallenge.exploration.ecogesture_id === data[0]._id
+ ) {
+ setValidExploration(currentChallenge.exploration.id)
+ }
+ }
+ }
+ setIsLoading(false)
+ }
+ }
+ getSingleEcogesture()
+
+ return () => {
+ subscribed = false
+ }
+ }, [
+ client,
+ currentChallenge,
+ ecogestureID,
+ ecogestureService,
+ setValidExploration,
+ ])
+
+ return isLoading ? (
+ <div className="loader-container">
+ <StyledSpinner size="5em" fluidType={FluidType.MULTIFLUID} />
+ </div>
+ ) : ecogesture ? (
+ <>
+ <CozyBar
+ titleKey={ecogesture && ecogesture.shortName}
+ isNotKey={true}
+ displayBackArrow={true}
+ />
+ <Header
+ setHeaderHeight={defineHeaderHeight}
+ desktopTitleKey={ecogesture && ecogesture.shortName}
+ displayBackArrow={true}
+ isNotKey={true}
+ ></Header>
+ <Content height={headerHeight}>
+ <div className="single-ecogesture">
+ <div className="icon-container">
+ {ecogestureIcon && (
+ <StyledIcon
+ className="icon-big"
+ icon={ecogestureIcon}
+ size={220}
+ />
+ )}
+ </div>
+ <div className="details">
+ <div className="efficiency">
+ <span className="text text-14-normal">
+ {t('ecogesture_modal.efficiency')}
+ </span>
+ <EfficientyRating result={Math.round(ecogesture.efficiency)} />
+ </div>
+ </div>
+ <div className="styled-container">
+ <div className="long-name">{ecogesture.longName}</div>
+ <div
+ className={classNames('description text-16-normal-150', {
+ ['block']: isMoreDetail === true,
+ })}
+ >
+ {ecogesture.longDescription}
+ </div>
+ <div
+ className="toggle-text text-15-normal"
+ onClick={toggleMoreDetail}
+ >
+ {isMoreDetail
+ ? t('ecogesture_modal.show_less')
+ : t('ecogesture_modal.show_more')}
+ </div>
+ </div>
+ <div className="buttons-selection">
+ <IconButton
+ aria-label={t('ecogesture.objective')}
+ onClick={toggleObjective}
+ classes={{
+ root: `btn-secondary-negative objective-btn ${isObjective &&
+ 'active'}`,
+ label: 'text-15-normal',
+ }}
+ >
+ <Icon
+ className="status-icon"
+ icon={
+ isObjective ? objectiveEnabledIcon : objectiveDisabledIcon
+ }
+ size={40}
+ />
+ <span>{t('ecogesture.objective')}</span>
+ </IconButton>
+ <IconButton
+ aria-label={t('ecogesture.doing')}
+ onClick={toggleDoing}
+ classes={{
+ root: `btn-secondary-negative doing-btn ${isDoing && 'active'}`,
+ label: 'text-15-normal',
+ }}
+ >
+ <Icon
+ className="status-icon"
+ icon={isDoing ? doingEnabledIcon : doingDisabledIcon}
+ size={40}
+ />
+ <span>{t('ecogesture.doing')}</span>
+ </IconButton>
+ </div>
+ </div>
+ </Content>
+ </>
+ ) : (
+ <ErrorPage
+ text={t('error_page.no_ecogesture')}
+ returnPage={'ecogestures'}
+ />
+ )
+}
+
+export default SingleEcogesture
diff --git a/src/components/Ecogesture/__snapshots__/EcogestureCard.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureCard.spec.tsx.snap
index f8e50719fc6b0aae73189e91184e0b20f98f1a2a..ea003d24e16c7e060da13f102d4f015f636618ad 100644
--- a/src/components/Ecogesture/__snapshots__/EcogestureCard.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/EcogestureCard.spec.tsx.snap
@@ -1,3 +1,428 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`EcogestureCard component should be rendered correctly 1`] = `[Function]`;
+exports[`EcogestureCard component should be rendered correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <BrowserRouter>
+ <Router
+ history={
+ Object {
+ "action": "POP",
+ "block": [Function],
+ "createHref": [Function],
+ "go": [Function],
+ "goBack": [Function],
+ "goForward": [Function],
+ "length": 1,
+ "listen": [Function],
+ "location": Object {
+ "hash": "",
+ "pathname": "/",
+ "search": "",
+ "state": undefined,
+ },
+ "push": [Function],
+ "replace": [Function],
+ }
+ }
+ >
+ <EcogestureCard
+ ecogesture={
+ Object {
+ "_id": "ECOGESTURE001",
+ "_rev": "1-67f1ea36efdd892c96bf64a8943154cd",
+ "_type": "com.grandlyon.ecolyo.ecogesture",
+ "action": false,
+ "actionDuration": 3,
+ "actionName": null,
+ "difficulty": 1,
+ "doing": false,
+ "efficiency": 4,
+ "equipment": false,
+ "equipmentInstallation": true,
+ "equipmentType": Array [],
+ "fluidTypes": Array [
+ 0,
+ 2,
+ ],
+ "id": "ECOGESTURE001",
+ "impactLevel": 8,
+ "investment": null,
+ "longDescription": "On se demande parfois si cela vaut le coup de \\"couper le chauffage\\" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…",
+ "longName": "Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.",
+ "objective": false,
+ "room": Array [
+ 0,
+ ],
+ "season": "Hiver",
+ "shortName": "Bonhomme de neige",
+ "usage": 1,
+ }
+ }
+ >
+ <WithStyles(ForwardRef(Link))
+ className="ecogesture-list-item"
+ component={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "displayName": "Link",
+ "propTypes": Object {
+ "innerRef": [Function],
+ "onClick": [Function],
+ "replace": [Function],
+ "target": [Function],
+ "to": [Function],
+ },
+ "render": [Function],
+ }
+ }
+ to="/ecogestures/ECOGESTURE001"
+ >
+ <ForwardRef(Link)
+ className="ecogesture-list-item"
+ classes={
+ Object {
+ "button": "MuiLink-button",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiLink-root",
+ "underlineAlways": "MuiLink-underlineAlways",
+ "underlineHover": "MuiLink-underlineHover",
+ "underlineNone": "MuiLink-underlineNone",
+ }
+ }
+ component={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "displayName": "Link",
+ "propTypes": Object {
+ "innerRef": [Function],
+ "onClick": [Function],
+ "replace": [Function],
+ "target": [Function],
+ "to": [Function],
+ },
+ "render": [Function],
+ }
+ }
+ to="/ecogestures/ECOGESTURE001"
+ >
+ <WithStyles(ForwardRef(Typography))
+ className="MuiLink-root MuiLink-underlineHover ecogesture-list-item"
+ color="primary"
+ component={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "displayName": "Link",
+ "propTypes": Object {
+ "innerRef": [Function],
+ "onClick": [Function],
+ "replace": [Function],
+ "target": [Function],
+ "to": [Function],
+ },
+ "render": [Function],
+ }
+ }
+ onBlur={[Function]}
+ onFocus={[Function]}
+ to="/ecogestures/ECOGESTURE001"
+ variant="inherit"
+ >
+ <ForwardRef(Typography)
+ className="MuiLink-root MuiLink-underlineHover ecogesture-list-item"
+ classes={
+ Object {
+ "alignCenter": "MuiTypography-alignCenter",
+ "alignJustify": "MuiTypography-alignJustify",
+ "alignLeft": "MuiTypography-alignLeft",
+ "alignRight": "MuiTypography-alignRight",
+ "body1": "MuiTypography-body1",
+ "body2": "MuiTypography-body2",
+ "button": "MuiTypography-button",
+ "caption": "MuiTypography-caption",
+ "colorError": "MuiTypography-colorError",
+ "colorInherit": "MuiTypography-colorInherit",
+ "colorPrimary": "MuiTypography-colorPrimary",
+ "colorSecondary": "MuiTypography-colorSecondary",
+ "colorTextPrimary": "MuiTypography-colorTextPrimary",
+ "colorTextSecondary": "MuiTypography-colorTextSecondary",
+ "displayBlock": "MuiTypography-displayBlock",
+ "displayInline": "MuiTypography-displayInline",
+ "gutterBottom": "MuiTypography-gutterBottom",
+ "h1": "MuiTypography-h1",
+ "h2": "MuiTypography-h2",
+ "h3": "MuiTypography-h3",
+ "h4": "MuiTypography-h4",
+ "h5": "MuiTypography-h5",
+ "h6": "MuiTypography-h6",
+ "noWrap": "MuiTypography-noWrap",
+ "overline": "MuiTypography-overline",
+ "paragraph": "MuiTypography-paragraph",
+ "root": "MuiTypography-root",
+ "srOnly": "MuiTypography-srOnly",
+ "subtitle1": "MuiTypography-subtitle1",
+ "subtitle2": "MuiTypography-subtitle2",
+ }
+ }
+ color="primary"
+ component={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "displayName": "Link",
+ "propTypes": Object {
+ "innerRef": [Function],
+ "onClick": [Function],
+ "replace": [Function],
+ "target": [Function],
+ "to": [Function],
+ },
+ "render": [Function],
+ }
+ }
+ onBlur={[Function]}
+ onFocus={[Function]}
+ to="/ecogestures/ECOGESTURE001"
+ variant="inherit"
+ >
+ <Link
+ className="MuiTypography-root MuiLink-root MuiLink-underlineHover ecogesture-list-item MuiTypography-colorPrimary"
+ onBlur={[Function]}
+ onFocus={[Function]}
+ to="/ecogestures/ECOGESTURE001"
+ >
+ <LinkAnchor
+ className="MuiTypography-root MuiLink-root MuiLink-underlineHover ecogesture-list-item MuiTypography-colorPrimary"
+ href="/ecogestures/ECOGESTURE001"
+ navigate={[Function]}
+ onBlur={[Function]}
+ onFocus={[Function]}
+ >
+ <a
+ className="MuiTypography-root MuiLink-root MuiLink-underlineHover ecogesture-list-item MuiTypography-colorPrimary"
+ href="/ecogestures/ECOGESTURE001"
+ onBlur={[Function]}
+ onClick={[Function]}
+ onFocus={[Function]}
+ >
+ <StyledEcogestureCard>
+ <WithStyles(WithStyles(ForwardRef(CardActionArea)))>
+ <WithStyles(ForwardRef(CardActionArea))
+ classes={
+ Object {
+ "root": "WithStyles(ForwardRef(CardActionArea))-root-1",
+ }
+ }
+ >
+ <ForwardRef(CardActionArea)
+ classes={
+ Object {
+ "focusHighlight": "MuiCardActionArea-focusHighlight",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1",
+ }
+ }
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1"
+ focusVisibleClassName="Mui-focusVisible"
+ >
+ <ForwardRef(ButtonBase)
+ className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ focusVisibleClassName="Mui-focusVisible"
+ >
+ <button
+ className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1"
+ disabled={false}
+ onBlur={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={0}
+ type="button"
+ >
+ <WithStyles(WithStyles(ForwardRef(CardContent)))>
+ <WithStyles(ForwardRef(CardContent))
+ classes={
+ Object {
+ "root": "WithStyles(ForwardRef(CardContent))-root-2",
+ }
+ }
+ >
+ <ForwardRef(CardContent)
+ classes={
+ Object {
+ "root": "MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2",
+ }
+ }
+ >
+ <div
+ className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
+ >
+ <div
+ className="ec"
+ >
+ <div
+ className="ec-content "
+ >
+ <div
+ className="ec-content-icon"
+ >
+ <Component
+ className="Icon"
+ icon=""
+ size={50}
+ >
+ <div
+ id="StyledIcon"
+ />
+ </Component>
+ </div>
+ <div
+ className="ec-content-short-name text-15-bold"
+ >
+ Bonhomme de neige
+ </div>
+ <div
+ className="ec-content-efficiency"
+ >
+ <EfficientyRating
+ result={4}
+ >
+ <div
+ className="thunder"
+ >
+ <Component
+ className="star"
+ icon="test-file-stub"
+ key="0"
+ size={15}
+ >
+ <div
+ id="StyledIcon"
+ />
+ </Component>
+ <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>
+ </div>
+ </EfficientyRating>
+ </div>
+ </div>
+ </div>
+ </div>
+ </ForwardRef(CardContent)>
+ </WithStyles(ForwardRef(CardContent))>
+ </WithStyles(WithStyles(ForwardRef(CardContent)))>
+ <span
+ className="MuiCardActionArea-focusHighlight"
+ />
+ <NoSsr>
+ <WithStyles(memo)
+ center={false}
+ >
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </NoSsr>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(CardActionArea)>
+ </WithStyles(ForwardRef(CardActionArea))>
+ </WithStyles(WithStyles(ForwardRef(CardActionArea)))>
+ </StyledEcogestureCard>
+ </a>
+ </LinkAnchor>
+ </Link>
+ </ForwardRef(Typography)>
+ </WithStyles(ForwardRef(Typography))>
+ </ForwardRef(Link)>
+ </WithStyles(ForwardRef(Link))>
+ </EcogestureCard>
+ </Router>
+ </BrowserRouter>
+</Provider>
+`;
diff --git a/src/components/Ecogesture/__snapshots__/EcogestureInfoModal.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureInfoModal.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..5ce43e8fc2c4987aca0cbee221ce0a712f7b06e6
--- /dev/null
+++ b/src/components/Ecogesture/__snapshots__/EcogestureInfoModal.spec.tsx.snap
@@ -0,0 +1,853 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EcogestureInfoModal component should be rendered correctly 1`] = `
+<EcogestureInfoModal
+ handleCloseClick={[MockFunction]}
+ open={true}
+>
+ <WithStyles(ForwardRef(Dialog))
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "paper": "modal-paper",
+ "root": "modal-root",
+ }
+ }
+ onClose={[MockFunction]}
+ open={true}
+ >
+ <ForwardRef(Dialog)
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "container": "MuiDialog-container",
+ "paper": "MuiDialog-paper modal-paper",
+ "paperFullScreen": "MuiDialog-paperFullScreen",
+ "paperFullWidth": "MuiDialog-paperFullWidth",
+ "paperScrollBody": "MuiDialog-paperScrollBody",
+ "paperScrollPaper": "MuiDialog-paperScrollPaper",
+ "paperWidthFalse": "MuiDialog-paperWidthFalse",
+ "paperWidthLg": "MuiDialog-paperWidthLg",
+ "paperWidthMd": "MuiDialog-paperWidthMd",
+ "paperWidthSm": "MuiDialog-paperWidthSm",
+ "paperWidthXl": "MuiDialog-paperWidthXl",
+ "paperWidthXs": "MuiDialog-paperWidthXs",
+ "root": "MuiDialog-root modal-root",
+ "scrollBody": "MuiDialog-scrollBody",
+ "scrollPaper": "MuiDialog-scrollPaper",
+ }
+ }
+ onClose={[MockFunction]}
+ open={true}
+ >
+ <ForwardRef(Modal)
+ BackdropComponent={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "Naked": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "propTypes": Object {
+ "children": [Function],
+ "className": [Function],
+ "classes": [Function],
+ "invisible": [Function],
+ "open": [Function],
+ "transitionDuration": [Function],
+ },
+ "render": [Function],
+ },
+ "displayName": "WithStyles(ForwardRef(Backdrop))",
+ "options": Object {
+ "defaultTheme": Object {
+ "breakpoints": Object {
+ "between": [Function],
+ "down": [Function],
+ "keys": Array [
+ "xs",
+ "sm",
+ "md",
+ "lg",
+ "xl",
+ ],
+ "only": [Function],
+ "up": [Function],
+ "values": Object {
+ "lg": 1280,
+ "md": 960,
+ "sm": 600,
+ "xl": 1920,
+ "xs": 0,
+ },
+ "width": [Function],
+ },
+ "direction": "ltr",
+ "mixins": Object {
+ "gutters": [Function],
+ "toolbar": Object {
+ "@media (min-width:0px) and (orientation: landscape)": Object {
+ "minHeight": 48,
+ },
+ "@media (min-width:600px)": Object {
+ "minHeight": 64,
+ },
+ "minHeight": 56,
+ },
+ },
+ "overrides": Object {},
+ "palette": Object {
+ "action": Object {
+ "active": "rgba(0, 0, 0, 0.54)",
+ "disabled": "rgba(0, 0, 0, 0.26)",
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
+ "hover": "rgba(0, 0, 0, 0.08)",
+ "hoverOpacity": 0.08,
+ "selected": "rgba(0, 0, 0, 0.14)",
+ },
+ "augmentColor": [Function],
+ "background": Object {
+ "default": "#fafafa",
+ "paper": "#fff",
+ },
+ "common": Object {
+ "black": "#000",
+ "white": "#fff",
+ },
+ "contrastThreshold": 3,
+ "divider": "rgba(0, 0, 0, 0.12)",
+ "error": Object {
+ "contrastText": "#fff",
+ "dark": "#d32f2f",
+ "light": "#e57373",
+ "main": "#f44336",
+ },
+ "getContrastText": [Function],
+ "grey": Object {
+ "100": "#f5f5f5",
+ "200": "#eeeeee",
+ "300": "#e0e0e0",
+ "400": "#bdbdbd",
+ "50": "#fafafa",
+ "500": "#9e9e9e",
+ "600": "#757575",
+ "700": "#616161",
+ "800": "#424242",
+ "900": "#212121",
+ "A100": "#d5d5d5",
+ "A200": "#aaaaaa",
+ "A400": "#303030",
+ "A700": "#616161",
+ },
+ "info": Object {
+ "contrastText": "#fff",
+ "dark": "#1976d2",
+ "light": "#64b5f6",
+ "main": "#2196f3",
+ },
+ "primary": Object {
+ "contrastText": "#fff",
+ "dark": "#303f9f",
+ "light": "#7986cb",
+ "main": "#3f51b5",
+ },
+ "secondary": Object {
+ "contrastText": "#fff",
+ "dark": "#c51162",
+ "light": "#ff4081",
+ "main": "#f50057",
+ },
+ "success": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#388e3c",
+ "light": "#81c784",
+ "main": "#4caf50",
+ },
+ "text": Object {
+ "disabled": "rgba(0, 0, 0, 0.38)",
+ "hint": "rgba(0, 0, 0, 0.38)",
+ "primary": "rgba(0, 0, 0, 0.87)",
+ "secondary": "rgba(0, 0, 0, 0.54)",
+ },
+ "tonalOffset": 0.2,
+ "type": "light",
+ "warning": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#f57c00",
+ "light": "#ffb74d",
+ "main": "#ff9800",
+ },
+ },
+ "props": Object {},
+ "shadows": Array [
+ "none",
+ "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
+ "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
+ "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
+ "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+ "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
+ "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
+ "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
+ "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
+ "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
+ "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
+ "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
+ "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
+ "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
+ "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
+ "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
+ "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
+ "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
+ "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
+ ],
+ "shape": Object {
+ "borderRadius": 4,
+ },
+ "spacing": [Function],
+ "transitions": Object {
+ "create": [Function],
+ "duration": Object {
+ "complex": 375,
+ "enteringScreen": 225,
+ "leavingScreen": 195,
+ "short": 250,
+ "shorter": 200,
+ "shortest": 150,
+ "standard": 300,
+ },
+ "easing": Object {
+ "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+ "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+ "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
+ "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
+ },
+ "getAutoHeightDuration": [Function],
+ },
+ "typography": Object {
+ "body1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.5,
+ },
+ "body2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.01071em",
+ "lineHeight": 1.43,
+ },
+ "button": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.02857em",
+ "lineHeight": 1.75,
+ "textTransform": "uppercase",
+ },
+ "caption": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.03333em",
+ "lineHeight": 1.66,
+ },
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": 14,
+ "fontWeightBold": 700,
+ "fontWeightLight": 300,
+ "fontWeightMedium": 500,
+ "fontWeightRegular": 400,
+ "h1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "6rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.01562em",
+ "lineHeight": 1.167,
+ },
+ "h2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3.75rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.00833em",
+ "lineHeight": 1.2,
+ },
+ "h3": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.167,
+ },
+ "h4": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "2.125rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00735em",
+ "lineHeight": 1.235,
+ },
+ "h5": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.5rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.334,
+ },
+ "h6": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.25rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.0075em",
+ "lineHeight": 1.6,
+ },
+ "htmlFontSize": 16,
+ "overline": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.08333em",
+ "lineHeight": 2.66,
+ "textTransform": "uppercase",
+ },
+ "pxToRem": [Function],
+ "round": [Function],
+ "subtitle1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.75,
+ },
+ "subtitle2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.00714em",
+ "lineHeight": 1.57,
+ },
+ },
+ "zIndex": Object {
+ "appBar": 1100,
+ "drawer": 1200,
+ "mobileStepper": 1000,
+ "modal": 1300,
+ "snackbar": 1400,
+ "speedDial": 1050,
+ "tooltip": 1500,
+ },
+ },
+ "name": "MuiBackdrop",
+ },
+ "propTypes": Object {
+ "classes": [Function],
+ "innerRef": [Function],
+ },
+ "render": [Function],
+ "useStyles": [Function],
+ }
+ }
+ BackdropProps={
+ Object {
+ "transitionDuration": Object {
+ "enter": 225,
+ "exit": 195,
+ },
+ }
+ }
+ className="MuiDialog-root modal-root"
+ closeAfterTransition={true}
+ disableBackdropClick={false}
+ disableEscapeKeyDown={false}
+ onClose={[MockFunction]}
+ open={true}
+ >
+ <ForwardRef(Portal)
+ disablePortal={false}
+ >
+ <Portal
+ containerInfo={
+ <body
+ style="padding-right: 0px; overflow: hidden;"
+ >
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
+ >
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
+ >
+ <div
+ aria-labelledby="accessibility-title"
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
+ >
+ <div
+ id="accessibility-title"
+ >
+ ecogesture_info_modal.accessibility.window_title
+ </div>
+ <div
+ class="info-header"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="80"
+ width="80"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ <div
+ class="info-content"
+ >
+ <div
+ class="info-title text-20-bold"
+ >
+ ecogesture_info_modal.header
+ </div>
+ <div
+ class="info-detail text-16-normal"
+ >
+ ecogesture_info_modal.text
+ </div>
+ <button
+ aria-label="ecogesture_info_modal.accessibility.button_close"
+ class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label text-14-normal"
+ >
+ ecogesture_info_modal.button_close
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+ </body>
+ }
+ >
+ <div
+ className="MuiDialog-root modal-root"
+ onKeyDown={[Function]}
+ role="presentation"
+ style={
+ Object {
+ "bottom": 0,
+ "left": 0,
+ "position": "fixed",
+ "right": 0,
+ "top": 0,
+ "zIndex": 1300,
+ }
+ }
+ >
+ <WithStyles(ForwardRef(Backdrop))
+ onClick={[Function]}
+ open={true}
+ transitionDuration={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <ForwardRef(Backdrop)
+ classes={
+ Object {
+ "invisible": "MuiBackdrop-invisible",
+ "root": "MuiBackdrop-root",
+ }
+ }
+ onClick={[Function]}
+ open={true}
+ transitionDuration={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <ForwardRef(Fade)
+ in={true}
+ onClick={[Function]}
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <Transition
+ appear={true}
+ enter={true}
+ exit={true}
+ in={true}
+ mountOnEnter={false}
+ onClick={[Function]}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ unmountOnExit={false}
+ >
+ <div
+ aria-hidden={true}
+ className="MuiBackdrop-root"
+ onClick={[Function]}
+ style={
+ Object {
+ "opacity": 1,
+ "visibility": undefined,
+ }
+ }
+ />
+ </Transition>
+ </ForwardRef(Fade)>
+ </ForwardRef(Backdrop)>
+ </WithStyles(ForwardRef(Backdrop))>
+ <TrapFocus
+ disableAutoFocus={false}
+ disableEnforceFocus={false}
+ disableRestoreFocus={false}
+ getDoc={[Function]}
+ isEnabled={[Function]}
+ open={true}
+ >
+ <div
+ data-test="sentinelStart"
+ tabIndex={0}
+ />
+ <ForwardRef(Fade)
+ appear={true}
+ in={true}
+ onEnter={[Function]}
+ onExited={[Function]}
+ role="none presentation"
+ tabIndex="-1"
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <Transition
+ appear={true}
+ enter={true}
+ exit={true}
+ in={true}
+ mountOnEnter={false}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ role="none presentation"
+ tabIndex="-1"
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ unmountOnExit={false}
+ >
+ <div
+ className="MuiDialog-container MuiDialog-scrollPaper"
+ onClick={[Function]}
+ onMouseDown={[Function]}
+ role="none presentation"
+ style={
+ Object {
+ "opacity": 1,
+ "visibility": undefined,
+ }
+ }
+ tabIndex="-1"
+ >
+ <WithStyles(ForwardRef(Paper))
+ aria-labelledby="accessibility-title"
+ className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+ elevation={24}
+ role="dialog"
+ >
+ <ForwardRef(Paper)
+ aria-labelledby="accessibility-title"
+ className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+ classes={
+ Object {
+ "elevation0": "MuiPaper-elevation0",
+ "elevation1": "MuiPaper-elevation1",
+ "elevation10": "MuiPaper-elevation10",
+ "elevation11": "MuiPaper-elevation11",
+ "elevation12": "MuiPaper-elevation12",
+ "elevation13": "MuiPaper-elevation13",
+ "elevation14": "MuiPaper-elevation14",
+ "elevation15": "MuiPaper-elevation15",
+ "elevation16": "MuiPaper-elevation16",
+ "elevation17": "MuiPaper-elevation17",
+ "elevation18": "MuiPaper-elevation18",
+ "elevation19": "MuiPaper-elevation19",
+ "elevation2": "MuiPaper-elevation2",
+ "elevation20": "MuiPaper-elevation20",
+ "elevation21": "MuiPaper-elevation21",
+ "elevation22": "MuiPaper-elevation22",
+ "elevation23": "MuiPaper-elevation23",
+ "elevation24": "MuiPaper-elevation24",
+ "elevation3": "MuiPaper-elevation3",
+ "elevation4": "MuiPaper-elevation4",
+ "elevation5": "MuiPaper-elevation5",
+ "elevation6": "MuiPaper-elevation6",
+ "elevation7": "MuiPaper-elevation7",
+ "elevation8": "MuiPaper-elevation8",
+ "elevation9": "MuiPaper-elevation9",
+ "outlined": "MuiPaper-outlined",
+ "root": "MuiPaper-root",
+ "rounded": "MuiPaper-rounded",
+ }
+ }
+ elevation={24}
+ role="dialog"
+ >
+ <div
+ aria-labelledby="accessibility-title"
+ className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
+ >
+ <div
+ id="accessibility-title"
+ >
+ ecogesture_info_modal.accessibility.window_title
+ </div>
+ <div
+ className="info-header"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={80}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={80}
+ style={Object {}}
+ width={80}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={80}
+ style={Object {}}
+ width={80}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </div>
+ <div
+ className="info-content"
+ >
+ <div
+ className="info-title text-20-bold"
+ >
+ ecogesture_info_modal.header
+ </div>
+ <div
+ className="info-detail text-16-normal"
+ >
+ ecogesture_info_modal.text
+ </div>
+ <WithStyles(ForwardRef(Button))
+ aria-label="ecogesture_info_modal.accessibility.button_close"
+ classes={
+ Object {
+ "label": "text-14-normal",
+ "root": "btn-secondary-negative",
+ }
+ }
+ onClick={[MockFunction]}
+ >
+ <ForwardRef(Button)
+ aria-label="ecogesture_info_modal.accessibility.button_close"
+ classes={
+ Object {
+ "colorInherit": "MuiButton-colorInherit",
+ "contained": "MuiButton-contained",
+ "containedPrimary": "MuiButton-containedPrimary",
+ "containedSecondary": "MuiButton-containedSecondary",
+ "containedSizeLarge": "MuiButton-containedSizeLarge",
+ "containedSizeSmall": "MuiButton-containedSizeSmall",
+ "disableElevation": "MuiButton-disableElevation",
+ "disabled": "Mui-disabled",
+ "endIcon": "MuiButton-endIcon",
+ "focusVisible": "Mui-focusVisible",
+ "fullWidth": "MuiButton-fullWidth",
+ "iconSizeLarge": "MuiButton-iconSizeLarge",
+ "iconSizeMedium": "MuiButton-iconSizeMedium",
+ "iconSizeSmall": "MuiButton-iconSizeSmall",
+ "label": "MuiButton-label text-14-normal",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root btn-secondary-negative",
+ "sizeLarge": "MuiButton-sizeLarge",
+ "sizeSmall": "MuiButton-sizeSmall",
+ "startIcon": "MuiButton-startIcon",
+ "text": "MuiButton-text",
+ "textPrimary": "MuiButton-textPrimary",
+ "textSecondary": "MuiButton-textSecondary",
+ "textSizeLarge": "MuiButton-textSizeLarge",
+ "textSizeSmall": "MuiButton-textSizeSmall",
+ }
+ }
+ onClick={[MockFunction]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="ecogesture_info_modal.accessibility.button_close"
+ className="MuiButton-root btn-secondary-negative MuiButton-text"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[MockFunction]}
+ type="button"
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="ecogesture_info_modal.accessibility.button_close"
+ className="MuiButton-root btn-secondary-negative MuiButton-text"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[MockFunction]}
+ type="button"
+ >
+ <button
+ aria-label="ecogesture_info_modal.accessibility.button_close"
+ className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[MockFunction]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={0}
+ type="button"
+ >
+ <span
+ className="MuiButton-label text-14-normal"
+ >
+ ecogesture_info_modal.button_close
+ </span>
+ <NoSsr>
+ <WithStyles(memo)
+ center={false}
+ >
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </NoSsr>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(Button)>
+ </WithStyles(ForwardRef(Button))>
+ </div>
+ </div>
+ </ForwardRef(Paper)>
+ </WithStyles(ForwardRef(Paper))>
+ </div>
+ </Transition>
+ </ForwardRef(Fade)>
+ <div
+ data-test="sentinelEnd"
+ tabIndex={0}
+ />
+ </TrapFocus>
+ </div>
+ </Portal>
+ </ForwardRef(Portal)>
+ </ForwardRef(Modal)>
+ </ForwardRef(Dialog)>
+ </WithStyles(ForwardRef(Dialog))>
+</EcogestureInfoModal>
+`;
diff --git a/src/components/Ecogesture/__snapshots__/EcogestureList.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureList.spec.tsx.snap
index 4c3198174675b06385c194ab5626a78dab91b7ca..e828213acd413bbff53e93fe255a8e68c666f799 100644
--- a/src/components/Ecogesture/__snapshots__/EcogestureList.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/EcogestureList.spec.tsx.snap
@@ -1,3 +1,2149 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`EcogesturesList component should be rendered correctly 1`] = `[Function]`;
+exports[`EcogesturesList component should be rendered correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <EcogestureList
+ filteredByProfile={false}
+ >
+ <div
+ className="ecogesture-root"
+ >
+ <div
+ className="efficiency-button-content"
+ >
+ <div
+ className="filters text-16-normal"
+ >
+ <div
+ className="filter-button"
+ onBlur={[Function]}
+ onClick={[Function]}
+ tabIndex={0}
+ >
+ <WithStyles(ForwardRef(Button))
+ aria-controls="simple-menu"
+ aria-haspopup="true"
+ aria-label="ecogesture.MENU_TITLE"
+ classes={
+ Object {
+ "label": "text-14-normal",
+ "root": "btn-secondary-negative",
+ }
+ }
+ onClick={[Function]}
+ variant="contained"
+ >
+ <ForwardRef(Button)
+ aria-controls="simple-menu"
+ aria-haspopup="true"
+ aria-label="ecogesture.MENU_TITLE"
+ classes={
+ Object {
+ "colorInherit": "MuiButton-colorInherit",
+ "contained": "MuiButton-contained",
+ "containedPrimary": "MuiButton-containedPrimary",
+ "containedSecondary": "MuiButton-containedSecondary",
+ "containedSizeLarge": "MuiButton-containedSizeLarge",
+ "containedSizeSmall": "MuiButton-containedSizeSmall",
+ "disableElevation": "MuiButton-disableElevation",
+ "disabled": "Mui-disabled",
+ "endIcon": "MuiButton-endIcon",
+ "focusVisible": "Mui-focusVisible",
+ "fullWidth": "MuiButton-fullWidth",
+ "iconSizeLarge": "MuiButton-iconSizeLarge",
+ "iconSizeMedium": "MuiButton-iconSizeMedium",
+ "iconSizeSmall": "MuiButton-iconSizeSmall",
+ "label": "MuiButton-label text-14-normal",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root btn-secondary-negative",
+ "sizeLarge": "MuiButton-sizeLarge",
+ "sizeSmall": "MuiButton-sizeSmall",
+ "startIcon": "MuiButton-startIcon",
+ "text": "MuiButton-text",
+ "textPrimary": "MuiButton-textPrimary",
+ "textSecondary": "MuiButton-textSecondary",
+ "textSizeLarge": "MuiButton-textSizeLarge",
+ "textSizeSmall": "MuiButton-textSizeSmall",
+ }
+ }
+ onClick={[Function]}
+ variant="contained"
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-controls="simple-menu"
+ aria-haspopup="true"
+ aria-label="ecogesture.MENU_TITLE"
+ className="MuiButton-root btn-secondary-negative MuiButton-contained"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="button"
+ >
+ <ForwardRef(ButtonBase)
+ aria-controls="simple-menu"
+ aria-haspopup="true"
+ aria-label="ecogesture.MENU_TITLE"
+ className="MuiButton-root btn-secondary-negative MuiButton-contained"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="button"
+ >
+ <button
+ aria-controls="simple-menu"
+ aria-haspopup="true"
+ aria-label="ecogesture.MENU_TITLE"
+ className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-contained"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={0}
+ type="button"
+ >
+ <span
+ className="MuiButton-label text-14-normal"
+ >
+ <StyledIcon
+ icon="test-file-stub"
+ size={20}
+ >
+ <Icon
+ aria-hidden={true}
+ icon="test-file-stub"
+ size={20}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={20}
+ style={Object {}}
+ width={20}
+ >
+ <svg
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={20}
+ style={Object {}}
+ width={20}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <span
+ className="ecogestures"
+ >
+ ecogesture.MENU_TITLE
+ </span>
+ </span>
+ <NoSsr>
+ <WithStyles(memo)
+ center={false}
+ >
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </NoSsr>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(Button)>
+ </WithStyles(ForwardRef(Button))>
+ <WithStyles(ForwardRef(Menu))
+ MenuListProps={
+ Object {
+ "className": "filter-menu-list",
+ }
+ }
+ PopoverClasses={
+ Object {
+ "paper": "filter-menu",
+ }
+ }
+ anchorEl={null}
+ keepMounted={true}
+ onClose={[Function]}
+ open={false}
+ variant="menu"
+ >
+ <ForwardRef(Menu)
+ MenuListProps={
+ Object {
+ "className": "filter-menu-list",
+ }
+ }
+ PopoverClasses={
+ Object {
+ "paper": "filter-menu",
+ }
+ }
+ anchorEl={null}
+ classes={
+ Object {
+ "list": "MuiMenu-list",
+ "paper": "MuiMenu-paper",
+ }
+ }
+ keepMounted={true}
+ onClose={[Function]}
+ open={false}
+ variant="menu"
+ >
+ <WithStyles(ForwardRef(Popover))
+ PaperProps={
+ Object {
+ "classes": Object {
+ "root": "MuiMenu-paper",
+ },
+ }
+ }
+ anchorEl={null}
+ anchorOrigin={
+ Object {
+ "horizontal": "left",
+ "vertical": "top",
+ }
+ }
+ classes={
+ Object {
+ "paper": "filter-menu",
+ }
+ }
+ getContentAnchorEl={[Function]}
+ keepMounted={true}
+ onClose={[Function]}
+ onEntering={[Function]}
+ open={false}
+ transformOrigin={
+ Object {
+ "horizontal": "left",
+ "vertical": "top",
+ }
+ }
+ transitionDuration="auto"
+ >
+ <ForwardRef(Popover)
+ PaperProps={
+ Object {
+ "classes": Object {
+ "root": "MuiMenu-paper",
+ },
+ }
+ }
+ anchorEl={null}
+ anchorOrigin={
+ Object {
+ "horizontal": "left",
+ "vertical": "top",
+ }
+ }
+ classes={
+ Object {
+ "paper": "MuiPopover-paper filter-menu",
+ "root": "MuiPopover-root",
+ }
+ }
+ getContentAnchorEl={[Function]}
+ keepMounted={true}
+ onClose={[Function]}
+ onEntering={[Function]}
+ open={false}
+ transformOrigin={
+ Object {
+ "horizontal": "left",
+ "vertical": "top",
+ }
+ }
+ transitionDuration="auto"
+ >
+ <ForwardRef(Modal)
+ BackdropProps={
+ Object {
+ "invisible": true,
+ }
+ }
+ className="MuiPopover-root"
+ keepMounted={true}
+ onClose={[Function]}
+ open={false}
+ >
+ <ForwardRef(Portal)
+ disablePortal={false}
+ >
+ <Portal
+ containerInfo={
+ <body>
+ <div
+ aria-hidden="true"
+ class="MuiPopover-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px; visibility: hidden;"
+ >
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiPaper-root MuiMenu-paper MuiPopover-paper filter-menu MuiPaper-elevation8 MuiPaper-rounded"
+ style="opacity: 0; transform: scale(0.75, 0.5625); visibility: hidden;"
+ tabindex="-1"
+ >
+ <ul
+ class="MuiList-root MuiMenu-list filter-menu-list MuiList-padding"
+ role="menu"
+ tabindex="-1"
+ >
+ <li
+ aria-disabled="false"
+ class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected"
+ role="menuitem"
+ tabindex="-1"
+ >
+ ecogesture.ALL
+ <div
+ class="MuiListItemIcon-root filter-menu-icon"
+ >
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="13"
+ width="13"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </li>
+ <li
+ aria-disabled="false"
+ class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ role="menuitem"
+ tabindex="-1"
+ >
+ ecogesture.HEATING
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </li>
+ <li
+ aria-disabled="false"
+ class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ role="menuitem"
+ tabindex="-1"
+ >
+ ecogesture.AIR_CONDITIONING
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </li>
+ <li
+ aria-disabled="false"
+ class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ role="menuitem"
+ tabindex="-1"
+ >
+ ecogesture.ECS
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </li>
+ <li
+ aria-disabled="false"
+ class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ role="menuitem"
+ tabindex="-1"
+ >
+ ecogesture.COLD_WATER
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </li>
+ <li
+ aria-disabled="false"
+ class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ role="menuitem"
+ tabindex="-1"
+ >
+ ecogesture.ELECTRICITY_SPECIFIC
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </li>
+ <li
+ aria-disabled="false"
+ class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ role="menuitem"
+ tabindex="-1"
+ >
+ ecogesture.COOKING
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </li>
+ </ul>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+ </body>
+ }
+ >
+ <div
+ className="MuiPopover-root"
+ onKeyDown={[Function]}
+ role="presentation"
+ style={
+ Object {
+ "bottom": 0,
+ "left": 0,
+ "position": "fixed",
+ "right": 0,
+ "top": 0,
+ "visibility": "hidden",
+ "zIndex": 1300,
+ }
+ }
+ >
+ <ForwardRef(SimpleBackdrop)
+ invisible={true}
+ onClick={[Function]}
+ open={false}
+ />
+ <TrapFocus
+ disableAutoFocus={false}
+ disableEnforceFocus={false}
+ disableRestoreFocus={false}
+ getDoc={[Function]}
+ isEnabled={[Function]}
+ open={false}
+ >
+ <div
+ data-test="sentinelStart"
+ tabIndex={0}
+ />
+ <ForwardRef(Grow)
+ appear={true}
+ in={false}
+ onEnter={[Function]}
+ onEntering={[Function]}
+ onExited={[Function]}
+ tabIndex="-1"
+ timeout="auto"
+ >
+ <Transition
+ addEndListener={[Function]}
+ appear={true}
+ enter={true}
+ exit={true}
+ in={false}
+ mountOnEnter={false}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ tabIndex="-1"
+ timeout={null}
+ unmountOnExit={false}
+ >
+ <WithStyles(ForwardRef(Paper))
+ className="MuiPopover-paper filter-menu"
+ classes={
+ Object {
+ "root": "MuiMenu-paper",
+ }
+ }
+ elevation={8}
+ style={
+ Object {
+ "opacity": 0,
+ "transform": "scale(0.75, 0.5625)",
+ "visibility": "hidden",
+ }
+ }
+ tabIndex="-1"
+ >
+ <ForwardRef(Paper)
+ className="MuiPopover-paper filter-menu"
+ classes={
+ Object {
+ "elevation0": "MuiPaper-elevation0",
+ "elevation1": "MuiPaper-elevation1",
+ "elevation10": "MuiPaper-elevation10",
+ "elevation11": "MuiPaper-elevation11",
+ "elevation12": "MuiPaper-elevation12",
+ "elevation13": "MuiPaper-elevation13",
+ "elevation14": "MuiPaper-elevation14",
+ "elevation15": "MuiPaper-elevation15",
+ "elevation16": "MuiPaper-elevation16",
+ "elevation17": "MuiPaper-elevation17",
+ "elevation18": "MuiPaper-elevation18",
+ "elevation19": "MuiPaper-elevation19",
+ "elevation2": "MuiPaper-elevation2",
+ "elevation20": "MuiPaper-elevation20",
+ "elevation21": "MuiPaper-elevation21",
+ "elevation22": "MuiPaper-elevation22",
+ "elevation23": "MuiPaper-elevation23",
+ "elevation24": "MuiPaper-elevation24",
+ "elevation3": "MuiPaper-elevation3",
+ "elevation4": "MuiPaper-elevation4",
+ "elevation5": "MuiPaper-elevation5",
+ "elevation6": "MuiPaper-elevation6",
+ "elevation7": "MuiPaper-elevation7",
+ "elevation8": "MuiPaper-elevation8",
+ "elevation9": "MuiPaper-elevation9",
+ "outlined": "MuiPaper-outlined",
+ "root": "MuiPaper-root MuiMenu-paper",
+ "rounded": "MuiPaper-rounded",
+ }
+ }
+ elevation={8}
+ style={
+ Object {
+ "opacity": 0,
+ "transform": "scale(0.75, 0.5625)",
+ "visibility": "hidden",
+ }
+ }
+ tabIndex="-1"
+ >
+ <div
+ className="MuiPaper-root MuiMenu-paper MuiPopover-paper filter-menu MuiPaper-elevation8 MuiPaper-rounded"
+ style={
+ Object {
+ "opacity": 0,
+ "transform": "scale(0.75, 0.5625)",
+ "visibility": "hidden",
+ }
+ }
+ tabIndex="-1"
+ >
+ <ForwardRef(MenuList)
+ actions={
+ Object {
+ "current": Object {
+ "adjustStyleForScrollbar": [Function],
+ },
+ }
+ }
+ autoFocus={false}
+ autoFocusItem={false}
+ className="MuiMenu-list filter-menu-list"
+ onKeyDown={[Function]}
+ variant="menu"
+ >
+ <WithStyles(ForwardRef(List))
+ className="MuiMenu-list filter-menu-list"
+ onKeyDown={[Function]}
+ role="menu"
+ tabIndex={-1}
+ >
+ <ForwardRef(List)
+ className="MuiMenu-list filter-menu-list"
+ classes={
+ Object {
+ "dense": "MuiList-dense",
+ "padding": "MuiList-padding",
+ "root": "MuiList-root",
+ "subheader": "MuiList-subheader",
+ }
+ }
+ onKeyDown={[Function]}
+ role="menu"
+ tabIndex={-1}
+ >
+ <ul
+ className="MuiList-root MuiMenu-list filter-menu-list MuiList-padding"
+ onKeyDown={[Function]}
+ role="menu"
+ tabIndex={-1}
+ >
+ <WithStyles(ForwardRef(MenuItem))
+ classes={
+ Object {
+ "root": "item-active",
+ }
+ }
+ key=".$.$0"
+ onClick={[Function]}
+ selected={true}
+ >
+ <ForwardRef(MenuItem)
+ classes={
+ Object {
+ "dense": "MuiMenuItem-dense",
+ "gutters": "MuiMenuItem-gutters",
+ "root": "MuiMenuItem-root item-active",
+ "selected": "Mui-selected",
+ }
+ }
+ onClick={[Function]}
+ selected={true}
+ >
+ <WithStyles(ForwardRef(ListItem))
+ button={true}
+ className="MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters"
+ classes={
+ Object {
+ "dense": "MuiMenuItem-dense",
+ }
+ }
+ component="li"
+ disableGutters={false}
+ onClick={[Function]}
+ role="menuitem"
+ selected={true}
+ tabIndex={-1}
+ >
+ <ForwardRef(ListItem)
+ button={true}
+ className="MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters"
+ classes={
+ Object {
+ "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
+ "button": "MuiListItem-button",
+ "container": "MuiListItem-container",
+ "dense": "MuiListItem-dense MuiMenuItem-dense",
+ "disabled": "Mui-disabled",
+ "divider": "MuiListItem-divider",
+ "focusVisible": "Mui-focusVisible",
+ "gutters": "MuiListItem-gutters",
+ "root": "MuiListItem-root",
+ "secondaryAction": "MuiListItem-secondaryAction",
+ "selected": "Mui-selected",
+ }
+ }
+ component="li"
+ disableGutters={false}
+ onClick={[Function]}
+ role="menuitem"
+ selected={true}
+ tabIndex={-1}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiListItem-root MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected"
+ component="li"
+ disabled={false}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ role="menuitem"
+ tabIndex={-1}
+ >
+ <ForwardRef(ButtonBase)
+ className="MuiListItem-root MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="li"
+ disabled={false}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ role="menuitem"
+ tabIndex={-1}
+ >
+ <li
+ aria-disabled={false}
+ className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected"
+ onBlur={[Function]}
+ onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ role="menuitem"
+ tabIndex={-1}
+ >
+ ecogesture.ALL
+ <WithStyles(ForwardRef(ListItemIcon))
+ classes={
+ Object {
+ "root": "filter-menu-icon",
+ }
+ }
+ key=".1"
+ >
+ <ForwardRef(ListItemIcon)
+ classes={
+ Object {
+ "alignItemsFlexStart": "MuiListItemIcon-alignItemsFlexStart",
+ "root": "MuiListItemIcon-root filter-menu-icon",
+ }
+ }
+ >
+ <div
+ className="MuiListItemIcon-root filter-menu-icon"
+ >
+ <StyledIcon
+ icon="test-file-stub"
+ size={13}
+ >
+ <Icon
+ aria-hidden={true}
+ icon="test-file-stub"
+ size={13}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={13}
+ style={Object {}}
+ width={13}
+ >
+ <svg
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={13}
+ style={Object {}}
+ width={13}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ </div>
+ </ForwardRef(ListItemIcon)>
+ </WithStyles(ForwardRef(ListItemIcon))>
+ <NoSsr>
+ <WithStyles(memo)
+ center={false}
+ >
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </NoSsr>
+ </li>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(ListItem)>
+ </WithStyles(ForwardRef(ListItem))>
+ </ForwardRef(MenuItem)>
+ </WithStyles(ForwardRef(MenuItem))>
+ <WithStyles(ForwardRef(MenuItem))
+ classes={
+ Object {
+ "root": "",
+ }
+ }
+ key=".$.$1"
+ onClick={[Function]}
+ selected={false}
+ >
+ <ForwardRef(MenuItem)
+ classes={
+ Object {
+ "dense": "MuiMenuItem-dense",
+ "gutters": "MuiMenuItem-gutters",
+ "root": "MuiMenuItem-root",
+ "selected": "Mui-selected",
+ }
+ }
+ onClick={[Function]}
+ selected={false}
+ >
+ <WithStyles(ForwardRef(ListItem))
+ button={true}
+ className="MuiMenuItem-root MuiMenuItem-gutters"
+ classes={
+ Object {
+ "dense": "MuiMenuItem-dense",
+ }
+ }
+ component="li"
+ disableGutters={false}
+ onClick={[Function]}
+ role="menuitem"
+ selected={false}
+ tabIndex={-1}
+ >
+ <ForwardRef(ListItem)
+ button={true}
+ className="MuiMenuItem-root MuiMenuItem-gutters"
+ classes={
+ Object {
+ "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
+ "button": "MuiListItem-button",
+ "container": "MuiListItem-container",
+ "dense": "MuiListItem-dense MuiMenuItem-dense",
+ "disabled": "Mui-disabled",
+ "divider": "MuiListItem-divider",
+ "focusVisible": "Mui-focusVisible",
+ "gutters": "MuiListItem-gutters",
+ "root": "MuiListItem-root",
+ "secondaryAction": "MuiListItem-secondaryAction",
+ "selected": "Mui-selected",
+ }
+ }
+ component="li"
+ disableGutters={false}
+ onClick={[Function]}
+ role="menuitem"
+ selected={false}
+ tabIndex={-1}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ component="li"
+ disabled={false}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ role="menuitem"
+ tabIndex={-1}
+ >
+ <ForwardRef(ButtonBase)
+ className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="li"
+ disabled={false}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ role="menuitem"
+ tabIndex={-1}
+ >
+ <li
+ aria-disabled={false}
+ className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ onBlur={[Function]}
+ onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ role="menuitem"
+ tabIndex={-1}
+ >
+ ecogesture.HEATING
+ <NoSsr>
+ <WithStyles(memo)
+ center={false}
+ >
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </NoSsr>
+ </li>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(ListItem)>
+ </WithStyles(ForwardRef(ListItem))>
+ </ForwardRef(MenuItem)>
+ </WithStyles(ForwardRef(MenuItem))>
+ <WithStyles(ForwardRef(MenuItem))
+ classes={
+ Object {
+ "root": "",
+ }
+ }
+ key=".$.$2"
+ onClick={[Function]}
+ selected={false}
+ >
+ <ForwardRef(MenuItem)
+ classes={
+ Object {
+ "dense": "MuiMenuItem-dense",
+ "gutters": "MuiMenuItem-gutters",
+ "root": "MuiMenuItem-root",
+ "selected": "Mui-selected",
+ }
+ }
+ onClick={[Function]}
+ selected={false}
+ >
+ <WithStyles(ForwardRef(ListItem))
+ button={true}
+ className="MuiMenuItem-root MuiMenuItem-gutters"
+ classes={
+ Object {
+ "dense": "MuiMenuItem-dense",
+ }
+ }
+ component="li"
+ disableGutters={false}
+ onClick={[Function]}
+ role="menuitem"
+ selected={false}
+ tabIndex={-1}
+ >
+ <ForwardRef(ListItem)
+ button={true}
+ className="MuiMenuItem-root MuiMenuItem-gutters"
+ classes={
+ Object {
+ "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
+ "button": "MuiListItem-button",
+ "container": "MuiListItem-container",
+ "dense": "MuiListItem-dense MuiMenuItem-dense",
+ "disabled": "Mui-disabled",
+ "divider": "MuiListItem-divider",
+ "focusVisible": "Mui-focusVisible",
+ "gutters": "MuiListItem-gutters",
+ "root": "MuiListItem-root",
+ "secondaryAction": "MuiListItem-secondaryAction",
+ "selected": "Mui-selected",
+ }
+ }
+ component="li"
+ disableGutters={false}
+ onClick={[Function]}
+ role="menuitem"
+ selected={false}
+ tabIndex={-1}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ component="li"
+ disabled={false}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ role="menuitem"
+ tabIndex={-1}
+ >
+ <ForwardRef(ButtonBase)
+ className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="li"
+ disabled={false}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ role="menuitem"
+ tabIndex={-1}
+ >
+ <li
+ aria-disabled={false}
+ className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ onBlur={[Function]}
+ onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ role="menuitem"
+ tabIndex={-1}
+ >
+ ecogesture.AIR_CONDITIONING
+ <NoSsr>
+ <WithStyles(memo)
+ center={false}
+ >
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </NoSsr>
+ </li>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(ListItem)>
+ </WithStyles(ForwardRef(ListItem))>
+ </ForwardRef(MenuItem)>
+ </WithStyles(ForwardRef(MenuItem))>
+ <WithStyles(ForwardRef(MenuItem))
+ classes={
+ Object {
+ "root": "",
+ }
+ }
+ key=".$.$3"
+ onClick={[Function]}
+ selected={false}
+ >
+ <ForwardRef(MenuItem)
+ classes={
+ Object {
+ "dense": "MuiMenuItem-dense",
+ "gutters": "MuiMenuItem-gutters",
+ "root": "MuiMenuItem-root",
+ "selected": "Mui-selected",
+ }
+ }
+ onClick={[Function]}
+ selected={false}
+ >
+ <WithStyles(ForwardRef(ListItem))
+ button={true}
+ className="MuiMenuItem-root MuiMenuItem-gutters"
+ classes={
+ Object {
+ "dense": "MuiMenuItem-dense",
+ }
+ }
+ component="li"
+ disableGutters={false}
+ onClick={[Function]}
+ role="menuitem"
+ selected={false}
+ tabIndex={-1}
+ >
+ <ForwardRef(ListItem)
+ button={true}
+ className="MuiMenuItem-root MuiMenuItem-gutters"
+ classes={
+ Object {
+ "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
+ "button": "MuiListItem-button",
+ "container": "MuiListItem-container",
+ "dense": "MuiListItem-dense MuiMenuItem-dense",
+ "disabled": "Mui-disabled",
+ "divider": "MuiListItem-divider",
+ "focusVisible": "Mui-focusVisible",
+ "gutters": "MuiListItem-gutters",
+ "root": "MuiListItem-root",
+ "secondaryAction": "MuiListItem-secondaryAction",
+ "selected": "Mui-selected",
+ }
+ }
+ component="li"
+ disableGutters={false}
+ onClick={[Function]}
+ role="menuitem"
+ selected={false}
+ tabIndex={-1}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ component="li"
+ disabled={false}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ role="menuitem"
+ tabIndex={-1}
+ >
+ <ForwardRef(ButtonBase)
+ className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="li"
+ disabled={false}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ role="menuitem"
+ tabIndex={-1}
+ >
+ <li
+ aria-disabled={false}
+ className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ onBlur={[Function]}
+ onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ role="menuitem"
+ tabIndex={-1}
+ >
+ ecogesture.ECS
+ <NoSsr>
+ <WithStyles(memo)
+ center={false}
+ >
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </NoSsr>
+ </li>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(ListItem)>
+ </WithStyles(ForwardRef(ListItem))>
+ </ForwardRef(MenuItem)>
+ </WithStyles(ForwardRef(MenuItem))>
+ <WithStyles(ForwardRef(MenuItem))
+ classes={
+ Object {
+ "root": "",
+ }
+ }
+ key=".$.$4"
+ onClick={[Function]}
+ selected={false}
+ >
+ <ForwardRef(MenuItem)
+ classes={
+ Object {
+ "dense": "MuiMenuItem-dense",
+ "gutters": "MuiMenuItem-gutters",
+ "root": "MuiMenuItem-root",
+ "selected": "Mui-selected",
+ }
+ }
+ onClick={[Function]}
+ selected={false}
+ >
+ <WithStyles(ForwardRef(ListItem))
+ button={true}
+ className="MuiMenuItem-root MuiMenuItem-gutters"
+ classes={
+ Object {
+ "dense": "MuiMenuItem-dense",
+ }
+ }
+ component="li"
+ disableGutters={false}
+ onClick={[Function]}
+ role="menuitem"
+ selected={false}
+ tabIndex={-1}
+ >
+ <ForwardRef(ListItem)
+ button={true}
+ className="MuiMenuItem-root MuiMenuItem-gutters"
+ classes={
+ Object {
+ "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
+ "button": "MuiListItem-button",
+ "container": "MuiListItem-container",
+ "dense": "MuiListItem-dense MuiMenuItem-dense",
+ "disabled": "Mui-disabled",
+ "divider": "MuiListItem-divider",
+ "focusVisible": "Mui-focusVisible",
+ "gutters": "MuiListItem-gutters",
+ "root": "MuiListItem-root",
+ "secondaryAction": "MuiListItem-secondaryAction",
+ "selected": "Mui-selected",
+ }
+ }
+ component="li"
+ disableGutters={false}
+ onClick={[Function]}
+ role="menuitem"
+ selected={false}
+ tabIndex={-1}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ component="li"
+ disabled={false}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ role="menuitem"
+ tabIndex={-1}
+ >
+ <ForwardRef(ButtonBase)
+ className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="li"
+ disabled={false}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ role="menuitem"
+ tabIndex={-1}
+ >
+ <li
+ aria-disabled={false}
+ className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ onBlur={[Function]}
+ onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ role="menuitem"
+ tabIndex={-1}
+ >
+ ecogesture.COLD_WATER
+ <NoSsr>
+ <WithStyles(memo)
+ center={false}
+ >
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </NoSsr>
+ </li>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(ListItem)>
+ </WithStyles(ForwardRef(ListItem))>
+ </ForwardRef(MenuItem)>
+ </WithStyles(ForwardRef(MenuItem))>
+ <WithStyles(ForwardRef(MenuItem))
+ classes={
+ Object {
+ "root": "",
+ }
+ }
+ key=".$.$5"
+ onClick={[Function]}
+ selected={false}
+ >
+ <ForwardRef(MenuItem)
+ classes={
+ Object {
+ "dense": "MuiMenuItem-dense",
+ "gutters": "MuiMenuItem-gutters",
+ "root": "MuiMenuItem-root",
+ "selected": "Mui-selected",
+ }
+ }
+ onClick={[Function]}
+ selected={false}
+ >
+ <WithStyles(ForwardRef(ListItem))
+ button={true}
+ className="MuiMenuItem-root MuiMenuItem-gutters"
+ classes={
+ Object {
+ "dense": "MuiMenuItem-dense",
+ }
+ }
+ component="li"
+ disableGutters={false}
+ onClick={[Function]}
+ role="menuitem"
+ selected={false}
+ tabIndex={-1}
+ >
+ <ForwardRef(ListItem)
+ button={true}
+ className="MuiMenuItem-root MuiMenuItem-gutters"
+ classes={
+ Object {
+ "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
+ "button": "MuiListItem-button",
+ "container": "MuiListItem-container",
+ "dense": "MuiListItem-dense MuiMenuItem-dense",
+ "disabled": "Mui-disabled",
+ "divider": "MuiListItem-divider",
+ "focusVisible": "Mui-focusVisible",
+ "gutters": "MuiListItem-gutters",
+ "root": "MuiListItem-root",
+ "secondaryAction": "MuiListItem-secondaryAction",
+ "selected": "Mui-selected",
+ }
+ }
+ component="li"
+ disableGutters={false}
+ onClick={[Function]}
+ role="menuitem"
+ selected={false}
+ tabIndex={-1}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ component="li"
+ disabled={false}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ role="menuitem"
+ tabIndex={-1}
+ >
+ <ForwardRef(ButtonBase)
+ className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="li"
+ disabled={false}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ role="menuitem"
+ tabIndex={-1}
+ >
+ <li
+ aria-disabled={false}
+ className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ onBlur={[Function]}
+ onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ role="menuitem"
+ tabIndex={-1}
+ >
+ ecogesture.ELECTRICITY_SPECIFIC
+ <NoSsr>
+ <WithStyles(memo)
+ center={false}
+ >
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </NoSsr>
+ </li>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(ListItem)>
+ </WithStyles(ForwardRef(ListItem))>
+ </ForwardRef(MenuItem)>
+ </WithStyles(ForwardRef(MenuItem))>
+ <WithStyles(ForwardRef(MenuItem))
+ classes={
+ Object {
+ "root": "",
+ }
+ }
+ key=".$.$6"
+ onClick={[Function]}
+ selected={false}
+ >
+ <ForwardRef(MenuItem)
+ classes={
+ Object {
+ "dense": "MuiMenuItem-dense",
+ "gutters": "MuiMenuItem-gutters",
+ "root": "MuiMenuItem-root",
+ "selected": "Mui-selected",
+ }
+ }
+ onClick={[Function]}
+ selected={false}
+ >
+ <WithStyles(ForwardRef(ListItem))
+ button={true}
+ className="MuiMenuItem-root MuiMenuItem-gutters"
+ classes={
+ Object {
+ "dense": "MuiMenuItem-dense",
+ }
+ }
+ component="li"
+ disableGutters={false}
+ onClick={[Function]}
+ role="menuitem"
+ selected={false}
+ tabIndex={-1}
+ >
+ <ForwardRef(ListItem)
+ button={true}
+ className="MuiMenuItem-root MuiMenuItem-gutters"
+ classes={
+ Object {
+ "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
+ "button": "MuiListItem-button",
+ "container": "MuiListItem-container",
+ "dense": "MuiListItem-dense MuiMenuItem-dense",
+ "disabled": "Mui-disabled",
+ "divider": "MuiListItem-divider",
+ "focusVisible": "Mui-focusVisible",
+ "gutters": "MuiListItem-gutters",
+ "root": "MuiListItem-root",
+ "secondaryAction": "MuiListItem-secondaryAction",
+ "selected": "Mui-selected",
+ }
+ }
+ component="li"
+ disableGutters={false}
+ onClick={[Function]}
+ role="menuitem"
+ selected={false}
+ tabIndex={-1}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ component="li"
+ disabled={false}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ role="menuitem"
+ tabIndex={-1}
+ >
+ <ForwardRef(ButtonBase)
+ className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="li"
+ disabled={false}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ role="menuitem"
+ tabIndex={-1}
+ >
+ <li
+ aria-disabled={false}
+ className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ onBlur={[Function]}
+ onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ role="menuitem"
+ tabIndex={-1}
+ >
+ ecogesture.COOKING
+ <NoSsr>
+ <WithStyles(memo)
+ center={false}
+ >
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </NoSsr>
+ </li>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(ListItem)>
+ </WithStyles(ForwardRef(ListItem))>
+ </ForwardRef(MenuItem)>
+ </WithStyles(ForwardRef(MenuItem))>
+ </ul>
+ </ForwardRef(List)>
+ </WithStyles(ForwardRef(List))>
+ </ForwardRef(MenuList)>
+ </div>
+ </ForwardRef(Paper)>
+ </WithStyles(ForwardRef(Paper))>
+ </Transition>
+ </ForwardRef(Grow)>
+ <div
+ data-test="sentinelEnd"
+ tabIndex={0}
+ />
+ </TrapFocus>
+ </div>
+ </Portal>
+ </ForwardRef(Portal)>
+ </ForwardRef(Modal)>
+ </ForwardRef(Popover)>
+ </WithStyles(ForwardRef(Popover))>
+ </ForwardRef(Menu)>
+ </WithStyles(ForwardRef(Menu))>
+ </div>
+ </div>
+ </div>
+ <div
+ className="ecogesture-content"
+ >
+ <div
+ className="ecogesture-content-loading"
+ >
+ <StyledSpinner
+ fluidType={3}
+ size="5em"
+ >
+ <WithStyles(WithStyles(ForwardRef(CircularProgress)))
+ size="5em"
+ >
+ <WithStyles(ForwardRef(CircularProgress))
+ classes={
+ Object {
+ "root": "WithStyles(ForwardRef(CircularProgress))-root-1",
+ }
+ }
+ size="5em"
+ >
+ <ForwardRef(CircularProgress)
+ classes={
+ Object {
+ "circle": "MuiCircularProgress-circle",
+ "circleDisableShrink": "MuiCircularProgress-circleDisableShrink",
+ "circleIndeterminate": "MuiCircularProgress-circleIndeterminate",
+ "circleStatic": "MuiCircularProgress-circleStatic",
+ "colorPrimary": "MuiCircularProgress-colorPrimary",
+ "colorSecondary": "MuiCircularProgress-colorSecondary",
+ "indeterminate": "MuiCircularProgress-indeterminate",
+ "root": "MuiCircularProgress-root WithStyles(ForwardRef(CircularProgress))-root-1",
+ "static": "MuiCircularProgress-static",
+ "svg": "MuiCircularProgress-svg",
+ }
+ }
+ size="5em"
+ >
+ <div
+ className="MuiCircularProgress-root WithStyles(ForwardRef(CircularProgress))-root-1 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
+ role="progressbar"
+ style={
+ Object {
+ "height": "5em",
+ "width": "5em",
+ }
+ }
+ >
+ <svg
+ className="MuiCircularProgress-svg"
+ viewBox="22 22 44 44"
+ >
+ <circle
+ className="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
+ cx={44}
+ cy={44}
+ fill="none"
+ r={20.2}
+ strokeWidth={3.6}
+ style={Object {}}
+ />
+ </svg>
+ </div>
+ </ForwardRef(CircularProgress)>
+ </WithStyles(ForwardRef(CircularProgress))>
+ </WithStyles(WithStyles(ForwardRef(CircularProgress)))>
+ </StyledSpinner>
+ </div>
+ </div>
+ <EcogestureInfoModal
+ handleCloseClick={[Function]}
+ open={false}
+ >
+ <WithStyles(ForwardRef(Dialog))
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "paper": "modal-paper",
+ "root": "modal-root",
+ }
+ }
+ onClose={[Function]}
+ open={false}
+ >
+ <ForwardRef(Dialog)
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "container": "MuiDialog-container",
+ "paper": "MuiDialog-paper modal-paper",
+ "paperFullScreen": "MuiDialog-paperFullScreen",
+ "paperFullWidth": "MuiDialog-paperFullWidth",
+ "paperScrollBody": "MuiDialog-paperScrollBody",
+ "paperScrollPaper": "MuiDialog-paperScrollPaper",
+ "paperWidthFalse": "MuiDialog-paperWidthFalse",
+ "paperWidthLg": "MuiDialog-paperWidthLg",
+ "paperWidthMd": "MuiDialog-paperWidthMd",
+ "paperWidthSm": "MuiDialog-paperWidthSm",
+ "paperWidthXl": "MuiDialog-paperWidthXl",
+ "paperWidthXs": "MuiDialog-paperWidthXs",
+ "root": "MuiDialog-root modal-root",
+ "scrollBody": "MuiDialog-scrollBody",
+ "scrollPaper": "MuiDialog-scrollPaper",
+ }
+ }
+ onClose={[Function]}
+ open={false}
+ >
+ <ForwardRef(Modal)
+ BackdropComponent={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "Naked": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "propTypes": Object {
+ "children": [Function],
+ "className": [Function],
+ "classes": [Function],
+ "invisible": [Function],
+ "open": [Function],
+ "transitionDuration": [Function],
+ },
+ "render": [Function],
+ },
+ "displayName": "WithStyles(ForwardRef(Backdrop))",
+ "options": Object {
+ "defaultTheme": Object {
+ "breakpoints": Object {
+ "between": [Function],
+ "down": [Function],
+ "keys": Array [
+ "xs",
+ "sm",
+ "md",
+ "lg",
+ "xl",
+ ],
+ "only": [Function],
+ "up": [Function],
+ "values": Object {
+ "lg": 1280,
+ "md": 960,
+ "sm": 600,
+ "xl": 1920,
+ "xs": 0,
+ },
+ "width": [Function],
+ },
+ "direction": "ltr",
+ "mixins": Object {
+ "gutters": [Function],
+ "toolbar": Object {
+ "@media (min-width:0px) and (orientation: landscape)": Object {
+ "minHeight": 48,
+ },
+ "@media (min-width:600px)": Object {
+ "minHeight": 64,
+ },
+ "minHeight": 56,
+ },
+ },
+ "overrides": Object {},
+ "palette": Object {
+ "action": Object {
+ "active": "rgba(0, 0, 0, 0.54)",
+ "disabled": "rgba(0, 0, 0, 0.26)",
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
+ "hover": "rgba(0, 0, 0, 0.08)",
+ "hoverOpacity": 0.08,
+ "selected": "rgba(0, 0, 0, 0.14)",
+ },
+ "augmentColor": [Function],
+ "background": Object {
+ "default": "#fafafa",
+ "paper": "#fff",
+ },
+ "common": Object {
+ "black": "#000",
+ "white": "#fff",
+ },
+ "contrastThreshold": 3,
+ "divider": "rgba(0, 0, 0, 0.12)",
+ "error": Object {
+ "contrastText": "#fff",
+ "dark": "#d32f2f",
+ "light": "#e57373",
+ "main": "#f44336",
+ },
+ "getContrastText": [Function],
+ "grey": Object {
+ "100": "#f5f5f5",
+ "200": "#eeeeee",
+ "300": "#e0e0e0",
+ "400": "#bdbdbd",
+ "50": "#fafafa",
+ "500": "#9e9e9e",
+ "600": "#757575",
+ "700": "#616161",
+ "800": "#424242",
+ "900": "#212121",
+ "A100": "#d5d5d5",
+ "A200": "#aaaaaa",
+ "A400": "#303030",
+ "A700": "#616161",
+ },
+ "info": Object {
+ "contrastText": "#fff",
+ "dark": "#1976d2",
+ "light": "#64b5f6",
+ "main": "#2196f3",
+ },
+ "primary": Object {
+ "contrastText": "#fff",
+ "dark": "#303f9f",
+ "light": "#7986cb",
+ "main": "#3f51b5",
+ },
+ "secondary": Object {
+ "contrastText": "#fff",
+ "dark": "#c51162",
+ "light": "#ff4081",
+ "main": "#f50057",
+ },
+ "success": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#388e3c",
+ "light": "#81c784",
+ "main": "#4caf50",
+ },
+ "text": Object {
+ "disabled": "rgba(0, 0, 0, 0.38)",
+ "hint": "rgba(0, 0, 0, 0.38)",
+ "primary": "rgba(0, 0, 0, 0.87)",
+ "secondary": "rgba(0, 0, 0, 0.54)",
+ },
+ "tonalOffset": 0.2,
+ "type": "light",
+ "warning": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#f57c00",
+ "light": "#ffb74d",
+ "main": "#ff9800",
+ },
+ },
+ "props": Object {},
+ "shadows": Array [
+ "none",
+ "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
+ "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
+ "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
+ "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+ "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
+ "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
+ "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
+ "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
+ "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
+ "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
+ "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
+ "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
+ "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
+ "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
+ "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
+ "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
+ "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
+ "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
+ ],
+ "shape": Object {
+ "borderRadius": 4,
+ },
+ "spacing": [Function],
+ "transitions": Object {
+ "create": [Function],
+ "duration": Object {
+ "complex": 375,
+ "enteringScreen": 225,
+ "leavingScreen": 195,
+ "short": 250,
+ "shorter": 200,
+ "shortest": 150,
+ "standard": 300,
+ },
+ "easing": Object {
+ "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+ "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+ "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
+ "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
+ },
+ "getAutoHeightDuration": [Function],
+ },
+ "typography": Object {
+ "body1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.5,
+ },
+ "body2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.01071em",
+ "lineHeight": 1.43,
+ },
+ "button": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.02857em",
+ "lineHeight": 1.75,
+ "textTransform": "uppercase",
+ },
+ "caption": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.03333em",
+ "lineHeight": 1.66,
+ },
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": 14,
+ "fontWeightBold": 700,
+ "fontWeightLight": 300,
+ "fontWeightMedium": 500,
+ "fontWeightRegular": 400,
+ "h1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "6rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.01562em",
+ "lineHeight": 1.167,
+ },
+ "h2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3.75rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.00833em",
+ "lineHeight": 1.2,
+ },
+ "h3": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.167,
+ },
+ "h4": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "2.125rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00735em",
+ "lineHeight": 1.235,
+ },
+ "h5": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.5rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.334,
+ },
+ "h6": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.25rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.0075em",
+ "lineHeight": 1.6,
+ },
+ "htmlFontSize": 16,
+ "overline": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.08333em",
+ "lineHeight": 2.66,
+ "textTransform": "uppercase",
+ },
+ "pxToRem": [Function],
+ "round": [Function],
+ "subtitle1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.75,
+ },
+ "subtitle2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.00714em",
+ "lineHeight": 1.57,
+ },
+ },
+ "zIndex": Object {
+ "appBar": 1100,
+ "drawer": 1200,
+ "mobileStepper": 1000,
+ "modal": 1300,
+ "snackbar": 1400,
+ "speedDial": 1050,
+ "tooltip": 1500,
+ },
+ },
+ "name": "MuiBackdrop",
+ },
+ "propTypes": Object {
+ "classes": [Function],
+ "innerRef": [Function],
+ },
+ "render": [Function],
+ "useStyles": [Function],
+ }
+ }
+ BackdropProps={
+ Object {
+ "transitionDuration": Object {
+ "enter": 225,
+ "exit": 195,
+ },
+ }
+ }
+ className="MuiDialog-root modal-root"
+ closeAfterTransition={true}
+ disableBackdropClick={false}
+ disableEscapeKeyDown={false}
+ onClose={[Function]}
+ open={false}
+ />
+ </ForwardRef(Dialog)>
+ </WithStyles(ForwardRef(Dialog))>
+ </EcogestureInfoModal>
+ </div>
+ </EcogestureList>
+</Provider>
+`;
diff --git a/src/components/Ecogesture/__snapshots__/EfficientyRating.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EfficientyRating.spec.tsx.snap
index 514760e51c31ec3de4e71e066683136b173bdb5d..596e41d6d8ac9ea60413be73af4a3418efe19208 100644
--- a/src/components/Ecogesture/__snapshots__/EfficientyRating.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/EfficientyRating.spec.tsx.snap
@@ -1,3 +1,195 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`EfficientyRating component should be rendered correctly 1`] = `[Function]`;
+exports[`EfficientyRating component should be rendered correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <EfficientyRating
+ result={3}
+ >
+ <div
+ className="thunder"
+ >
+ <StyledIcon
+ className="star"
+ icon="test-file-stub"
+ key="0"
+ size={15}
+ >
+ <Icon
+ aria-hidden={true}
+ className="star"
+ icon="test-file-stub"
+ size={15}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={15}
+ style={Object {}}
+ width={15}
+ >
+ <svg
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={15}
+ style={Object {}}
+ width={15}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <StyledIcon
+ className="star"
+ icon="test-file-stub"
+ key="1"
+ size={15}
+ >
+ <Icon
+ aria-hidden={true}
+ className="star"
+ icon="test-file-stub"
+ size={15}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={15}
+ style={Object {}}
+ width={15}
+ >
+ <svg
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={15}
+ style={Object {}}
+ width={15}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <StyledIcon
+ className="star"
+ icon="test-file-stub"
+ key="2"
+ size={15}
+ >
+ <Icon
+ aria-hidden={true}
+ className="star"
+ icon="test-file-stub"
+ size={15}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={15}
+ style={Object {}}
+ width={15}
+ >
+ <svg
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={15}
+ style={Object {}}
+ width={15}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <StyledIcon
+ className="star"
+ icon="test-file-stub"
+ key="3"
+ size={15}
+ >
+ <Icon
+ aria-hidden={true}
+ className="star"
+ icon="test-file-stub"
+ size={15}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={15}
+ style={Object {}}
+ width={15}
+ >
+ <svg
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={15}
+ style={Object {}}
+ width={15}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <StyledIcon
+ className="star"
+ icon="test-file-stub"
+ key="4"
+ size={15}
+ >
+ <Icon
+ aria-hidden={true}
+ className="star"
+ icon="test-file-stub"
+ size={15}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={15}
+ style={Object {}}
+ width={15}
+ >
+ <svg
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={15}
+ style={Object {}}
+ width={15}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ </div>
+ </EfficientyRating>
+</Provider>
+`;
diff --git a/src/components/Ecogesture/__snapshots__/SingleEcogesture.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/SingleEcogesture.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..52ff638316feb318e17e07f0229cb3a3c06cb696
--- /dev/null
+++ b/src/components/Ecogesture/__snapshots__/SingleEcogesture.spec.tsx.snap
@@ -0,0 +1,375 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SingleEcogesture component should be rendered correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <SingleEcogesture
+ match={
+ Object {
+ "params": Object {
+ "id": "ECOGESTURE0001",
+ },
+ }
+ }
+ >
+ <Component
+ displayBackArrow={true}
+ isNotKey={true}
+ titleKey="Bonhomme de neige"
+ >
+ <div
+ id="CozyBar"
+ />
+ </Component>
+ <Component
+ desktopTitleKey="Bonhomme de neige"
+ displayBackArrow={true}
+ isNotKey={true}
+ setHeaderHeight={[Function]}
+ >
+ <div
+ id="Header"
+ />
+ </Component>
+ <Component
+ height={0}
+ >
+ <div
+ id="content"
+ >
+ <div
+ className="single-ecogesture"
+ >
+ <div
+ className="icon-container"
+ />
+ <div
+ className="details"
+ >
+ <div
+ className="efficiency"
+ >
+ <span
+ className="text text-14-normal"
+ >
+ ecogesture_modal.efficiency
+ </span>
+ <Component
+ result={4}
+ >
+ <div
+ id="EfficientyRating"
+ />
+ </Component>
+ </div>
+ </div>
+ <div
+ className="styled-container"
+ >
+ <div
+ className="long-name"
+ >
+ Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.
+ </div>
+ <div
+ className="description text-16-normal-150"
+ >
+ On se demande parfois si cela vaut le coup de "couper le chauffage" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…
+ </div>
+ <div
+ className="toggle-text text-15-normal"
+ onClick={[Function]}
+ >
+ ecogesture_modal.show_more
+ </div>
+ </div>
+ <div
+ className="buttons-selection"
+ >
+ <WithStyles(ForwardRef(IconButton))
+ aria-label="ecogesture.objective"
+ classes={
+ Object {
+ "label": "text-15-normal",
+ "root": "btn-secondary-negative objective-btn false",
+ }
+ }
+ onClick={[Function]}
+ >
+ <ForwardRef(IconButton)
+ aria-label="ecogesture.objective"
+ classes={
+ Object {
+ "colorInherit": "MuiIconButton-colorInherit",
+ "colorPrimary": "MuiIconButton-colorPrimary",
+ "colorSecondary": "MuiIconButton-colorSecondary",
+ "disabled": "Mui-disabled",
+ "edgeEnd": "MuiIconButton-edgeEnd",
+ "edgeStart": "MuiIconButton-edgeStart",
+ "label": "MuiIconButton-label text-15-normal",
+ "root": "MuiIconButton-root btn-secondary-negative objective-btn false",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="ecogesture.objective"
+ centerRipple={true}
+ className="MuiIconButton-root btn-secondary-negative objective-btn false"
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="ecogesture.objective"
+ centerRipple={true}
+ className="MuiIconButton-root btn-secondary-negative objective-btn false"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <button
+ aria-label="ecogesture.objective"
+ className="MuiButtonBase-root MuiIconButton-root btn-secondary-negative objective-btn false"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={0}
+ type="button"
+ >
+ <span
+ className="MuiIconButton-label text-15-normal"
+ >
+ <Icon
+ className="status-icon"
+ icon="test-file-stub"
+ size={40}
+ spin={false}
+ >
+ <Component
+ className="status-icon styles__icon___23x3R"
+ height={40}
+ style={Object {}}
+ width={40}
+ >
+ <svg
+ className="status-icon styles__icon___23x3R"
+ height={40}
+ style={Object {}}
+ width={40}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ <span>
+ ecogesture.objective
+ </span>
+ </span>
+ <NoSsr>
+ <WithStyles(memo)
+ center={true}
+ >
+ <ForwardRef(TouchRipple)
+ center={true}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </NoSsr>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(IconButton)>
+ </WithStyles(ForwardRef(IconButton))>
+ <WithStyles(ForwardRef(IconButton))
+ aria-label="ecogesture.doing"
+ classes={
+ Object {
+ "label": "text-15-normal",
+ "root": "btn-secondary-negative doing-btn false",
+ }
+ }
+ onClick={[Function]}
+ >
+ <ForwardRef(IconButton)
+ aria-label="ecogesture.doing"
+ classes={
+ Object {
+ "colorInherit": "MuiIconButton-colorInherit",
+ "colorPrimary": "MuiIconButton-colorPrimary",
+ "colorSecondary": "MuiIconButton-colorSecondary",
+ "disabled": "Mui-disabled",
+ "edgeEnd": "MuiIconButton-edgeEnd",
+ "edgeStart": "MuiIconButton-edgeStart",
+ "label": "MuiIconButton-label text-15-normal",
+ "root": "MuiIconButton-root btn-secondary-negative doing-btn false",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="ecogesture.doing"
+ centerRipple={true}
+ className="MuiIconButton-root btn-secondary-negative doing-btn false"
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="ecogesture.doing"
+ centerRipple={true}
+ className="MuiIconButton-root btn-secondary-negative doing-btn false"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <button
+ aria-label="ecogesture.doing"
+ className="MuiButtonBase-root MuiIconButton-root btn-secondary-negative doing-btn false"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={0}
+ type="button"
+ >
+ <span
+ className="MuiIconButton-label text-15-normal"
+ >
+ <Icon
+ className="status-icon"
+ icon="test-file-stub"
+ size={40}
+ spin={false}
+ >
+ <Component
+ className="status-icon styles__icon___23x3R"
+ height={40}
+ style={Object {}}
+ width={40}
+ >
+ <svg
+ className="status-icon styles__icon___23x3R"
+ height={40}
+ style={Object {}}
+ width={40}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ <span>
+ ecogesture.doing
+ </span>
+ </span>
+ <NoSsr>
+ <WithStyles(memo)
+ center={true}
+ >
+ <ForwardRef(TouchRipple)
+ center={true}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </NoSsr>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(IconButton)>
+ </WithStyles(ForwardRef(IconButton))>
+ </div>
+ </div>
+ </div>
+ </Component>
+ </SingleEcogesture>
+</Provider>
+`;
diff --git a/src/components/Ecogesture/singleEcogesture.scss b/src/components/Ecogesture/singleEcogesture.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f4a84f86c3765e674f1bdc6fb695128251b8687a
--- /dev/null
+++ b/src/components/Ecogesture/singleEcogesture.scss
@@ -0,0 +1,112 @@
+@import 'src/styles/base/color';
+
+.single-ecogesture {
+ color: $grey-bright;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 1rem 1.2rem;
+ .icon-container {
+ margin: auto;
+ max-width: 250px;
+ height: 250px;
+ width: 100%;
+ display: flex;
+ .icon-big {
+ margin: auto;
+ }
+ }
+ .details {
+ .efficiency {
+ display: flex;
+ text-align: center;
+ margin: auto;
+ .text {
+ margin-right: 0.7rem;
+ }
+ }
+ }
+ .styled-container {
+ line-height: 150%;
+ background: radial-gradient(
+ 60.65% 30.62% at 50% 3.13%,
+ #2a2b30 0%,
+ #1b1c22 100%
+ );
+ border: 3px solid $blue-40;
+ padding: 1.5rem 0.6rem;
+ border-radius: 50px 1px 50px 1px;
+ margin: 1.5rem 0 1rem;
+ max-width: 500px;
+ .long-name {
+ text-align: center;
+ font-weight: bold;
+ color: white;
+ }
+ .description {
+ display: none;
+ margin: 0.5rem;
+ text-align: left;
+ }
+ .block {
+ display: block !important;
+ }
+ .toggle-text {
+ text-align: center;
+ text-decoration: underline;
+ margin-top: 1rem;
+ cursor: pointer;
+ }
+ }
+ .buttons-selection {
+ display: flex;
+ width: 100%;
+ justify-content: center;
+ button.btn-secondary-negative {
+ height: 45px;
+ max-width: 160px;
+ width: 100%;
+ border-radius: 4px;
+ }
+ .objective-btn {
+ margin-right: 0.5rem;
+ span {
+ color: $grey-bright;
+ }
+ &.active {
+ background: radial-gradient(
+ 105.25% 64.58% at 49.68% 70.83%,
+ rgba(12, 44, 91, 0.5) 0%,
+ rgba(255, 255, 255, 0) 100%
+ ),
+ #4470b3;
+ border-color: transparent;
+ span {
+ color: white;
+ }
+ }
+ }
+ .doing-btn {
+ span {
+ color: $grey-bright;
+ }
+ &.active {
+ background: radial-gradient(
+ 105.25% 64.58% at 49.68% 70.83%,
+ rgba(41, 87, 33, 0.5) 0%,
+ rgba(255, 255, 255, 0) 100%
+ ),
+ #21a90b;
+ border-color: transparent;
+ span {
+ color: white;
+ }
+ }
+ }
+ .MuiIconButton-label {
+ justify-content: flex-start;
+ color: white;
+ }
+ }
+}
diff --git a/src/components/Header/CozyBar.tsx b/src/components/Header/CozyBar.tsx
index cfa24d38dca8edf58d4d6d04a9af1f00c398ef28..fa14912e2d9559517ef9ce6ed659cce759c4aa9e 100644
--- a/src/components/Header/CozyBar.tsx
+++ b/src/components/Header/CozyBar.tsx
@@ -17,12 +17,14 @@ interface CozyBarProps {
titleKey?: string
displayBackArrow?: boolean
isBuilding?: boolean
+ isNotKey?: boolean
}
const CozyBar = ({
titleKey = 'common.title_app',
displayBackArrow = false,
isBuilding,
+ isNotKey,
}: CozyBarProps) => {
const { t } = useI18n()
const history = useHistory()
@@ -57,11 +59,15 @@ const CozyBar = ({
{isBuilding ? (
<>
<Icon icon={HammerLeft} size={17} />
- <span className="app-title isBuilding">{t(titleKey)}</span>
+ <span className="app-title isBuilding">
+ {isNotKey ? titleKey : t(titleKey)}
+ </span>
<Icon icon={HammerRight} size={17} />
</>
) : (
- <span className="app-title">{t(titleKey)}</span>
+ <span className="app-title">
+ {isNotKey ? titleKey : t(titleKey)}
+ </span>
)}
</div>
</BarCenter>
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index b8ea60d70de0d180bd59ed48e142b0eab31967d2..85bdd9e7cd7afd0372b5ed083e87c3c2b9befb57 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -22,6 +22,7 @@ interface HeaderProps {
children?: React.ReactNode
setHeaderHeight(height: number): void
isBuilding?: boolean
+ isNotKey?: boolean
}
const Header: React.FC<HeaderProps> = ({
@@ -31,6 +32,7 @@ const Header: React.FC<HeaderProps> = ({
children,
setHeaderHeight,
isBuilding,
+ isNotKey,
}: HeaderProps) => {
const { t } = useI18n()
const history = useHistory()
@@ -82,7 +84,7 @@ const Header: React.FC<HeaderProps> = ({
: 'text-22-bold'
}`}
>
- {t(textKey)}
+ {isNotKey ? textKey : t(textKey)}
</div>
)}
{desktopTitleKey && (
@@ -112,7 +114,7 @@ const Header: React.FC<HeaderProps> = ({
</div>
</>
) : (
- <span>{t(desktopTitleKey)}</span>
+ <span>{isNotKey ? desktopTitleKey : t(desktopTitleKey)}</span>
)}
</div>
)}
diff --git a/src/components/Routes/Routes.tsx b/src/components/Routes/Routes.tsx
index 223eeaaa71a8b89dd406dfca26af6043aff8183c..76ce704b67bd22b59be4853190110ea818df6ef9 100644
--- a/src/components/Routes/Routes.tsx
+++ b/src/components/Routes/Routes.tsx
@@ -15,6 +15,9 @@ const ConsumptionView = lazy(() => import('components/Home/ConsumptionView'))
const EcogestureView = lazy(() =>
import('components/Ecogesture/EcogestureView')
)
+const SingleEcogesture = lazy(() =>
+ import('components/Ecogesture/SingleEcogesture')
+)
const OptionsView = lazy(() => import('components/Options/OptionsView'))
const FAQView = lazy(() => import('components/FAQ/FAQView'))
const LegalNoticeView = lazy(() =>
@@ -60,6 +63,7 @@ const Routes: React.FC<RouteProps> = ({ termsStatus }: RouteProps) => {
<Route path={`/challenges/action`} exact component={ActionView} />
<Route path={`/challenges/`} component={ChallengeView} exact />
+ <Route path="/ecogestures/:id" component={SingleEcogesture} />
<Route path="/ecogestures" component={EcogestureView} />
<Route path={'/options/FAQ'} component={FAQView} />
<Route path={`/options/legalnotice`} component={LegalNoticeView} />
diff --git a/src/components/Splash/SplashRoot.tsx b/src/components/Splash/SplashRoot.tsx
index dffc345f10c1807db27c75059ce0b012b1a8b542..f5ab859bc53f31001360059077eafa9c1e439f82 100644
--- a/src/components/Splash/SplashRoot.tsx
+++ b/src/components/Splash/SplashRoot.tsx
@@ -81,7 +81,7 @@ const SplashRoot = ({
splashEnd: false,
splashStart: false,
})
- const [error, setError] = useState<Error | null>(null)
+ const [error, setError] = useState<Error | any>(null)
const dispatch: Dispatch<
| ChallengeActionTypes
| ChartActionTypes
diff --git a/src/db/ecogestureData.json b/src/db/ecogestureData.json
index a3d584127e2eb57e27f70a05dd376bf6e90ec57c..72a25a2c1d153a4e747f241a26f78fe056663aea 100644
--- a/src/db/ecogestureData.json
+++ b/src/db/ecogestureData.json
@@ -17,7 +17,9 @@
"investment": null,
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0002",
@@ -37,7 +39,9 @@
"investment": null,
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0003",
@@ -57,7 +61,9 @@
"investment": null,
"action": true,
"actionName": "Je ferme les portes entre les pièces chauffées et moins chauffées.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0004",
@@ -77,7 +83,9 @@
"investment": null,
"action": true,
"actionName": "Je coupe l'eau de la douche pendant que je me savonne.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0005",
@@ -97,7 +105,9 @@
"investment": null,
"action": true,
"actionName": "Je ferme l’eau du robinet quand je me lave les dents.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0006",
@@ -117,7 +127,9 @@
"investment": null,
"action": true,
"actionName": "Je mets mon ordinateur en veille automatique au bout de 5/10min d'inactivité.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0007",
@@ -137,7 +149,9 @@
"investment": null,
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0008",
@@ -157,7 +171,9 @@
"investment": "Couvercle",
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0009",
@@ -177,7 +193,9 @@
"investment": null,
"action": true,
"actionName": "Je dépoussière mes radiateurs.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0010",
@@ -197,7 +215,9 @@
"investment": null,
"action": true,
"actionName": "Je me lave les mains uniquement à l'eau froide.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0011",
@@ -217,7 +237,9 @@
"investment": null,
"action": true,
"actionName": "Je rince ma vaisselle à l'eau froide.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0012",
@@ -237,7 +259,9 @@
"investment": null,
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0013",
@@ -257,7 +281,9 @@
"investment": null,
"action": true,
"actionName": "J’utilise le cycle court à basse température pour laver le linge et la vaisselle.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0014",
@@ -277,7 +303,9 @@
"investment": null,
"action": true,
"actionName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0015",
@@ -297,7 +325,9 @@
"investment": null,
"action": true,
"actionName": "Je remets systématiquement mes mitigeurs sur la position la plus froide.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0016",
@@ -317,7 +347,9 @@
"investment": null,
"action": true,
"actionName": "J’éteins systématiquement les lumières quand je sors d’une pièce.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0017",
@@ -337,7 +369,9 @@
"investment": null,
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0018",
@@ -357,7 +391,9 @@
"investment": null,
"action": true,
"actionName": "Je remplis complètement ma machine à laver et/ou mon lave-vaisselle avant de les faire tourner.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0019",
@@ -377,7 +413,9 @@
"investment": null,
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0020",
@@ -397,7 +435,9 @@
"investment": null,
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0021",
@@ -417,7 +457,9 @@
"investment": null,
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0022",
@@ -437,7 +479,9 @@
"investment": null,
"action": true,
"actionName": "Je nettoie le filtre de ma machine à laver.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0023",
@@ -457,7 +501,9 @@
"investment": "Vinaigre blanc ou produit de détartrage",
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0024",
@@ -477,7 +523,9 @@
"investment": null,
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0025",
@@ -497,7 +545,9 @@
"investment": null,
"action": true,
"actionName": "Je nettoie mes ampoules et luminaires.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0026",
@@ -517,7 +567,9 @@
"investment": null,
"action": true,
"actionName": "J’ouvre mes rideaux et mes volets dès qu’il fait jour et privilégie les apports de lumière naturelle.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0027",
@@ -537,7 +589,9 @@
"investment": null,
"action": true,
"actionName": "Je débranche mes chargeurs quand ils ne sont pas en fonctionnement.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0028",
@@ -557,7 +611,9 @@
"investment": null,
"action": true,
"actionName": "Je réfléchis à ce que je vais prendre avant d’ouvrir la porte de mon appareil de froid.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0029",
@@ -577,7 +633,9 @@
"investment": null,
"action": true,
"actionName": "J'adapte le programme d'essorage de ma machine à laver au type de linge.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0030",
@@ -597,7 +655,9 @@
"investment": null,
"action": true,
"actionName": "J’optimise le rangement dans mon réfrigérateur et/ou congélateur.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0031",
@@ -617,7 +677,9 @@
"investment": null,
"action": true,
"actionName": "Je décide de baisser de 2 °C la température de chauffage de mes pièces.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0032",
@@ -637,7 +699,9 @@
"investment": "Thermostat (d’ambiance)",
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0033",
@@ -657,7 +721,9 @@
"investment": "Thermostat d’ambiance",
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0034",
@@ -677,7 +743,9 @@
"investment": null,
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0035",
@@ -697,7 +765,9 @@
"investment": null,
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0036",
@@ -717,7 +787,9 @@
"investment": null,
"action": true,
"actionName": "Je met mon chauffage en mode réduit pendant la nuit ou pendant mon absence.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0037",
@@ -737,7 +809,9 @@
"investment": null,
"action": true,
"actionName": "Je décide de baisser d'1 °C la température de chauffage de mes pièces.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0038",
@@ -757,7 +831,9 @@
"investment": null,
"action": true,
"actionName": "Je ne chauffe que les pièces de vie (salon, cuisine, …)",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0039",
@@ -777,7 +853,9 @@
"investment": "Boudins de portes",
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0040",
@@ -797,7 +875,9 @@
"investment": null,
"action": true,
"actionName": "Je prends des douches de moins de 5 minutes.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0041",
@@ -817,7 +897,9 @@
"investment": "Eco mousseur",
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0042",
@@ -837,7 +919,9 @@
"investment": "Eco mousseur",
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0043",
@@ -857,7 +941,9 @@
"investment": null,
"action": true,
"actionName": "Je conserve au maximum la fraicheur de mon logement en fermant les volets et fenêtres quand je m’absente pendant la journée.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0044",
@@ -877,7 +963,9 @@
"investment": null,
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0045",
@@ -897,7 +985,9 @@
"investment": "Seau/ Bac de récupération",
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0046",
@@ -917,7 +1007,9 @@
"investment": null,
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0047",
@@ -937,7 +1029,9 @@
"investment": null,
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0048",
@@ -957,7 +1051,9 @@
"investment": "Multiprise avec interrupteur marche/arrêt",
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0049",
@@ -977,7 +1073,9 @@
"investment": null,
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0050",
@@ -997,7 +1095,9 @@
"investment": null,
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0051",
@@ -1017,7 +1117,9 @@
"investment": null,
"action": true,
"actionName": "Je diminue la luminosité de mon écran d’ordinateur tout en conservant un confort de vue.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0052",
@@ -1037,7 +1139,9 @@
"investment": "Etendage",
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0053",
@@ -1057,7 +1161,9 @@
"investment": "Multiprise avec interrupteur marche/arrêt",
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0054",
@@ -1077,7 +1183,9 @@
"investment": "Ampoules basses consommation",
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0055",
@@ -1097,7 +1205,9 @@
"investment": null,
"action": true,
"actionName": "Je remplis mon congélateur, je ne surcharge pas mon réfrigérateur.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0056",
@@ -1117,7 +1227,9 @@
"investment": "un bac à vaiselle",
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0057",
@@ -1137,7 +1249,9 @@
"investment": null,
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0058",
@@ -1157,7 +1271,9 @@
"investment": null,
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0059",
@@ -1177,7 +1293,9 @@
"investment": "-",
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0060",
@@ -1197,7 +1315,9 @@
"investment": null,
"action": true,
"actionName": "Je dégivre mon réfrigérateur et/ou congélateur.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0061",
@@ -1217,7 +1337,9 @@
"investment": "Thermomètre",
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0062",
@@ -1237,7 +1359,9 @@
"investment": null,
"action": true,
"actionName": "Je nettoie la grille arrière de mon réfrigérateur.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0063",
@@ -1257,7 +1381,9 @@
"investment": null,
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0064",
@@ -1277,7 +1403,9 @@
"investment": null,
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0065",
@@ -1297,7 +1425,9 @@
"investment": "Volet/Rideau",
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0066",
@@ -1317,7 +1447,9 @@
"investment": "Faire appel à un pro",
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0067",
@@ -1337,7 +1469,9 @@
"investment": null,
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0068",
@@ -1357,7 +1491,9 @@
"investment": "Faire appel à un pro",
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0069",
@@ -1377,7 +1513,9 @@
"investment": null,
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0070",
@@ -1397,7 +1535,9 @@
"investment": "Faire appel à un pro",
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0071",
@@ -1417,7 +1557,9 @@
"investment": "Panneau réfléchissant",
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0072",
@@ -1437,7 +1579,9 @@
"investment": "Isolant",
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0073",
@@ -1457,7 +1601,9 @@
"investment": "Faire appel à un pro",
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0074",
@@ -1477,7 +1623,9 @@
"investment": "Chasse d’eau à double vitesse: à faire si travaux",
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0075",
@@ -1497,7 +1645,9 @@
"investment": null,
"action": true,
"actionName": "Je décide de supprimer une douche pendant la durée du défi.",
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0076",
@@ -1517,7 +1667,9 @@
"investment": null,
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
},
{
"_id": "ECOGESTURE0077",
@@ -1537,6 +1689,8 @@
"investment": "Travaux de décoration",
"action": false,
"actionName": null,
- "actionDuration": 3
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false
}
]
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 9c1b62804a3bf55c9c44f19de5ba0967c75516c1..25da55c7720cc28e96ce0276024891df96ab9088 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -376,7 +376,9 @@
},
"accessibility": {
"button_go_to_profil": "Aller à la page de profil"
- }
+ },
+ "doing": "Je fais déjà",
+ "objective": "Objectif"
},
"ecogesture_modal": {
"title_ecogesture": "Écogeste",
@@ -423,6 +425,11 @@
"button_start": "Lancer l'exploration"
}
},
+ "error_page": {
+ "main": "Erreur",
+ "back": "Retour",
+ "no_ecogesture": "Oups ! Nous n'avons pas trouvé l'écogeste demandé."
+ },
"faq": {
"title_faq": "Foire aux questions",
"read_faq": "Lire la FAQ",
diff --git a/src/models/ecogesture.model.ts b/src/models/ecogesture.model.ts
index ef3fbfc276a19b36cbe21dff82853fc223db1e69..07d86ad5334011eecf014b616d0a2be7f58f84ca 100644
--- a/src/models/ecogesture.model.ts
+++ b/src/models/ecogesture.model.ts
@@ -20,6 +20,8 @@ export interface Ecogesture {
action: boolean
actionName: string | null
actionDuration: number
+ objective: boolean
+ doing: boolean
_id: string
_rev?: string
_type?: string
diff --git a/src/services/ecogesture.service.spec.ts b/src/services/ecogesture.service.spec.ts
index 3d3aaef11f87549b63000ffbf6ff98cbe60e806c..0647b039ec245f7fdf8ba2eae49ae33bba8c24f2 100644
--- a/src/services/ecogesture.service.spec.ts
+++ b/src/services/ecogesture.service.spec.ts
@@ -249,4 +249,16 @@ describe('Ecogesture service', () => {
})
})
})
+
+ it('should update an ecogesture', async () => {
+ const mockQueryResult: QueryResult<Ecogesture> = {
+ data: ecogesturesData[0],
+ bookmark: '',
+ next: false,
+ skip: 0,
+ }
+ mockClient.save.mockResolvedValueOnce(mockQueryResult)
+ const result = await ecogestureService.updateEcogesture(ecogesturesData[0])
+ expect(result).toEqual(ecogesturesData[0])
+ })
})
diff --git a/src/services/ecogesture.service.ts b/src/services/ecogesture.service.ts
index bc1eb9018e26d8ce6ee617d9e94908e479ee71b2..5ce03fe1e1896ee8bd0429fad19a2ea7cdfbf8df 100644
--- a/src/services/ecogesture.service.ts
+++ b/src/services/ecogesture.service.ts
@@ -14,12 +14,17 @@ export default class EcogestureService {
this._client = _client
}
- public async getAllEcogestures(seasonFilter?: Season): Promise<Ecogesture[]> {
+ public async getAllEcogestures(
+ seasonFilter?: Season,
+ orderByID?: boolean
+ ): Promise<Ecogesture[]> {
let query: QueryDefinition = Q(ECOGESTURE_DOCTYPE)
if (seasonFilter && seasonFilter !== Season.NONE) {
query = query
.where({ season: { $ne: seasonFilter } })
.sortBy([{ season: 'desc' }])
+ } else if (orderByID) {
+ query = query.where({}).sortBy([{ _id: 'asc' }])
} else {
query = query.where({}).sortBy([{ season: 'desc' }])
}
@@ -140,4 +145,15 @@ export default class EcogestureService {
)
return filteredEcogestureList
}
+ /**
+ * Update one ecogesture
+ * @param {Ecogesture} ecogesture - Ecogesture to save
+ * @returns {Ecogesture} Udpated Ecogesture
+ */
+ public async updateEcogesture(ecogesture: Ecogesture): Promise<Ecogesture> {
+ const {
+ data: updatedEcogesture,
+ }: QueryResult<Ecogesture> = await this._client.save(ecogesture)
+ return updatedEcogesture
+ }
}
diff --git a/src/services/initialization.service.ts b/src/services/initialization.service.ts
index e01aae8adf5df37f3f18d05fdeafab3f722c1083..bab9fda86d42bc62ad07ec2bfde315ec921e0b30 100644
--- a/src/services/initialization.service.ts
+++ b/src/services/initialization.service.ts
@@ -200,7 +200,10 @@ export default class InitializationService {
const hashEcogestureType = hashFile(ecogestureData)
const ecogestureService = new EcogestureService(this._client)
// Populate data if none ecogesture exists
- const loadedEcogestures = await ecogestureService.getAllEcogestures()
+ const loadedEcogestures = await ecogestureService.getAllEcogestures(
+ undefined,
+ true
+ )
if (
!loadedEcogestures ||
(loadedEcogestures && loadedEcogestures.length === 0)
@@ -220,23 +223,30 @@ export default class InitializationService {
'initEcogesture: Created ecogesture type entities does not match'
)
}
- log.info('[Initialization] Ecogesture created')
+ log.info('[Initialization] Ecogesture list created')
return hashEcogestureType
} catch (error) {
log.error('Initialization error - initEcogesture: ', error)
throw error
}
}
-
// Update if the hash is not the same as the one from profile
if (hash !== hashEcogestureType) {
// Update the doctype
try {
+ loadedEcogestures
// Deletion of all documents
await ecogestureService.deleteAllEcogestures()
// Population with the data
- for (const ecogesture of ecogestureData) {
- await this._client.create(ECOGESTURE_DOCTYPE, ecogesture)
+ for (const [index, ecogesture] of ecogestureData.entries()) {
+ const updateEcogesture = loadedEcogestures[index]
+ ? {
+ ...ecogesture,
+ objective: loadedEcogestures[index].objective ? true : false,
+ doing: loadedEcogestures[index].doing ? true : false,
+ }
+ : ecogesture
+ await this._client.create(ECOGESTURE_DOCTYPE, updateEcogesture)
}
// Check of created document based on count
const checkCount = await ecogestureService.getAllEcogestures()
@@ -256,7 +266,7 @@ export default class InitializationService {
}
} else {
// Doctype already up to date
- log.info('[Initialization] Ecogesture loaded')
+ log.info('[Initialization] Ecogesture already up-to-date')
return hashEcogestureType
}
}
diff --git a/src/utils/hash.spec.ts b/src/utils/hash.spec.ts
index 22f9a2b752a88d26f31f827d475446faf04c4a21..123acfaa7a018c37fa4b3ba382a0bd924694ea08 100644
--- a/src/utils/hash.spec.ts
+++ b/src/utils/hash.spec.ts
@@ -5,7 +5,7 @@ describe('hash utilis test', () => {
describe('hashFile test', () => {
it('should return the correct hash of the file', () => {
const result = hashFile(ecogesturesData)
- expect(result).toBe('8360d4805f19a732e6b43a41f972c324c8e06488')
+ expect(result).toBe('18e0ab48244aa3aad6ff70ffb972ac76fda315f4')
})
})
})
diff --git a/tests/__mocks__/actionData.mock.ts b/tests/__mocks__/actionData.mock.ts
index 65c0a353861dc1f07e6500257f03fa920ef38f93..d4c4ba2af35250894a3410e61850297789baec4e 100644
--- a/tests/__mocks__/actionData.mock.ts
+++ b/tests/__mocks__/actionData.mock.ts
@@ -24,6 +24,8 @@ export const defaultEcogestureData: Ecogesture[] = [
action: true,
actionName: "Je me lave les mains uniquement à l'eau froide.",
actionDuration: 3,
+ doing: false,
+ objective: false,
},
{
_id: 'ECOGESTURE0014',
@@ -49,6 +51,8 @@ export const defaultEcogestureData: Ecogesture[] = [
actionName:
'J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.',
actionDuration: 3,
+ doing: false,
+ objective: false,
},
{
id: 'ECOGESTURE0030',
@@ -73,6 +77,8 @@ export const defaultEcogestureData: Ecogesture[] = [
actionName:
'J’optimise le rangement dans mon réfrigérateur et/ou congélateur.',
actionDuration: 3,
+ doing: false,
+ objective: false,
},
]
@@ -97,6 +103,8 @@ export const ecogestureDefault: Ecogesture = {
action: true,
actionName: "Je me lave les mains uniquement à l'eau froide.",
actionDuration: 3,
+ doing: false,
+ objective: false,
}
export const AllEcogestureData: Ecogesture[] = [
@@ -122,6 +130,8 @@ export const AllEcogestureData: Ecogesture[] = [
action: false,
actionName: null,
actionDuration: 3,
+ doing: false,
+ objective: false,
},
{
_id: 'ECOGESTURE0002',
@@ -144,6 +154,8 @@ export const AllEcogestureData: Ecogesture[] = [
action: false,
actionName: null,
actionDuration: 3,
+ doing: false,
+ objective: false,
},
{
_id: 'ECOGESTURE0003',
@@ -168,6 +180,8 @@ export const AllEcogestureData: Ecogesture[] = [
actionName:
'Je ferme les portes entre les pièces chauffées et moins chauffées.',
actionDuration: 3,
+ doing: false,
+ objective: false,
},
{
_id: 'ECOGESTURE0004',
@@ -190,6 +204,8 @@ export const AllEcogestureData: Ecogesture[] = [
action: true,
actionName: "Je coupe l'eau de la douche pendant que je me savonne.",
actionDuration: 3,
+ doing: false,
+ objective: false,
},
{
_id: 'ECOGESTURE0005',
@@ -212,6 +228,8 @@ export const AllEcogestureData: Ecogesture[] = [
action: true,
actionName: 'Je ferme l’eau du robinet quand je me lave les dents.',
actionDuration: 3,
+ doing: false,
+ objective: false,
},
{
_id: 'ECOGESTURE0006',
@@ -234,5 +252,7 @@ export const AllEcogestureData: Ecogesture[] = [
action: true,
actionName: 'Je dépoussière mes radiateurs.',
actionDuration: 3,
+ doing: false,
+ objective: false,
},
]
diff --git a/tests/__mocks__/ecogesturesData.mock.ts b/tests/__mocks__/ecogesturesData.mock.ts
index 7b055ffe213bfc903d1056966f33e9097284f00e..dd9605dd532993d13a153238ed197edd06ed7305 100644
--- a/tests/__mocks__/ecogesturesData.mock.ts
+++ b/tests/__mocks__/ecogesturesData.mock.ts
@@ -24,6 +24,8 @@ export const ecogesturesData: Ecogesture[] = [
action: false,
actionName: null,
actionDuration: 3,
+ doing: false,
+ objective: false,
_id: 'ECOGESTURE001',
_rev: '1-67f1ea36efdd892c96bf64a8943154cd',
_type: 'com.grandlyon.ecolyo.ecogesture',
@@ -48,6 +50,8 @@ export const ecogesturesData: Ecogesture[] = [
action: false,
actionName: null,
actionDuration: 3,
+ doing: false,
+ objective: false,
_id: 'ECOGESTURE002',
_rev: '1-ef7ddd778254e3b7d331a88fd17f606d',
@@ -75,6 +79,8 @@ export const ecogesturesData: Ecogesture[] = [
actionName:
'J’utilise le cycle court à basse température pour laver le linge et la vaisselle.',
actionDuration: 3,
+ doing: false,
+ objective: false,
_id: 'ECOGESTURE0013',
_rev: '1-0b2761dd4aef79556c7aef144060fde6',
_type: 'com.grandlyon.ecolyo.ecogesture',
@@ -103,6 +109,8 @@ export const ecogesturesHeatingData: Ecogesture[] = [
action: false,
actionName: null,
actionDuration: 3,
+ doing: false,
+ objective: false,
_id: 'ECOGESTURE001',
_rev: '1-67f1ea36efdd892c96bf64a8943154cd',
_type: 'com.grandlyon.ecolyo.ecogesture',
@@ -127,6 +135,8 @@ export const ecogesturesHeatingData: Ecogesture[] = [
action: false,
actionName: null,
actionDuration: 3,
+ doing: false,
+ objective: false,
_id: 'ECOGESTURE002',
_rev: '1-ef7ddd778254e3b7d331a88fd17f606d',
_type: 'com.grandlyon.ecolyo.ecogesture',
@@ -153,7 +163,8 @@ export const ecogesturesHeatingData: Ecogesture[] = [
actionName:
'J’utilise le cycle court à basse température pour laver le linge et la vaisselle.',
actionDuration: 3,
-
+ doing: false,
+ objective: false,
_id: 'ECOGESTURE0013',
_rev: '1-0b2761dd4aef79556c7aef144060fde6',
_type: 'com.grandlyon.ecolyo.ecogesture',
@@ -182,6 +193,8 @@ export const ecogesturesECSData: Ecogesture[] = [
action: false,
actionName: null,
actionDuration: 3,
+ doing: false,
+ objective: false,
_id: 'ECOGESTURE001',
_rev: '1-67f1ea36efdd892c96bf64a8943154cd',
_type: 'com.grandlyon.ecolyo.ecogesture',
@@ -206,6 +219,8 @@ export const ecogesturesECSData: Ecogesture[] = [
action: false,
actionName: null,
actionDuration: 3,
+ doing: false,
+ objective: false,
_id: 'ECOGESTURE002',
_rev: '1-ef7ddd778254e3b7d331a88fd17f606d',
_type: 'com.grandlyon.ecolyo.ecogesture',
@@ -233,7 +248,8 @@ export const ecogesturesECSData: Ecogesture[] = [
actionName:
'J’utilise le cycle court à basse température pour laver le linge et la vaisselle.',
actionDuration: 3,
-
+ doing: false,
+ objective: false,
_id: 'ECOGESTURE0013',
_rev: '1-0b2761dd4aef79556c7aef144060fde6',
_type: 'com.grandlyon.ecolyo.ecogesture',
@@ -262,6 +278,8 @@ export const ecogesturesCookingData: Ecogesture[] = [
action: false,
actionName: null,
actionDuration: 3,
+ doing: false,
+ objective: false,
_id: '001',
_rev: '1-67f1ea36efdd892c96bf64a8943154cd',
_type: 'com.grandlyon.ecolyo.ecogesture',
@@ -286,7 +304,8 @@ export const ecogesturesCookingData: Ecogesture[] = [
action: false,
actionName: null,
actionDuration: 3,
-
+ doing: false,
+ objective: false,
_id: '002',
_rev: '1-ef7ddd778254e3b7d331a88fd17f606d',
_type: 'com.grandlyon.ecolyo.ecogesture',
@@ -313,6 +332,8 @@ export const ecogesturesCookingData: Ecogesture[] = [
actionName:
'J’utilise le cycle court à basse température pour laver le linge et la vaisselle.',
actionDuration: 3,
+ doing: false,
+ objective: false,
_id: '0013',
_rev: '1-0b2761dd4aef79556c7aef144060fde6',
_type: 'com.grandlyon.ecolyo.ecogesture',
@@ -339,6 +360,8 @@ export const ecogesturesCookingData: Ecogesture[] = [
actionName:
'J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.',
actionDuration: 3,
+ doing: false,
+ objective: false,
_id: '0014',
_rev: '1-0b2761dd4aef79556c7aef144060fde6',
_type: 'com.grandlyon.ecolyo.ecogesture',
@@ -367,6 +390,8 @@ export const ecogesturesElecSpecificData: Ecogesture[] = [
action: false,
actionName: null,
actionDuration: 3,
+ doing: false,
+ objective: false,
_id: '001',
_rev: '1-67f1ea36efdd892c96bf64a8943154cd',
_type: 'com.grandlyon.ecolyo.ecogesture',
@@ -391,6 +416,8 @@ export const ecogesturesElecSpecificData: Ecogesture[] = [
action: false,
actionName: null,
actionDuration: 3,
+ doing: false,
+ objective: false,
_id: '002',
_rev: '1-ef7ddd778254e3b7d331a88fd17f606d',
_type: 'com.grandlyon.ecolyo.ecogesture',
@@ -417,6 +444,8 @@ export const ecogesturesElecSpecificData: Ecogesture[] = [
actionName:
'J’utilise le cycle court à basse température pour laver le linge et la vaisselle.',
actionDuration: 3,
+ doing: false,
+ objective: false,
_id: '0013',
_rev: '1-0b2761dd4aef79556c7aef144060fde6',
_type: 'com.grandlyon.ecolyo.ecogesture',
@@ -445,6 +474,8 @@ export const ecogesturesAirConditioningData: Ecogesture[] = [
action: false,
actionName: null,
actionDuration: 3,
+ doing: false,
+ objective: false,
_id: '001',
_rev: '1-67f1ea36efdd892c96bf64a8943154cd',
_type: 'com.grandlyon.ecolyo.ecogesture',
@@ -469,6 +500,8 @@ export const ecogesturesAirConditioningData: Ecogesture[] = [
action: false,
actionName: null,
actionDuration: 3,
+ doing: false,
+ objective: false,
_id: '002',
_rev: '1-ef7ddd778254e3b7d331a88fd17f606d',
_type: 'com.grandlyon.ecolyo.ecogesture',
@@ -495,7 +528,8 @@ export const ecogesturesAirConditioningData: Ecogesture[] = [
actionName:
'J’utilise le cycle court à basse température pour laver le linge et la vaisselle.',
actionDuration: 3,
-
+ doing: false,
+ objective: false,
_id: '0013',
_rev: '1-0b2761dd4aef79556c7aef144060fde6',
_type: 'com.grandlyon.ecolyo.ecogesture',
@@ -524,7 +558,8 @@ export const ecogesturesColdWaterData: Ecogesture[] = [
action: false,
actionName: null,
actionDuration: 3,
-
+ doing: false,
+ objective: false,
_id: '001',
_rev: '1-67f1ea36efdd892c96bf64a8943154cd',
_type: 'com.grandlyon.ecolyo.ecogesture',
@@ -549,6 +584,8 @@ export const ecogesturesColdWaterData: Ecogesture[] = [
action: false,
actionName: null,
actionDuration: 3,
+ doing: false,
+ objective: false,
_id: '002',
_rev: '1-ef7ddd778254e3b7d331a88fd17f606d',
_type: 'com.grandlyon.ecolyo.ecogesture',