diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 62e78fc20f4b8284eaf94de21135d48f6cfc6e9f..03ac42282f60c8799d01ced29c9ac7e57339e3e6 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -8,6 +8,7 @@
"dbaeumer.vscode-eslint",
"andrejunges.handlebars",
"streetsidesoftware.code-spell-checker",
- "streetsidesoftware.code-spell-checker-french"
+ "streetsidesoftware.code-spell-checker-french",
+ "firsttris.vscode-jest-runner"
]
}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index fbc97f689216d9dce3d5a097363a0b93fce1b815..dd0f845a1bc56c0881b4c626d43d2205efadeb7e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,26 @@
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+## [2.5.0](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/compare/v2.4.0...v2.5.0) (2023-06-29)
+
+
+### Features
+
+* **analysis:** add graph to max consumption component ([63a0b5e](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/63a0b5e46bd9ef849ca6fd49345cdc1c3ef96355))
+* **dju:** new data.grandlyon API version ([5cfdae8](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/5cfdae826cd826ca1e0b0eef26b43304e4721417))
+* **export:** include max power ([8e5e1eb](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/8e5e1eb29a54200af43780bdc7ae9af652e9ae8d))
+
+
+### Bug Fixes
+
+* **challenge:** card not fully displayed ([fb51d6d](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/fb51d6d199793db70a01d916851800d695ebfb27))
+* cleanup useEffect ([2a3435a](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/2a3435ab3282f015983cb032a179906318ba5f32))
+* **ma-bulle:** cozy logo for desktop ([76b1a63](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/76b1a630199fe8ec31fa4c657ba15c6148476c04))
+* partial index warning messages ([736e304](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/736e3049e60afc4c3e855f14c15aa0893544c639))
+* **profile:** short profile pre-completed ([e03c961](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/e03c96173d070b1541359c3230e27a7d1121bb77))
+* statistics matomo ([aeada61](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/aeada610a16990d88c1b42ae73beb6415bcfd092))
+* **ui:** layout shift on conso page ([42dec43](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/42dec4390e71f251f0c0ef69d64c090007203970))
+
## [2.4.0](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/compare/v2.3.1...v2.4.0) (2023-06-01)
diff --git a/manifest.webapp b/manifest.webapp
index 52a6bc49b62dc410bbbe13049dae55ca282b66c4..f6da6f5cb4a3b4bf329198b4321fe36b8afab1f8 100644
--- a/manifest.webapp
+++ b/manifest.webapp
@@ -3,7 +3,7 @@
"slug": "ecolyo",
"icon": "icon.svg",
"categories": ["energy"],
- "version": "2.4.0",
+ "version": "2.5.0",
"licence": "AGPL-3.0",
"editor": "Métropole de Lyon",
"default_locale": "fr",
@@ -235,7 +235,7 @@
"verbs": ["GET"]
},
"ecolyo-dju": {
- "type": "org.ecolyo.dju",
+ "type": "org.ecolyo.dju_v2",
"verbs": ["GET"]
},
"dacc": {
diff --git a/package.json b/package.json
index bdf9ce7a7f1b72f029184786defdbe8d633e363a..7dcd7577725317c9352651aba2ddcd6a229df43b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "ecolyo",
- "version": "2.4.0",
+ "version": "2.5.0",
"engines": {
"node": ">=16.0.0"
},
diff --git a/src/components/Action/ActionBegin.spec.tsx b/src/components/Action/ActionBegin.spec.tsx
index 3de8d988dbd28952fe0bbaae48e5c809b48e84e8..6ea2ba74bb4a5aa6324c5b30b25a258677552b48 100644
--- a/src/components/Action/ActionBegin.spec.tsx
+++ b/src/components/Action/ActionBegin.spec.tsx
@@ -1,7 +1,7 @@
import { Button } from '@material-ui/core'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import React from 'react'
-import { act } from 'react-dom/test-utils'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import {
@@ -11,6 +11,7 @@ import {
import { mockedEcogesturesData } from '../../../tests/__mocks__/ecogesturesData.mock'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { profileData } from '../../../tests/__mocks__/profileData.mock'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
import ActionBegin from './ActionBegin'
import ActionModal from './ActionModal'
@@ -65,11 +66,8 @@ describe('ActionBegin component', () => {
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should render correctly with custom action', async () => {
mockgetCustomActions.mockResolvedValue([
@@ -94,10 +92,7 @@ describe('ActionBegin component', () => {
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find('.action-title').text()).toBe('Coup de vent')
})
it('should render chosen action ', async () => {
@@ -119,10 +114,7 @@ describe('ActionBegin component', () => {
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find(ActionBegin).exists()).toBeTruthy()
})
it('should open launch Modal ', async () => {
@@ -144,10 +136,7 @@ describe('ActionBegin component', () => {
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
wrapper.find(Button).first().simulate('click')
expect(wrapper.find(ActionModal).exists()).toBeTruthy()
expect(wrapper.find(ActionModal).prop('open')).toBeTruthy()
@@ -171,10 +160,7 @@ describe('ActionBegin component', () => {
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
wrapper.find(Button).at(1).simulate('click')
})
})
diff --git a/src/components/Action/ActionBegin.tsx b/src/components/Action/ActionBegin.tsx
index 546036e699ff8e1b973822b95b31a1655ffac714..f039432d32f51e9730e63b429b794135cfd00e86 100644
--- a/src/components/Action/ActionBegin.tsx
+++ b/src/components/Action/ActionBegin.tsx
@@ -19,7 +19,7 @@ interface ActionBeginProps {
userChallenge: UserChallenge
}
-const ActionBegin: React.FC<ActionBeginProps> = ({
+const ActionBegin = ({
action,
setShowList,
userChallenge,
diff --git a/src/components/Action/ActionCard.spec.tsx b/src/components/Action/ActionCard.spec.tsx
index db4315c17d86bb499e36897017baa0fe738c1105..2ae077fe99117ec54816805fd08b8a01da2c5620 100644
--- a/src/components/Action/ActionCard.spec.tsx
+++ b/src/components/Action/ActionCard.spec.tsx
@@ -2,12 +2,14 @@ import { Button } from '@material-ui/core'
import defaultIcon from 'assets/icons/visu/duel/default.svg'
import EcogestureModal from 'components/Ecogesture/EcogestureModal'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import React from 'react'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import { defaultEcogestureData } from '../../../tests/__mocks__/actionData.mock'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { profileData } from '../../../tests/__mocks__/profileData.mock'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
import ActionCard from './ActionCard'
@@ -32,7 +34,7 @@ jest.mock('utils/utils', () => {
}
})
describe('ActionCard component', () => {
- it('should be rendered correctly', () => {
+ it('should be rendered correctly', async () => {
const store = mockStore({
ecolyo: {
challenge: userChallengeData[1],
@@ -49,7 +51,8 @@ describe('ActionCard component', () => {
/>
</Provider>
)
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should open modal', () => {
const store = mockStore({
diff --git a/src/components/Action/ActionCard.tsx b/src/components/Action/ActionCard.tsx
index fa5299b089465c4cb35ce2093255b47ffceb2d62..9b491e035b0c55d4bd4a7484e9bf5fd38e5970ad 100644
--- a/src/components/Action/ActionCard.tsx
+++ b/src/components/Action/ActionCard.tsx
@@ -18,7 +18,7 @@ interface ActionCardProps {
setShowList: React.Dispatch<React.SetStateAction<boolean>>
}
-const ActionCard: React.FC<ActionCardProps> = ({
+const ActionCard = ({
action,
setSelectedAction,
setShowList,
diff --git a/src/components/Action/ActionChoose.spec.tsx b/src/components/Action/ActionChoose.spec.tsx
index 41a5db7fddb76e0eed26fa8cb77650eafe14b6b7..90c43e9aa9782a844c0032111c67dfda64fb671b 100644
--- a/src/components/Action/ActionChoose.spec.tsx
+++ b/src/components/Action/ActionChoose.spec.tsx
@@ -1,9 +1,11 @@
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import React from 'react'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { profileData } from '../../../tests/__mocks__/profileData.mock'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
import ActionBegin from './ActionBegin'
import ActionChoose from './ActionChoose'
@@ -29,7 +31,7 @@ jest.mock('services/ecogesture.service', () => {
const mockStore = configureStore([])
describe('ActionChoose component', () => {
- it('should render correctly', () => {
+ it('should render correctly', async () => {
const store = mockStore({
ecolyo: {
challenge: userChallengeData[1],
@@ -42,7 +44,8 @@ describe('ActionChoose component', () => {
<ActionChoose userChallenge={userChallengeData[1]} />
</Provider>
)
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should render ActionBegin component', async () => {
const store = mockStore({
diff --git a/src/components/Action/ActionChoose.tsx b/src/components/Action/ActionChoose.tsx
index 98337ce197aa12cd3587f325904bbca779faa914..c137680a92c4bcc5e4c320062beac5bf3d11544e 100644
--- a/src/components/Action/ActionChoose.tsx
+++ b/src/components/Action/ActionChoose.tsx
@@ -2,23 +2,16 @@ import ActionBegin from 'components/Action/ActionBegin'
import ActionList from 'components/Action/ActionList'
import { Ecogesture, UserChallenge } from 'models'
import React, { useState } from 'react'
-import './actionChoose.scss'
-interface ActionChooseProps {
- userChallenge: UserChallenge
-}
-
-const ActionChoose: React.FC<ActionChooseProps> = ({
- userChallenge,
-}: ActionChooseProps) => {
+const ActionChoose = ({ userChallenge }: { userChallenge: UserChallenge }) => {
const [selectedAction, setSelectedAction] = useState<Ecogesture | null>(null)
const [showList, setShowList] = useState<boolean>(false)
return (
- <div className="action-choose">
+ <>
{!showList ? (
<ActionBegin
- action={selectedAction ? selectedAction : undefined}
+ action={selectedAction ?? undefined}
setShowList={setShowList}
userChallenge={userChallenge}
/>
@@ -28,7 +21,7 @@ const ActionChoose: React.FC<ActionChooseProps> = ({
setShowList={setShowList}
/>
)}
- </div>
+ </>
)
}
diff --git a/src/components/Action/ActionDone.spec.tsx b/src/components/Action/ActionDone.spec.tsx
index b5071b647b31878ff649846f558a1ac7c4f44079..42092cfa722331bf38ffbaad04891c275257d0aa 100644
--- a/src/components/Action/ActionDone.spec.tsx
+++ b/src/components/Action/ActionDone.spec.tsx
@@ -1,14 +1,15 @@
import { Button } from '@material-ui/core'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import React from 'react'
-import { act } from 'react-dom/test-utils'
import * as reactRedux from 'react-redux'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import UsageEventService from 'services/usageEvent.service'
-import * as challengeActions from 'store/challenge/challenge.actions'
+import * as challengeActions from 'store/challenge/challenge.slice'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { profileData } from '../../../tests/__mocks__/profileData.mock'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
import ActionDone from './ActionDone'
@@ -41,7 +42,7 @@ jest.mock('services/challenge.service', () => {
})
describe('ActionDone component', () => {
- it('should be rendered correctly', () => {
+ it('should be rendered correctly', async () => {
const store = mockStore({
ecolyo: {
challenge: userChallengeData[1],
@@ -54,7 +55,8 @@ describe('ActionDone component', () => {
<ActionDone currentChallenge={userChallengeData[1]} />
</Provider>
)
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should click on button and update action to done', async () => {
const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch')
@@ -77,10 +79,7 @@ describe('ActionDone component', () => {
</Provider>
)
wrapper.find(Button).first().simulate('click')
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(updateChallengeSpy).toBeCalledTimes(1)
})
})
diff --git a/src/components/Action/ActionDone.tsx b/src/components/Action/ActionDone.tsx
index 1d94980dc928cb805053a714e54311329c086e66..099c9465febbb923f08efee022b1547078387524 100644
--- a/src/components/Action/ActionDone.tsx
+++ b/src/components/Action/ActionDone.tsx
@@ -12,16 +12,15 @@ import { useNavigate } from 'react-router-dom'
import ChallengeService from 'services/challenge.service'
import UsageEventService from 'services/usageEvent.service'
import { AppActionsTypes } from 'store'
-import { updateUserChallengeList } from 'store/challenge/challenge.actions'
+import { updateUserChallengeList } from 'store/challenge/challenge.slice'
import { toggleChallengeActionNotification } from 'store/global/global.actions'
import './actionDone.scss'
-interface ActionDoneProps {
- currentChallenge: UserChallenge
-}
-const ActionDone: React.FC<ActionDoneProps> = ({
+const ActionDone = ({
currentChallenge,
-}: ActionDoneProps) => {
+}: {
+ currentChallenge: UserChallenge
+}) => {
const { t } = useI18n()
const client = useClient()
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
diff --git a/src/components/Action/ActionList.tsx b/src/components/Action/ActionList.tsx
index 447ca9aee3975db6449a2c6cf59115a50531830e..b218dd7b11acd4343b427657b4f45b6673c2f996 100644
--- a/src/components/Action/ActionList.tsx
+++ b/src/components/Action/ActionList.tsx
@@ -12,10 +12,7 @@ interface ActionListProps {
setShowList: React.Dispatch<React.SetStateAction<boolean>>
}
-const ActionList: React.FC<ActionListProps> = ({
- setSelectedAction,
- setShowList,
-}: ActionListProps) => {
+const ActionList = ({ setSelectedAction, setShowList }: ActionListProps) => {
const client: Client = useClient()
const {
global: { fluidTypes },
diff --git a/src/components/Action/ActionModal.spec.tsx b/src/components/Action/ActionModal.spec.tsx
index 7c9fb2e01730b74655a7d1a978a834ea17630a52..23002a23f01e36f785fbace2c052742ab8bdbb46 100644
--- a/src/components/Action/ActionModal.spec.tsx
+++ b/src/components/Action/ActionModal.spec.tsx
@@ -1,15 +1,16 @@
import { Button } from '@material-ui/core'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import React from 'react'
-import { act } from 'react-dom/test-utils'
import * as reactRedux from 'react-redux'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import UsageEventService from 'services/usageEvent.service'
-import * as challengeActions from 'store/challenge/challenge.actions'
+import * as challengeActions from 'store/challenge/challenge.slice'
import { defaultEcogestureData } from '../../../tests/__mocks__/actionData.mock'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { profileData } from '../../../tests/__mocks__/profileData.mock'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
import ActionModal from './ActionModal'
@@ -36,7 +37,7 @@ UsageEventService.addEvent = mockAddEvent
const mockStore = configureStore([])
describe('ActionModal component', () => {
- it('should render correctly', () => {
+ it('should render correctly', async () => {
const store = mockStore({
ecolyo: {
challenge: userChallengeData[1],
@@ -54,7 +55,8 @@ describe('ActionModal component', () => {
/>
</Provider>
)
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should click on button and update action to ongoing', async () => {
const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch')
@@ -84,10 +86,7 @@ describe('ActionModal component', () => {
</Provider>
)
wrapper.find(Button).first().simulate('click')
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(updateChallengeSpy).toBeCalledTimes(1)
})
})
diff --git a/src/components/Action/ActionModal.tsx b/src/components/Action/ActionModal.tsx
index cb209b25e13a42f4eaa1091e940078fb5c0f02c5..b58e54f40a0fe4dee367da8ab58d2bc9c89c38e2 100644
--- a/src/components/Action/ActionModal.tsx
+++ b/src/components/Action/ActionModal.tsx
@@ -10,7 +10,7 @@ import React, { Dispatch, useCallback } from 'react'
import { useDispatch } from 'react-redux'
import ChallengeService from 'services/challenge.service'
import { AppActionsTypes } from 'store'
-import { updateUserChallengeList } from 'store/challenge/challenge.actions'
+import { updateUserChallengeList } from 'store/challenge/challenge.slice'
import './actionModal.scss'
interface ActionModalProps {
@@ -20,7 +20,7 @@ interface ActionModalProps {
userChallenge: UserChallenge
}
-const ActionModal: React.FC<ActionModalProps> = ({
+const ActionModal = ({
open,
action,
handleCloseClick,
diff --git a/src/components/Action/ActionOnGoing.spec.tsx b/src/components/Action/ActionOnGoing.spec.tsx
index db8fec3a79b77ae6c9c6fbc1b10ee11b57cd8c4c..3929b747111b4194ba52c3f4b71f4805a20a0efb 100644
--- a/src/components/Action/ActionOnGoing.spec.tsx
+++ b/src/components/Action/ActionOnGoing.spec.tsx
@@ -2,15 +2,16 @@ import { Button } from '@material-ui/core'
import EcogestureModal from 'components/Ecogesture/EcogestureModal'
import { UserActionState } from 'enum/userAction.enum'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import { DateTime } from 'luxon'
import { UserAction } from 'models'
import React from 'react'
-import { act } from 'react-dom/test-utils'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import { defaultEcogestureData } from '../../../tests/__mocks__/actionData.mock'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { profileData } from '../../../tests/__mocks__/profileData.mock'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
import ActionOnGoing from './ActionOnGoing'
@@ -36,12 +37,14 @@ const mockStore = configureStore([])
describe('ActionOnGoing component', () => {
const userAction: UserAction = {
ecogesture: null,
- startDate: DateTime.local().setZone('utc', {
- keepLocalTime: true,
- }),
+ startDate: DateTime.local(2020, 1, 1)
+ .setZone('utc', {
+ keepLocalTime: true,
+ })
+ .startOf('day'),
state: UserActionState.ONGOING,
}
- it('should render correctly', () => {
+ it('should render correctly', async () => {
const store = mockStore({
ecolyo: {
challenge: userChallengeData[1],
@@ -55,8 +58,8 @@ describe('ActionOnGoing component', () => {
<ActionOnGoing userAction={userAction} />
</Provider>
)
-
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should click on button open ecogesture Modal', async () => {
const userAction1: UserAction = {
@@ -76,10 +79,7 @@ describe('ActionOnGoing component', () => {
<ActionOnGoing userAction={userAction1} />
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
wrapper.find(Button).first().simulate('click')
expect(wrapper.find(EcogestureModal).exists()).toBeTruthy()
})
diff --git a/src/components/Action/ActionOnGoing.tsx b/src/components/Action/ActionOnGoing.tsx
index ac6d3701ba2c51cb70a7dbf66422be73dfb3ea57..28d7042995cbb41288b42d0db910c883b71bf685 100644
--- a/src/components/Action/ActionOnGoing.tsx
+++ b/src/components/Action/ActionOnGoing.tsx
@@ -8,13 +8,7 @@ import { UserAction } from 'models'
import React, { useCallback, useState } from 'react'
import './actionOnGoing.scss'
-interface ActionOnGoingProps {
- userAction: UserAction
-}
-
-const ActionOnGoing: React.FC<ActionOnGoingProps> = ({
- userAction,
-}: ActionOnGoingProps) => {
+const ActionOnGoing = ({ userAction }: { userAction: UserAction }) => {
const { t } = useI18n()
const [openEcogestureModal, setOpenEcogestureModal] = useState<boolean>(false)
diff --git a/src/components/Action/ActionView.spec.tsx b/src/components/Action/ActionView.spec.tsx
index e10f9778f36aa4950e842de684702d7332c9cbe5..70d6e9e24f7f15364d9d9291c9b2b9c9aef302d5 100644
--- a/src/components/Action/ActionView.spec.tsx
+++ b/src/components/Action/ActionView.spec.tsx
@@ -1,12 +1,13 @@
import ActionView from 'components/Action/ActionView'
import { UserActionState } from 'enum/userAction.enum'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import React from 'react'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
-import { modalStateData } from '../../../tests/__mocks__/modalStateData.mock'
import { profileData } from '../../../tests/__mocks__/profileData.mock'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
import ActionChoose from './ActionChoose'
import ActionDone from './ActionDone'
@@ -33,7 +34,7 @@ jest.mock('components/Action/ActionBegin', () => 'mock-action-begin')
const mockStore = configureStore([])
describe('ActionView component', () => {
- it('should render ActionChoose component', () => {
+ it('should render ActionChoose component', async () => {
const userChallenge = {
...userChallengeData[1],
action: {
@@ -46,7 +47,6 @@ describe('ActionView component', () => {
challenge: { currentChallenge: userChallenge },
global: { ...globalStateData, fluidTypes: [0, 1, 2] },
profile: profileData,
- modal: modalStateData,
},
})
const wrapper = mount(
@@ -55,7 +55,8 @@ describe('ActionView component', () => {
</Provider>
)
expect(wrapper.find(ActionChoose).exists()).toBeTruthy()
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should render ActionDone component', () => {
const userChallenge = {
@@ -70,7 +71,6 @@ describe('ActionView component', () => {
challenge: { currentChallenge: userChallenge },
global: { ...globalStateData, fluidTypes: [0, 1, 2] },
profile: profileData,
- modal: modalStateData,
},
})
const wrapper = mount(
@@ -92,7 +92,6 @@ describe('ActionView component', () => {
ecolyo: {
challenge: { currentChallenge: userChallenge },
global: { ...globalStateData, fluidTypes: [0, 1, 2] },
- modal: modalStateData,
profile: profileData,
},
})
diff --git a/src/components/Action/ActionView.tsx b/src/components/Action/ActionView.tsx
index d3c06417185e99ea2a032f11b604828879dfc5ce..03ecb1cb19bb7539d422dcb87bc06a55015e0884 100644
--- a/src/components/Action/ActionView.tsx
+++ b/src/components/Action/ActionView.tsx
@@ -10,7 +10,7 @@ import React, { useCallback, useState } from 'react'
import { useSelector } from 'react-redux'
import { AppStore } from 'store'
-const ActionView: React.FC = () => {
+const ActionView = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
const { currentChallenge } = useSelector(
(state: AppStore) => state.ecolyo.challenge
diff --git a/src/components/Action/__snapshots__/ActionBegin.spec.tsx.snap b/src/components/Action/__snapshots__/ActionBegin.spec.tsx.snap
index 65dfa39a442baa95024c6ec96b16cf6bfb2bb7bc..bc15c74764a44b76d7ae970ce1e889f84b8708c5 100644
--- a/src/components/Action/__snapshots__/ActionBegin.spec.tsx.snap
+++ b/src/components/Action/__snapshots__/ActionBegin.spec.tsx.snap
@@ -1,3 +1,1238 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`ActionBegin component should render correctly 1`] = `ReactWrapper {}`;
+exports[`ActionBegin component should render correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <ActionBegin
+ action={
+ Object {
+ "_id": "ECOGESTURE0014",
+ "action": true,
+ "actionDuration": 3,
+ "actionName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
+ "difficulty": 1,
+ "doing": false,
+ "efficiency": 1,
+ "equipment": false,
+ "equipmentInstallation": true,
+ "equipmentType": Array [],
+ "fluidTypes": Array [
+ 0,
+ ],
+ "id": "ECOGESTURE0014",
+ "impactLevel": 2,
+ "investment": null,
+ "longDescription": "En plaçant des plats chauds au réfrigérateur, vous réchauffez l’enceinte de l’appareil, ce qui entraîne une surconsommation. De plus, si les plats ne sont pas couverts, de la vapeur d’eau va se former et provoquer l’apparition du givre. Et couvrir les plats, c’est aussi éviter que les bactéries et les odeurs ne se répandent.",
+ "longName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
+ "objective": false,
+ "room": Array [
+ 2,
+ ],
+ "season": "Sans saison",
+ "shortName": "Chat échaudé",
+ "usage": 5,
+ "viewedInSelection": false,
+ }
+ }
+ setShowList={[MockFunction]}
+ userChallenge={
+ Object {
+ "action": Object {
+ "ecogesture": null,
+ "startDate": null,
+ "state": 0,
+ },
+ "description": "Description challenge 2",
+ "duel": Object {
+ "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
+ "duration": "P30D",
+ "fluidTypes": Array [],
+ "id": "DUEL001",
+ "startDate": null,
+ "state": 0,
+ "threshold": 0,
+ "title": "Title DUEL001",
+ "userConsumption": 0,
+ },
+ "endingDate": null,
+ "exploration": Object {
+ "complementary_description": "Refaire un tour dans son profil si déjà fait",
+ "date": null,
+ "description": "Avoir complété son profil",
+ "ecogesture_id": "",
+ "fluid_condition": Array [],
+ "id": "EXPLORATION001",
+ "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
+ "progress": 0,
+ "state": 0,
+ "target": 1,
+ "type": 1,
+ },
+ "id": "CHALLENGE0002",
+ "progress": Object {
+ "actionProgress": 0,
+ "explorationProgress": 0,
+ "quizProgress": 0,
+ },
+ "quiz": Object {
+ "customQuestion": Object {
+ "interval": 20,
+ "period": Object {},
+ "questionLabel": "Custom1",
+ "result": 0,
+ "singleFluid": false,
+ "timeStep": 20,
+ "type": 0,
+ },
+ "id": "QUIZ001",
+ "questions": Array [
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "86 km",
+ "isTrue": true,
+ },
+ Object {
+ "answerLabel": "78 km",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "56 km",
+ "isTrue": false,
+ },
+ ],
+ "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
+ "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
+ "result": 0,
+ "source": "string",
+ },
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "1 point d’eau public pour 800 habitants.",
+ "isTrue": true,
+ },
+ Object {
+ "answerLabel": "1 point d’eau public pour 400 habitants.",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "1 point d’eau public pour 200 habitants.",
+ "isTrue": false,
+ },
+ ],
+ "explanation": "string",
+ "questionLabel": "En 1800 Ã Lyon, combien de points d'eau y avait-il par habitants ?",
+ "result": 0,
+ "source": "string",
+ },
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "François Mitterrand",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "Napoléon Ier",
+ "isTrue": true,
+ },
+ Object {
+ "answerLabel": "Napoléon III",
+ "isTrue": false,
+ },
+ ],
+ "explanation": "string",
+ "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
+ "result": 0,
+ "source": "string",
+ },
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "string",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "string",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "Aristide Dumont",
+ "isTrue": true,
+ },
+ ],
+ "explanation": "string",
+ "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
+ "result": 0,
+ "source": "string",
+ },
+ ],
+ "result": 0,
+ "startDate": null,
+ "state": 0,
+ },
+ "startDate": null,
+ "state": 4,
+ "success": 1,
+ "target": 15,
+ "title": "Challenge 2",
+ }
+ }
+ >
+ <div
+ className="action-begin"
+ >
+ <div
+ className="action-container"
+ >
+ <div
+ className="action-begin-container"
+ >
+ <div
+ className="icon-container"
+ >
+ <StyledIcon
+ className="action-icon"
+ icon=""
+ size={100}
+ >
+ <Icon
+ aria-hidden={true}
+ className="action-icon"
+ icon=""
+ size={100}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="action-icon styles__icon___23x3R"
+ height={100}
+ style={Object {}}
+ width={100}
+ >
+ <svg
+ aria-hidden={true}
+ className="action-icon styles__icon___23x3R"
+ height={100}
+ style={Object {}}
+ width={100}
+ >
+ <use
+ xlinkHref="#"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ </div>
+ <StarsContainer
+ isQuizBegin={true}
+ result={0}
+ >
+ <div
+ className="stars"
+ >
+ <StyledIcon
+ className="star"
+ icon="test-file-stub"
+ key="1"
+ size={25}
+ >
+ <Icon
+ aria-hidden={true}
+ className="star"
+ icon="test-file-stub"
+ size={25}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={25}
+ style={Object {}}
+ width={25}
+ >
+ <svg
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={25}
+ style={Object {}}
+ width={25}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <StyledIcon
+ className="star"
+ icon="test-file-stub"
+ key="2"
+ size={25}
+ >
+ <Icon
+ aria-hidden={true}
+ className="star"
+ icon="test-file-stub"
+ size={25}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={25}
+ style={Object {}}
+ width={25}
+ >
+ <svg
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={25}
+ style={Object {}}
+ width={25}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <StyledIcon
+ className="star"
+ icon="test-file-stub"
+ key="3"
+ size={25}
+ >
+ <Icon
+ aria-hidden={true}
+ className="star"
+ icon="test-file-stub"
+ size={25}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={25}
+ style={Object {}}
+ width={25}
+ >
+ <svg
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={25}
+ style={Object {}}
+ width={25}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <StyledIcon
+ className="star"
+ icon="test-file-stub"
+ key="4"
+ size={25}
+ >
+ <Icon
+ aria-hidden={true}
+ className="star"
+ icon="test-file-stub"
+ size={25}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={25}
+ style={Object {}}
+ width={25}
+ >
+ <svg
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={25}
+ style={Object {}}
+ width={25}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <StyledIcon
+ className="star"
+ icon="test-file-stub"
+ key="5"
+ size={25}
+ >
+ <Icon
+ aria-hidden={true}
+ className="star"
+ icon="test-file-stub"
+ size={25}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={25}
+ style={Object {}}
+ width={25}
+ >
+ <svg
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={25}
+ style={Object {}}
+ width={25}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ </div>
+ </StarsContainer>
+ <div
+ className="action-title text-20-bold"
+ >
+ Chat échaudé
+ </div>
+ <div
+ className="action-duration text-18"
+ >
+ action.duration
+ </div>
+ <div
+ className="action-text text-18-bold"
+ >
+ J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.
+ </div>
+ <div
+ className="action-buttons"
+ >
+ <WithStyles(ForwardRef(Button))
+ classes={
+ Object {
+ "label": "text-16-normal",
+ "root": "btn-secondary-negative",
+ }
+ }
+ onClick={[Function]}
+ >
+ <ForwardRef(Button)
+ 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-16-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]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiButton-root btn-secondary-negative MuiButton-text"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="button"
+ >
+ <ForwardRef(ButtonBase)
+ 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={[Function]}
+ type="button"
+ >
+ <button
+ className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ 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-16-normal"
+ >
+ action.apply
+ </span>
+ <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)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(Button)>
+ </WithStyles(ForwardRef(Button))>
+ <WithStyles(ForwardRef(Button))
+ classes={
+ Object {
+ "label": "text-16-normal",
+ "root": "btn-secondary-negative",
+ }
+ }
+ onClick={[Function]}
+ >
+ <ForwardRef(Button)
+ 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-16-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]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiButton-root btn-secondary-negative MuiButton-text"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="button"
+ >
+ <ForwardRef(ButtonBase)
+ 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={[Function]}
+ type="button"
+ >
+ <button
+ className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ 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-16-normal"
+ >
+ action.other
+ </span>
+ <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)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(Button)>
+ </WithStyles(ForwardRef(Button))>
+ </div>
+ </div>
+ <ActionModal
+ action={
+ Object {
+ "_id": "ECOGESTURE0014",
+ "action": true,
+ "actionDuration": 3,
+ "actionName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
+ "difficulty": 1,
+ "doing": false,
+ "efficiency": 1,
+ "equipment": false,
+ "equipmentInstallation": true,
+ "equipmentType": Array [],
+ "fluidTypes": Array [
+ 0,
+ ],
+ "id": "ECOGESTURE0014",
+ "impactLevel": 2,
+ "investment": null,
+ "longDescription": "En plaçant des plats chauds au réfrigérateur, vous réchauffez l’enceinte de l’appareil, ce qui entraîne une surconsommation. De plus, si les plats ne sont pas couverts, de la vapeur d’eau va se former et provoquer l’apparition du givre. Et couvrir les plats, c’est aussi éviter que les bactéries et les odeurs ne se répandent.",
+ "longName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
+ "objective": false,
+ "room": Array [
+ 2,
+ ],
+ "season": "Sans saison",
+ "shortName": "Chat échaudé",
+ "usage": 5,
+ "viewedInSelection": false,
+ }
+ }
+ handleCloseClick={[Function]}
+ open={false}
+ userChallenge={
+ Object {
+ "action": Object {
+ "ecogesture": null,
+ "startDate": null,
+ "state": 0,
+ },
+ "description": "Description challenge 2",
+ "duel": Object {
+ "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
+ "duration": "P30D",
+ "fluidTypes": Array [],
+ "id": "DUEL001",
+ "startDate": null,
+ "state": 0,
+ "threshold": 0,
+ "title": "Title DUEL001",
+ "userConsumption": 0,
+ },
+ "endingDate": null,
+ "exploration": Object {
+ "complementary_description": "Refaire un tour dans son profil si déjà fait",
+ "date": null,
+ "description": "Avoir complété son profil",
+ "ecogesture_id": "",
+ "fluid_condition": Array [],
+ "id": "EXPLORATION001",
+ "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
+ "progress": 0,
+ "state": 0,
+ "target": 1,
+ "type": 1,
+ },
+ "id": "CHALLENGE0002",
+ "progress": Object {
+ "actionProgress": 0,
+ "explorationProgress": 0,
+ "quizProgress": 0,
+ },
+ "quiz": Object {
+ "customQuestion": Object {
+ "interval": 20,
+ "period": Object {},
+ "questionLabel": "Custom1",
+ "result": 0,
+ "singleFluid": false,
+ "timeStep": 20,
+ "type": 0,
+ },
+ "id": "QUIZ001",
+ "questions": Array [
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "86 km",
+ "isTrue": true,
+ },
+ Object {
+ "answerLabel": "78 km",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "56 km",
+ "isTrue": false,
+ },
+ ],
+ "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
+ "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
+ "result": 0,
+ "source": "string",
+ },
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "1 point d’eau public pour 800 habitants.",
+ "isTrue": true,
+ },
+ Object {
+ "answerLabel": "1 point d’eau public pour 400 habitants.",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "1 point d’eau public pour 200 habitants.",
+ "isTrue": false,
+ },
+ ],
+ "explanation": "string",
+ "questionLabel": "En 1800 Ã Lyon, combien de points d'eau y avait-il par habitants ?",
+ "result": 0,
+ "source": "string",
+ },
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "François Mitterrand",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "Napoléon Ier",
+ "isTrue": true,
+ },
+ Object {
+ "answerLabel": "Napoléon III",
+ "isTrue": false,
+ },
+ ],
+ "explanation": "string",
+ "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
+ "result": 0,
+ "source": "string",
+ },
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "string",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "string",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "Aristide Dumont",
+ "isTrue": true,
+ },
+ ],
+ "explanation": "string",
+ "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
+ "result": 0,
+ "source": "string",
+ },
+ ],
+ "result": 0,
+ "startDate": null,
+ "state": 0,
+ },
+ "startDate": null,
+ "state": 4,
+ "success": 1,
+ "target": 15,
+ "title": "Challenge 2",
+ }
+ }
+ >
+ <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 {
+ "activatedOpacity": 0.12,
+ "active": "rgba(0, 0, 0, 0.54)",
+ "disabled": "rgba(0, 0, 0, 0.26)",
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
+ "disabledOpacity": 0.38,
+ "focus": "rgba(0, 0, 0, 0.12)",
+ "focusOpacity": 0.12,
+ "hover": "rgba(0, 0, 0, 0.04)",
+ "hoverOpacity": 0.04,
+ "selected": "rgba(0, 0, 0, 0.08)",
+ "selectedOpacity": 0.08,
+ },
+ "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}
+ disableEscapeKeyDown={false}
+ onClose={[Function]}
+ open={false}
+ />
+ </ForwardRef(Dialog)>
+ </WithStyles(ForwardRef(Dialog))>
+ </ActionModal>
+ </div>
+ </div>
+ </ActionBegin>
+</Provider>
+`;
diff --git a/src/components/Action/__snapshots__/ActionCard.spec.tsx.snap b/src/components/Action/__snapshots__/ActionCard.spec.tsx.snap
index a2089e3e24e321d653d4799370b223331174aaa0..c13a977776a73c81d568d62c49d558da4da21ff0 100644
--- a/src/components/Action/__snapshots__/ActionCard.spec.tsx.snap
+++ b/src/components/Action/__snapshots__/ActionCard.spec.tsx.snap
@@ -1,3 +1,616 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`ActionCard component should be rendered correctly 1`] = `ReactWrapper {}`;
+exports[`ActionCard component should be rendered correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <ActionCard
+ action={
+ Object {
+ "_id": "ECOGESTURE0014",
+ "action": true,
+ "actionDuration": 3,
+ "actionName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
+ "difficulty": 1,
+ "doing": false,
+ "efficiency": 1,
+ "equipment": false,
+ "equipmentInstallation": true,
+ "equipmentType": Array [],
+ "fluidTypes": Array [
+ 0,
+ ],
+ "id": "ECOGESTURE0014",
+ "impactLevel": 2,
+ "investment": null,
+ "longDescription": "En plaçant des plats chauds au réfrigérateur, vous réchauffez l’enceinte de l’appareil, ce qui entraîne une surconsommation. De plus, si les plats ne sont pas couverts, de la vapeur d’eau va se former et provoquer l’apparition du givre. Et couvrir les plats, c’est aussi éviter que les bactéries et les odeurs ne se répandent.",
+ "longName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
+ "objective": false,
+ "room": Array [
+ 2,
+ ],
+ "season": "Sans saison",
+ "shortName": "Chat échaudé",
+ "usage": 5,
+ "viewedInSelection": false,
+ }
+ }
+ setSelectedAction={[MockFunction]}
+ setShowList={[MockFunction]}
+ >
+ <WithStyles(ForwardRef(Button))
+ className="action-card"
+ key="ECOGESTURE0014"
+ onClick={[Function]}
+ >
+ <ForwardRef(Button)
+ className="action-card"
+ 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",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root",
+ "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]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiButton-root MuiButton-text action-card"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="button"
+ >
+ <ForwardRef(ButtonBase)
+ className="MuiButton-root MuiButton-text action-card"
+ 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
+ className="MuiButtonBase-root MuiButton-root MuiButton-text action-card"
+ 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"
+ >
+ <StyledIcon
+ className="action-icon"
+ icon="test-file-stub"
+ size={100}
+ >
+ <Icon
+ aria-hidden={true}
+ className="action-icon"
+ icon="test-file-stub"
+ size={100}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="action-icon styles__icon___23x3R"
+ height={100}
+ style={Object {}}
+ width={100}
+ >
+ <svg
+ aria-hidden={true}
+ className="action-icon styles__icon___23x3R"
+ height={100}
+ style={Object {}}
+ width={100}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <div
+ className="action-title text-18-bold"
+ >
+ Chat échaudé
+ </div>
+ </span>
+ <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)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(Button)>
+ </WithStyles(ForwardRef(Button))>
+ <EcogestureModal
+ ecogesture={
+ Object {
+ "_id": "ECOGESTURE0014",
+ "action": true,
+ "actionDuration": 3,
+ "actionName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
+ "difficulty": 1,
+ "doing": false,
+ "efficiency": 1,
+ "equipment": false,
+ "equipmentInstallation": true,
+ "equipmentType": Array [],
+ "fluidTypes": Array [
+ 0,
+ ],
+ "id": "ECOGESTURE0014",
+ "impactLevel": 2,
+ "investment": null,
+ "longDescription": "En plaçant des plats chauds au réfrigérateur, vous réchauffez l’enceinte de l’appareil, ce qui entraîne une surconsommation. De plus, si les plats ne sont pas couverts, de la vapeur d’eau va se former et provoquer l’apparition du givre. Et couvrir les plats, c’est aussi éviter que les bactéries et les odeurs ne se répandent.",
+ "longName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
+ "objective": false,
+ "room": Array [
+ 2,
+ ],
+ "season": "Sans saison",
+ "shortName": "Chat échaudé",
+ "usage": 5,
+ "viewedInSelection": false,
+ }
+ }
+ handleCloseClick={[Function]}
+ isAction={true}
+ open={false}
+ selectEcogesture={[Function]}
+ >
+ <WithStyles(ForwardRef(Dialog))
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "paper": "modal-paper no-padding blue-border",
+ "root": "modal-root",
+ }
+ }
+ onClose={[Function]}
+ open={false}
+ >
+ <ForwardRef(Dialog)
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "container": "MuiDialog-container",
+ "paper": "MuiDialog-paper modal-paper no-padding blue-border",
+ "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 {
+ "activatedOpacity": 0.12,
+ "active": "rgba(0, 0, 0, 0.54)",
+ "disabled": "rgba(0, 0, 0, 0.26)",
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
+ "disabledOpacity": 0.38,
+ "focus": "rgba(0, 0, 0, 0.12)",
+ "focusOpacity": 0.12,
+ "hover": "rgba(0, 0, 0, 0.04)",
+ "hoverOpacity": 0.04,
+ "selected": "rgba(0, 0, 0, 0.08)",
+ "selectedOpacity": 0.08,
+ },
+ "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}
+ disableEscapeKeyDown={false}
+ onClose={[Function]}
+ open={false}
+ />
+ </ForwardRef(Dialog)>
+ </WithStyles(ForwardRef(Dialog))>
+ </EcogestureModal>
+ </ActionCard>
+</Provider>
+`;
diff --git a/src/components/Action/__snapshots__/ActionChoose.spec.tsx.snap b/src/components/Action/__snapshots__/ActionChoose.spec.tsx.snap
index 39bd87fbebd0d4d6412934043880296db9a8ece9..7110cbf34e9e6cb1444e6729042e460634500239 100644
--- a/src/components/Action/__snapshots__/ActionChoose.spec.tsx.snap
+++ b/src/components/Action/__snapshots__/ActionChoose.spec.tsx.snap
@@ -1,3 +1,313 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`ActionChoose component should render correctly 1`] = `ReactWrapper {}`;
+exports[`ActionChoose component should render correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <ActionChoose
+ userChallenge={
+ Object {
+ "action": Object {
+ "ecogesture": null,
+ "startDate": null,
+ "state": 0,
+ },
+ "description": "Description challenge 2",
+ "duel": Object {
+ "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
+ "duration": "P30D",
+ "fluidTypes": Array [],
+ "id": "DUEL001",
+ "startDate": null,
+ "state": 0,
+ "threshold": 0,
+ "title": "Title DUEL001",
+ "userConsumption": 0,
+ },
+ "endingDate": null,
+ "exploration": Object {
+ "complementary_description": "Refaire un tour dans son profil si déjà fait",
+ "date": null,
+ "description": "Avoir complété son profil",
+ "ecogesture_id": "",
+ "fluid_condition": Array [],
+ "id": "EXPLORATION001",
+ "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
+ "progress": 0,
+ "state": 0,
+ "target": 1,
+ "type": 1,
+ },
+ "id": "CHALLENGE0002",
+ "progress": Object {
+ "actionProgress": 0,
+ "explorationProgress": 0,
+ "quizProgress": 0,
+ },
+ "quiz": Object {
+ "customQuestion": Object {
+ "interval": 20,
+ "period": Object {},
+ "questionLabel": "Custom1",
+ "result": 0,
+ "singleFluid": false,
+ "timeStep": 20,
+ "type": 0,
+ },
+ "id": "QUIZ001",
+ "questions": Array [
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "86 km",
+ "isTrue": true,
+ },
+ Object {
+ "answerLabel": "78 km",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "56 km",
+ "isTrue": false,
+ },
+ ],
+ "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
+ "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
+ "result": 0,
+ "source": "string",
+ },
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "1 point d’eau public pour 800 habitants.",
+ "isTrue": true,
+ },
+ Object {
+ "answerLabel": "1 point d’eau public pour 400 habitants.",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "1 point d’eau public pour 200 habitants.",
+ "isTrue": false,
+ },
+ ],
+ "explanation": "string",
+ "questionLabel": "En 1800 Ã Lyon, combien de points d'eau y avait-il par habitants ?",
+ "result": 0,
+ "source": "string",
+ },
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "François Mitterrand",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "Napoléon Ier",
+ "isTrue": true,
+ },
+ Object {
+ "answerLabel": "Napoléon III",
+ "isTrue": false,
+ },
+ ],
+ "explanation": "string",
+ "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
+ "result": 0,
+ "source": "string",
+ },
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "string",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "string",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "Aristide Dumont",
+ "isTrue": true,
+ },
+ ],
+ "explanation": "string",
+ "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
+ "result": 0,
+ "source": "string",
+ },
+ ],
+ "result": 0,
+ "startDate": null,
+ "state": 0,
+ },
+ "startDate": null,
+ "state": 4,
+ "success": 1,
+ "target": 15,
+ "title": "Challenge 2",
+ }
+ }
+ >
+ <ActionBegin
+ setShowList={[Function]}
+ userChallenge={
+ Object {
+ "action": Object {
+ "ecogesture": null,
+ "startDate": null,
+ "state": 0,
+ },
+ "description": "Description challenge 2",
+ "duel": Object {
+ "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
+ "duration": "P30D",
+ "fluidTypes": Array [],
+ "id": "DUEL001",
+ "startDate": null,
+ "state": 0,
+ "threshold": 0,
+ "title": "Title DUEL001",
+ "userConsumption": 0,
+ },
+ "endingDate": null,
+ "exploration": Object {
+ "complementary_description": "Refaire un tour dans son profil si déjà fait",
+ "date": null,
+ "description": "Avoir complété son profil",
+ "ecogesture_id": "",
+ "fluid_condition": Array [],
+ "id": "EXPLORATION001",
+ "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
+ "progress": 0,
+ "state": 0,
+ "target": 1,
+ "type": 1,
+ },
+ "id": "CHALLENGE0002",
+ "progress": Object {
+ "actionProgress": 0,
+ "explorationProgress": 0,
+ "quizProgress": 0,
+ },
+ "quiz": Object {
+ "customQuestion": Object {
+ "interval": 20,
+ "period": Object {},
+ "questionLabel": "Custom1",
+ "result": 0,
+ "singleFluid": false,
+ "timeStep": 20,
+ "type": 0,
+ },
+ "id": "QUIZ001",
+ "questions": Array [
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "86 km",
+ "isTrue": true,
+ },
+ Object {
+ "answerLabel": "78 km",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "56 km",
+ "isTrue": false,
+ },
+ ],
+ "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
+ "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
+ "result": 0,
+ "source": "string",
+ },
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "1 point d’eau public pour 800 habitants.",
+ "isTrue": true,
+ },
+ Object {
+ "answerLabel": "1 point d’eau public pour 400 habitants.",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "1 point d’eau public pour 200 habitants.",
+ "isTrue": false,
+ },
+ ],
+ "explanation": "string",
+ "questionLabel": "En 1800 Ã Lyon, combien de points d'eau y avait-il par habitants ?",
+ "result": 0,
+ "source": "string",
+ },
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "François Mitterrand",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "Napoléon Ier",
+ "isTrue": true,
+ },
+ Object {
+ "answerLabel": "Napoléon III",
+ "isTrue": false,
+ },
+ ],
+ "explanation": "string",
+ "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
+ "result": 0,
+ "source": "string",
+ },
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "string",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "string",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "Aristide Dumont",
+ "isTrue": true,
+ },
+ ],
+ "explanation": "string",
+ "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
+ "result": 0,
+ "source": "string",
+ },
+ ],
+ "result": 0,
+ "startDate": null,
+ "state": 0,
+ },
+ "startDate": null,
+ "state": 4,
+ "success": 1,
+ "target": 15,
+ "title": "Challenge 2",
+ }
+ }
+ >
+ <div
+ className="action-begin"
+ />
+ </ActionBegin>
+ </ActionChoose>
+</Provider>
+`;
diff --git a/src/components/Action/__snapshots__/ActionDone.spec.tsx.snap b/src/components/Action/__snapshots__/ActionDone.spec.tsx.snap
index 6e25bc3070d65abc941ed2d6a8d0fdc4c9e079e6..a2b535dc1d65d8f2051464b904be4b09efd62930 100644
--- a/src/components/Action/__snapshots__/ActionDone.spec.tsx.snap
+++ b/src/components/Action/__snapshots__/ActionDone.spec.tsx.snap
@@ -1,3 +1,361 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`ActionDone component should be rendered correctly 1`] = `ReactWrapper {}`;
+exports[`ActionDone component should be rendered correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <ActionDone
+ currentChallenge={
+ Object {
+ "action": Object {
+ "ecogesture": null,
+ "startDate": null,
+ "state": 0,
+ },
+ "description": "Description challenge 2",
+ "duel": Object {
+ "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
+ "duration": "P30D",
+ "fluidTypes": Array [],
+ "id": "DUEL001",
+ "startDate": null,
+ "state": 0,
+ "threshold": 0,
+ "title": "Title DUEL001",
+ "userConsumption": 0,
+ },
+ "endingDate": null,
+ "exploration": Object {
+ "complementary_description": "Refaire un tour dans son profil si déjà fait",
+ "date": null,
+ "description": "Avoir complété son profil",
+ "ecogesture_id": "",
+ "fluid_condition": Array [],
+ "id": "EXPLORATION001",
+ "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
+ "progress": 0,
+ "state": 0,
+ "target": 1,
+ "type": 1,
+ },
+ "id": "CHALLENGE0002",
+ "progress": Object {
+ "actionProgress": 0,
+ "explorationProgress": 0,
+ "quizProgress": 0,
+ },
+ "quiz": Object {
+ "customQuestion": Object {
+ "interval": 20,
+ "period": Object {},
+ "questionLabel": "Custom1",
+ "result": 0,
+ "singleFluid": false,
+ "timeStep": 20,
+ "type": 0,
+ },
+ "id": "QUIZ001",
+ "questions": Array [
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "86 km",
+ "isTrue": true,
+ },
+ Object {
+ "answerLabel": "78 km",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "56 km",
+ "isTrue": false,
+ },
+ ],
+ "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
+ "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
+ "result": 0,
+ "source": "string",
+ },
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "1 point d’eau public pour 800 habitants.",
+ "isTrue": true,
+ },
+ Object {
+ "answerLabel": "1 point d’eau public pour 400 habitants.",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "1 point d’eau public pour 200 habitants.",
+ "isTrue": false,
+ },
+ ],
+ "explanation": "string",
+ "questionLabel": "En 1800 Ã Lyon, combien de points d'eau y avait-il par habitants ?",
+ "result": 0,
+ "source": "string",
+ },
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "François Mitterrand",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "Napoléon Ier",
+ "isTrue": true,
+ },
+ Object {
+ "answerLabel": "Napoléon III",
+ "isTrue": false,
+ },
+ ],
+ "explanation": "string",
+ "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
+ "result": 0,
+ "source": "string",
+ },
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "string",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "string",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "Aristide Dumont",
+ "isTrue": true,
+ },
+ ],
+ "explanation": "string",
+ "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
+ "result": 0,
+ "source": "string",
+ },
+ ],
+ "result": 0,
+ "startDate": null,
+ "state": 0,
+ },
+ "startDate": null,
+ "state": 4,
+ "success": 1,
+ "target": 15,
+ "title": "Challenge 2",
+ }
+ }
+ >
+ <div
+ className="action-done-container"
+ >
+ <div
+ className="action-done"
+ >
+ <div
+ className="result-title"
+ >
+
+ action.finished
+ </div>
+ <div
+ className="result-text text-16-normal"
+ >
+ action.resultText1
+ </div>
+ <div
+ className="result-text text-16-normal"
+ >
+ action.resultText2
+ </div>
+ <div
+ className="result-text text-16-normal"
+ >
+ action.resultText3
+ </div>
+ <div
+ className="result-text text-16-normal"
+ >
+ action.resultText4
+ </div>
+ <div
+ className="stars"
+ >
+ <span>
+ 5
+ </span>
+ <StyledIcon
+ icon="test-file-stub"
+ size={33}
+ >
+ <Icon
+ aria-hidden={true}
+ icon="test-file-stub"
+ size={33}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={33}
+ style={Object {}}
+ width={33}
+ >
+ <svg
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={33}
+ style={Object {}}
+ width={33}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ </div>
+ <WithStyles(ForwardRef(Button))
+ classes={
+ Object {
+ "label": "text-16-normal",
+ "root": "btn-secondary-negative btn-detail",
+ }
+ }
+ onClick={[Function]}
+ >
+ <ForwardRef(Button)
+ 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-16-normal",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root btn-secondary-negative btn-detail",
+ "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]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiButton-root btn-secondary-negative btn-detail MuiButton-text"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="button"
+ >
+ <ForwardRef(ButtonBase)
+ className="MuiButton-root btn-secondary-negative btn-detail MuiButton-text"
+ 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
+ className="MuiButtonBase-root MuiButton-root btn-secondary-negative btn-detail MuiButton-text"
+ 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-16-normal"
+ >
+ action.ok
+ </span>
+ <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)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(Button)>
+ </WithStyles(ForwardRef(Button))>
+ </div>
+ </div>
+ </ActionDone>
+</Provider>
+`;
diff --git a/src/components/Action/__snapshots__/ActionModal.spec.tsx.snap b/src/components/Action/__snapshots__/ActionModal.spec.tsx.snap
index dedc0fd60ecea5dcd8ce982ec5fefd7fe4d9560b..0c8806398fa551f57e1bcda0c2843a113133186f 100644
--- a/src/components/Action/__snapshots__/ActionModal.spec.tsx.snap
+++ b/src/components/Action/__snapshots__/ActionModal.spec.tsx.snap
@@ -1,3 +1,1187 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`ActionModal component should render correctly 1`] = `ReactWrapper {}`;
+exports[`ActionModal component should render correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <ActionModal
+ action={
+ Object {
+ "_id": "ECOGESTURE0014",
+ "action": true,
+ "actionDuration": 3,
+ "actionName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
+ "difficulty": 1,
+ "doing": false,
+ "efficiency": 1,
+ "equipment": false,
+ "equipmentInstallation": true,
+ "equipmentType": Array [],
+ "fluidTypes": Array [
+ 0,
+ ],
+ "id": "ECOGESTURE0014",
+ "impactLevel": 2,
+ "investment": null,
+ "longDescription": "En plaçant des plats chauds au réfrigérateur, vous réchauffez l’enceinte de l’appareil, ce qui entraîne une surconsommation. De plus, si les plats ne sont pas couverts, de la vapeur d’eau va se former et provoquer l’apparition du givre. Et couvrir les plats, c’est aussi éviter que les bactéries et les odeurs ne se répandent.",
+ "longName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
+ "objective": false,
+ "room": Array [
+ 2,
+ ],
+ "season": "Sans saison",
+ "shortName": "Chat échaudé",
+ "usage": 5,
+ "viewedInSelection": false,
+ }
+ }
+ handleCloseClick={[MockFunction]}
+ open={true}
+ userChallenge={
+ Object {
+ "action": Object {
+ "ecogesture": null,
+ "startDate": null,
+ "state": 0,
+ },
+ "description": "Description challenge 2",
+ "duel": Object {
+ "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
+ "duration": "P30D",
+ "fluidTypes": Array [],
+ "id": "DUEL001",
+ "startDate": null,
+ "state": 0,
+ "threshold": 0,
+ "title": "Title DUEL001",
+ "userConsumption": 0,
+ },
+ "endingDate": null,
+ "exploration": Object {
+ "complementary_description": "Refaire un tour dans son profil si déjà fait",
+ "date": null,
+ "description": "Avoir complété son profil",
+ "ecogesture_id": "",
+ "fluid_condition": Array [],
+ "id": "EXPLORATION001",
+ "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
+ "progress": 0,
+ "state": 0,
+ "target": 1,
+ "type": 1,
+ },
+ "id": "CHALLENGE0002",
+ "progress": Object {
+ "actionProgress": 0,
+ "explorationProgress": 0,
+ "quizProgress": 0,
+ },
+ "quiz": Object {
+ "customQuestion": Object {
+ "interval": 20,
+ "period": Object {},
+ "questionLabel": "Custom1",
+ "result": 0,
+ "singleFluid": false,
+ "timeStep": 20,
+ "type": 0,
+ },
+ "id": "QUIZ001",
+ "questions": Array [
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "86 km",
+ "isTrue": true,
+ },
+ Object {
+ "answerLabel": "78 km",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "56 km",
+ "isTrue": false,
+ },
+ ],
+ "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
+ "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
+ "result": 0,
+ "source": "string",
+ },
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "1 point d’eau public pour 800 habitants.",
+ "isTrue": true,
+ },
+ Object {
+ "answerLabel": "1 point d’eau public pour 400 habitants.",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "1 point d’eau public pour 200 habitants.",
+ "isTrue": false,
+ },
+ ],
+ "explanation": "string",
+ "questionLabel": "En 1800 Ã Lyon, combien de points d'eau y avait-il par habitants ?",
+ "result": 0,
+ "source": "string",
+ },
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "François Mitterrand",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "Napoléon Ier",
+ "isTrue": true,
+ },
+ Object {
+ "answerLabel": "Napoléon III",
+ "isTrue": false,
+ },
+ ],
+ "explanation": "string",
+ "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
+ "result": 0,
+ "source": "string",
+ },
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "string",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "string",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "Aristide Dumont",
+ "isTrue": true,
+ },
+ ],
+ "explanation": "string",
+ "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
+ "result": 0,
+ "source": "string",
+ },
+ ],
+ "result": 0,
+ "startDate": null,
+ "state": 0,
+ },
+ "startDate": null,
+ "state": 4,
+ "success": 1,
+ "target": 15,
+ "title": "Challenge 2",
+ }
+ }
+ >
+ <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 {
+ "activatedOpacity": 0.12,
+ "active": "rgba(0, 0, 0, 0.54)",
+ "disabled": "rgba(0, 0, 0, 0.26)",
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
+ "disabledOpacity": 0.38,
+ "focus": "rgba(0, 0, 0, 0.12)",
+ "focusOpacity": 0.12,
+ "hover": "rgba(0, 0, 0, 0.04)",
+ "hoverOpacity": 0.04,
+ "selected": "rgba(0, 0, 0, 0.08)",
+ "selectedOpacity": 0.08,
+ },
+ "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}
+ 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"
+ >
+ action_modal.accessibility.window_title
+ </div>
+ <div
+ class="action-modal"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="75"
+ width="75"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="action-title text-16-normal"
+ >
+ action.duration
+ </div>
+ <div
+ class="action-text text-16-normal"
+ >
+ J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.
+ </div>
+ <div
+ class="buttons"
+ >
+ <button
+ aria-label="action_modal.accessibility.button_accept"
+ class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label text-16-normal"
+ >
+ action_modal.accept
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="action_modal.accessibility.button_refuse"
+ class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label text-16-normal"
+ >
+ action_modal.refuse
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </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))>
+ <Unstable_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"
+ onMouseDown={[Function]}
+ onMouseUp={[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"
+ >
+ action_modal.accessibility.window_title
+ </div>
+ <div
+ className="action-modal"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={75}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={75}
+ style={Object {}}
+ width={75}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={75}
+ style={Object {}}
+ width={75}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ <div
+ className="action-title text-16-normal"
+ >
+ action.duration
+ </div>
+ <div
+ className="action-text text-16-normal"
+ >
+ J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.
+ </div>
+ <div
+ className="buttons"
+ >
+ <WithStyles(ForwardRef(Button))
+ aria-label="action_modal.accessibility.button_accept"
+ classes={
+ Object {
+ "label": "text-16-normal",
+ "root": "btn-secondary-negative",
+ }
+ }
+ onClick={[Function]}
+ >
+ <ForwardRef(Button)
+ aria-label="action_modal.accessibility.button_accept"
+ 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-16-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]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="action_modal.accessibility.button_accept"
+ className="MuiButton-root btn-secondary-negative MuiButton-text"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="button"
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="action_modal.accessibility.button_accept"
+ 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={[Function]}
+ type="button"
+ >
+ <button
+ aria-label="action_modal.accessibility.button_accept"
+ className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ 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-16-normal"
+ >
+ action_modal.accept
+ </span>
+ <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)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(Button)>
+ </WithStyles(ForwardRef(Button))>
+ <WithStyles(ForwardRef(Button))
+ aria-label="action_modal.accessibility.button_refuse"
+ classes={
+ Object {
+ "label": "text-16-normal",
+ "root": "btn-secondary-negative",
+ }
+ }
+ onClick={[MockFunction]}
+ >
+ <ForwardRef(Button)
+ aria-label="action_modal.accessibility.button_refuse"
+ 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-16-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="action_modal.accessibility.button_refuse"
+ 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="action_modal.accessibility.button_refuse"
+ 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="action_modal.accessibility.button_refuse"
+ 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-16-normal"
+ >
+ action_modal.refuse
+ </span>
+ <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)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(Button)>
+ </WithStyles(ForwardRef(Button))>
+ </div>
+ </div>
+ </div>
+ </ForwardRef(Paper)>
+ </WithStyles(ForwardRef(Paper))>
+ </div>
+ </Transition>
+ </ForwardRef(Fade)>
+ <div
+ data-test="sentinelEnd"
+ tabIndex={0}
+ />
+ </Unstable_TrapFocus>
+ </div>
+ </Portal>
+ </ForwardRef(Portal)>
+ </ForwardRef(Modal)>
+ </ForwardRef(Dialog)>
+ </WithStyles(ForwardRef(Dialog))>
+ </ActionModal>
+</Provider>
+`;
diff --git a/src/components/Action/__snapshots__/ActionOnGoing.spec.tsx.snap b/src/components/Action/__snapshots__/ActionOnGoing.spec.tsx.snap
index 052482d29f5edf445fe51c194a36ee10cf952ce6..bb9fa52a80a3e3659e68e396e173ac96dc8ffde6 100644
--- a/src/components/Action/__snapshots__/ActionOnGoing.spec.tsx.snap
+++ b/src/components/Action/__snapshots__/ActionOnGoing.spec.tsx.snap
@@ -1,3 +1,30 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`ActionOnGoing component should render correctly 1`] = `ReactWrapper {}`;
+exports[`ActionOnGoing component should render correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <ActionOnGoing
+ userAction={
+ Object {
+ "ecogesture": null,
+ "startDate": "2020-01-01T00:00:00.000Z",
+ "state": 1,
+ }
+ }
+ >
+ <div
+ className="action-ongoing"
+ />
+ </ActionOnGoing>
+</Provider>
+`;
diff --git a/src/components/Action/__snapshots__/ActionView.spec.tsx.snap b/src/components/Action/__snapshots__/ActionView.spec.tsx.snap
index cf32fed7e3d88435560fcc176759c6d8bfab973e..ec1ba3e6c35f9cfd16362702059d7640b08b3c70 100644
--- a/src/components/Action/__snapshots__/ActionView.spec.tsx.snap
+++ b/src/components/Action/__snapshots__/ActionView.spec.tsx.snap
@@ -1,3 +1,324 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`ActionView component should render ActionChoose component 1`] = `ReactWrapper {}`;
+exports[`ActionView component should render ActionChoose component 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <ActionView>
+ <mock-cozybar
+ displayBackArrow={true}
+ titleKey="common.title_action"
+ />
+ <mock-header
+ desktopTitleKey="common.title_action"
+ displayBackArrow={true}
+ setHeaderHeight={[Function]}
+ />
+ <mock-content
+ height={0}
+ >
+ <ActionChoose
+ userChallenge={
+ Object {
+ "action": Object {
+ "ecogesture": null,
+ "startDate": null,
+ "state": 0,
+ },
+ "description": "Description challenge 2",
+ "duel": Object {
+ "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
+ "duration": "P30D",
+ "fluidTypes": Array [],
+ "id": "DUEL001",
+ "startDate": null,
+ "state": 0,
+ "threshold": 0,
+ "title": "Title DUEL001",
+ "userConsumption": 0,
+ },
+ "endingDate": null,
+ "exploration": Object {
+ "complementary_description": "Refaire un tour dans son profil si déjà fait",
+ "date": null,
+ "description": "Avoir complété son profil",
+ "ecogesture_id": "",
+ "fluid_condition": Array [],
+ "id": "EXPLORATION001",
+ "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
+ "progress": 0,
+ "state": 0,
+ "target": 1,
+ "type": 1,
+ },
+ "id": "CHALLENGE0002",
+ "progress": Object {
+ "actionProgress": 0,
+ "explorationProgress": 0,
+ "quizProgress": 0,
+ },
+ "quiz": Object {
+ "customQuestion": Object {
+ "interval": 20,
+ "period": Object {},
+ "questionLabel": "Custom1",
+ "result": 0,
+ "singleFluid": false,
+ "timeStep": 20,
+ "type": 0,
+ },
+ "id": "QUIZ001",
+ "questions": Array [
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "86 km",
+ "isTrue": true,
+ },
+ Object {
+ "answerLabel": "78 km",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "56 km",
+ "isTrue": false,
+ },
+ ],
+ "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
+ "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
+ "result": 0,
+ "source": "string",
+ },
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "1 point d’eau public pour 800 habitants.",
+ "isTrue": true,
+ },
+ Object {
+ "answerLabel": "1 point d’eau public pour 400 habitants.",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "1 point d’eau public pour 200 habitants.",
+ "isTrue": false,
+ },
+ ],
+ "explanation": "string",
+ "questionLabel": "En 1800 Ã Lyon, combien de points d'eau y avait-il par habitants ?",
+ "result": 0,
+ "source": "string",
+ },
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "François Mitterrand",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "Napoléon Ier",
+ "isTrue": true,
+ },
+ Object {
+ "answerLabel": "Napoléon III",
+ "isTrue": false,
+ },
+ ],
+ "explanation": "string",
+ "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
+ "result": 0,
+ "source": "string",
+ },
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "string",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "string",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "Aristide Dumont",
+ "isTrue": true,
+ },
+ ],
+ "explanation": "string",
+ "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
+ "result": 0,
+ "source": "string",
+ },
+ ],
+ "result": 0,
+ "startDate": null,
+ "state": 0,
+ },
+ "startDate": null,
+ "state": 4,
+ "success": 1,
+ "target": 15,
+ "title": "Challenge 2",
+ }
+ }
+ >
+ <mock-action-begin
+ setShowList={[Function]}
+ userChallenge={
+ Object {
+ "action": Object {
+ "ecogesture": null,
+ "startDate": null,
+ "state": 0,
+ },
+ "description": "Description challenge 2",
+ "duel": Object {
+ "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
+ "duration": "P30D",
+ "fluidTypes": Array [],
+ "id": "DUEL001",
+ "startDate": null,
+ "state": 0,
+ "threshold": 0,
+ "title": "Title DUEL001",
+ "userConsumption": 0,
+ },
+ "endingDate": null,
+ "exploration": Object {
+ "complementary_description": "Refaire un tour dans son profil si déjà fait",
+ "date": null,
+ "description": "Avoir complété son profil",
+ "ecogesture_id": "",
+ "fluid_condition": Array [],
+ "id": "EXPLORATION001",
+ "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
+ "progress": 0,
+ "state": 0,
+ "target": 1,
+ "type": 1,
+ },
+ "id": "CHALLENGE0002",
+ "progress": Object {
+ "actionProgress": 0,
+ "explorationProgress": 0,
+ "quizProgress": 0,
+ },
+ "quiz": Object {
+ "customQuestion": Object {
+ "interval": 20,
+ "period": Object {},
+ "questionLabel": "Custom1",
+ "result": 0,
+ "singleFluid": false,
+ "timeStep": 20,
+ "type": 0,
+ },
+ "id": "QUIZ001",
+ "questions": Array [
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "86 km",
+ "isTrue": true,
+ },
+ Object {
+ "answerLabel": "78 km",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "56 km",
+ "isTrue": false,
+ },
+ ],
+ "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
+ "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
+ "result": 0,
+ "source": "string",
+ },
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "1 point d’eau public pour 800 habitants.",
+ "isTrue": true,
+ },
+ Object {
+ "answerLabel": "1 point d’eau public pour 400 habitants.",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "1 point d’eau public pour 200 habitants.",
+ "isTrue": false,
+ },
+ ],
+ "explanation": "string",
+ "questionLabel": "En 1800 Ã Lyon, combien de points d'eau y avait-il par habitants ?",
+ "result": 0,
+ "source": "string",
+ },
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "François Mitterrand",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "Napoléon Ier",
+ "isTrue": true,
+ },
+ Object {
+ "answerLabel": "Napoléon III",
+ "isTrue": false,
+ },
+ ],
+ "explanation": "string",
+ "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
+ "result": 0,
+ "source": "string",
+ },
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "string",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "string",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "Aristide Dumont",
+ "isTrue": true,
+ },
+ ],
+ "explanation": "string",
+ "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
+ "result": 0,
+ "source": "string",
+ },
+ ],
+ "result": 0,
+ "startDate": null,
+ "state": 0,
+ },
+ "startDate": null,
+ "state": 4,
+ "success": 1,
+ "target": 15,
+ "title": "Challenge 2",
+ }
+ }
+ />
+ </ActionChoose>
+ </mock-content>
+ </ActionView>
+</Provider>
+`;
diff --git a/src/components/Action/actionBegin.scss b/src/components/Action/actionBegin.scss
index 890eb89d90520e164751043fa80809862f564cd3..8acf26de8cfdcecb1fb86f806ef72cd3b17e310f 100644
--- a/src/components/Action/actionBegin.scss
+++ b/src/components/Action/actionBegin.scss
@@ -1,6 +1,9 @@
@import '../../styles/base/color';
@import '../../styles/base/breakpoint';
+.action-begin {
+ margin: auto;
+}
.action-container {
display: flex;
flex-direction: column;
@@ -20,7 +23,9 @@
transition: all 300ms ease;
color: $white;
background: $grey-linear-gradient-background;
- height: 63vh;
+ height: auto;
+ gap: 1.5rem;
+ max-height: 63svh;
text-align: center;
position: relative;
padding: 5rem 1rem 1rem 1rem;
diff --git a/src/components/Action/actionChoose.scss b/src/components/Action/actionChoose.scss
deleted file mode 100644
index 380667b4d295a202f77b38a17a77a908910ec05b..0000000000000000000000000000000000000000
--- a/src/components/Action/actionChoose.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.action-choose {
- margin: auto;
-}
diff --git a/src/components/Action/actionList.scss b/src/components/Action/actionList.scss
index 30824bec53818fbc47886dca93e74a4a7a47732b..4b4c65a2f9f66f5cbac5928d4be39fc04702fb75 100644
--- a/src/components/Action/actionList.scss
+++ b/src/components/Action/actionList.scss
@@ -1,13 +1,16 @@
@import '../../styles/base/color';
.action-list-container {
- padding: 1.5rem 2rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 600px;
margin: auto;
+ gap: 1rem;
+ width: 100%;
+ box-sizing: border-box;
+ padding: 0 1.5rem;
}
button.action-card {
width: 100%;
@@ -20,7 +23,6 @@ button.action-card {
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
border-radius: 4px;
padding: 1rem;
- margin-bottom: 1.5rem;
.action-title {
text-align: left;
color: white;
diff --git a/src/components/Analysis/AnalysisConsumption.spec.tsx b/src/components/Analysis/AnalysisConsumption.spec.tsx
index 1595ec68f262a62896841fd0a1a77c7dd2586ba6..0e19f2b8e709232f442aba2b6aed2625c2b177f5 100644
--- a/src/components/Analysis/AnalysisConsumption.spec.tsx
+++ b/src/components/Analysis/AnalysisConsumption.spec.tsx
@@ -4,10 +4,8 @@ import Button from '@material-ui/core/Button'
import AnalysisConsumption from 'components/Analysis/AnalysisConsumption'
import { FluidType } from 'enum/fluid.enum'
import { mount } from 'enzyme'
-import { DateTime } from 'luxon'
import { PerformanceIndicator } from 'models'
import React from 'react'
-import { act } from 'react-dom/test-utils'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
@@ -16,6 +14,8 @@ import {
mockMonthlyForecastJanuaryTestProfile1,
profileTypeData,
} from '../../../tests/__mocks__/profileType.mock'
+import { mockAnalysisState } from '../../../tests/__mocks__/store'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -55,9 +55,16 @@ jest.mock('components/Analysis/AnalysisConsumptionRow', () => () => (
<div id="analysisconsumptionrow" />
))
-const mockStore = configureStore([])
-
const modifiedProfile = { ...profileData, isProfileTypeCompleted: true }
+const mockStore = configureStore([])
+const store = mockStore({
+ ecolyo: {
+ profile: modifiedProfile,
+ profileType: profileTypeData,
+ global: globalStateData,
+ analysis: mockAnalysisState,
+ },
+})
const performanceIndicator = {
compareValue: 160.42797399999998,
@@ -84,40 +91,20 @@ const performanceIndicators = [
describe('AnalysisConsumption component', () => {
it('should be rendered correctly', async () => {
- const store = mockStore({
- ecolyo: {
- profile: modifiedProfile,
- profileType: profileTypeData,
- global: globalStateData,
- },
- })
const wrapper = mount(
<Provider store={store}>
<AnalysisConsumption
aggregatedPerformanceIndicator={performanceIndicator}
performanceIndicators={performanceIndicators}
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find(Accordion).exists()).toBeTruthy()
expect(wrapper.find('#analysisconsumptionrow').length).toBe(4)
})
it('should be rendered correctly with no profil set', async () => {
- const store = mockStore({
- ecolyo: {
- profile: profileData,
- profileType: profileTypeData,
- global: globalStateData,
- },
- })
const mockAggregatedPerformanceIndicator: PerformanceIndicator = {
compareValue: 160.42797399999998,
percentageVariation: null,
@@ -128,27 +115,14 @@ describe('AnalysisConsumption component', () => {
<AnalysisConsumption
aggregatedPerformanceIndicator={mockAggregatedPerformanceIndicator}
performanceIndicators={performanceIndicators}
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find(Button).exists()).toBeTruthy()
})
it('should be rendered correctly with null aggregated performance indicator', async () => {
- const store = mockStore({
- ecolyo: {
- profile: modifiedProfile,
- profileType: profileTypeData,
- global: globalStateData,
- },
- })
const mockAggregatedPerformanceIndicator: PerformanceIndicator = {
compareValue: 160.42797399999998,
percentageVariation: null,
@@ -159,60 +133,41 @@ describe('AnalysisConsumption component', () => {
<AnalysisConsumption
aggregatedPerformanceIndicator={mockAggregatedPerformanceIndicator}
performanceIndicators={performanceIndicators}
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find(Accordion).exists()).toBeTruthy()
expect(wrapper.find('#analysisconsumptionrow').length).toBe(4)
})
it('should be rendered correctly without fluid', async () => {
- const store = mockStore({
- ecolyo: {
- profile: modifiedProfile,
- profileType: profileTypeData,
- global: globalStateData,
- },
- })
const wrapper = mount(
<Provider store={store}>
<AnalysisConsumption
aggregatedPerformanceIndicator={performanceIndicator}
performanceIndicators={performanceIndicators}
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(
wrapper.find('#analysisconsumptionrow').first().parent().prop('fluid')
).toBe(FluidType.MULTIFLUID)
})
it('should be rendered correctly with all fluids connected', async () => {
- const updateGlobalState = { ...globalStateData }
- updateGlobalState.fluidTypes = [
- FluidType.ELECTRICITY,
- FluidType.WATER,
- FluidType.GAS,
- ]
const store = mockStore({
ecolyo: {
profile: modifiedProfile,
profileType: profileTypeData,
- global: updateGlobalState,
+ global: {
+ fluidTypes: [FluidType.ELECTRICITY, FluidType.WATER, FluidType.GAS],
+ },
+ analysis: {
+ ...mockAnalysisState,
+ analysisMonth: profileData.monthlyAnalysisDate,
+ },
},
})
mockgetMonthlyForecast.mockReturnValue(
@@ -223,14 +178,10 @@ describe('AnalysisConsumption component', () => {
<AnalysisConsumption
aggregatedPerformanceIndicator={performanceIndicator}
performanceIndicators={performanceIndicators}
- analysisDate={profileData.monthlyAnalysisDate}
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(mockgetMonthlyForecast).toHaveBeenCalledWith(
profileData.monthlyAnalysisDate.month - 1
)
@@ -240,12 +191,11 @@ describe('AnalysisConsumption component', () => {
})
it('should be rendered correctly with 2 fluids connected', async () => {
- const updateGlobalState = { ...globalStateData }
- updateGlobalState.fluidTypes = [FluidType.ELECTRICITY, FluidType.WATER]
const store = mockStore({
ecolyo: {
profile: modifiedProfile,
- global: updateGlobalState,
+ global: { fluidTypes: [FluidType.ELECTRICITY, FluidType.WATER] },
+ analysis: { analysisMonth: profileData.monthlyAnalysisDate },
},
})
mockgetMonthlyForecast.mockReturnValue(
@@ -256,16 +206,10 @@ describe('AnalysisConsumption component', () => {
<AnalysisConsumption
aggregatedPerformanceIndicator={performanceIndicator}
performanceIndicators={performanceIndicators}
- analysisDate={DateTime.fromISO('2020-11-03T00:00:00.000Z', {
- zone: 'utc',
- })}
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(mockgetMonthlyForecast).toHaveBeenCalledWith(
profileData.monthlyAnalysisDate.month - 1
)
@@ -275,28 +219,15 @@ describe('AnalysisConsumption component', () => {
})
it('should redirect to profileType form when click on mui button', async () => {
- const store = mockStore({
- ecolyo: {
- profile: profileData,
- profileType: profileTypeData,
- global: globalStateData,
- },
- })
const wrapper = mount(
<Provider store={store}>
<AnalysisConsumption
aggregatedPerformanceIndicator={performanceIndicator}
performanceIndicators={performanceIndicators}
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
wrapper.find(Button).first().simulate('click')
expect(mockedNavigate).toBeCalledWith('/profileType')
})
diff --git a/src/components/Analysis/AnalysisConsumption.tsx b/src/components/Analysis/AnalysisConsumption.tsx
index bdf63113e9116a0ffbf8ccbc8c243e107995b8ee..80c8c93bf400a58bf11af6527525aba834d9dda7 100644
--- a/src/components/Analysis/AnalysisConsumption.tsx
+++ b/src/components/Analysis/AnalysisConsumption.tsx
@@ -14,7 +14,6 @@ import { Client, useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
import { FluidType } from 'enum/fluid.enum'
-import { DateTime } from 'luxon'
import { PerformanceIndicator } from 'models'
import { MonthlyForecast, ProfileType } from 'models/profileType.model'
import React, { useCallback, useEffect, useState } from 'react'
@@ -29,19 +28,18 @@ import './analysisConsumption.scss'
interface AnalysisConsumptionProps {
aggregatedPerformanceIndicator: PerformanceIndicator
performanceIndicators: PerformanceIndicator[]
- analysisDate: DateTime
}
-const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
+const AnalysisConsumption = ({
aggregatedPerformanceIndicator,
performanceIndicators,
- analysisDate,
}: AnalysisConsumptionProps) => {
const { t } = useI18n()
const navigate = useNavigate()
const client: Client = useClient()
const userPriceConsumption: number = aggregatedPerformanceIndicator.value || 0
const {
+ analysis: { analysisMonth },
global: { fluidTypes },
profile,
} = useSelector((state: AppStore) => state.ecolyo)
@@ -106,17 +104,17 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
const profileTypeEntityService = new ProfileTypeEntityService(client)
const profileType: ProfileType | null =
await profileTypeEntityService.getProfileType(
- analysisDate.minus({ month: 1 }).startOf('month')
+ analysisMonth.minus({ month: 1 }).startOf('month')
)
if (profileType !== null) {
const profileTypeService: ProfileTypeService = new ProfileTypeService(
profileType,
client,
- analysisDate.year
+ analysisMonth.minus({ month: 1 }).year
)
const monthlyForecast: MonthlyForecast =
await profileTypeService.getMonthlyForecast(
- analysisDate.minus({ month: 1 }).startOf('month').month
+ analysisMonth.minus({ month: 1 }).startOf('month').month
)
if (subscribed) {
setForecast(monthlyForecast)
@@ -135,8 +133,8 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
profile.monthlyAnalysisDate.month,
getTotalValueWithConnectedFluids,
client,
- analysisDate.month,
- analysisDate,
+ analysisMonth.month,
+ analysisMonth,
])
const profileNotCompleted = (
diff --git a/src/components/Analysis/AnalysisConsumptionRow.tsx b/src/components/Analysis/AnalysisConsumptionRow.tsx
index b92298babf4a7283514acf661d82cd55f886e46a..451ffab1b3c804f7d2a60ca3730a231cb4175761 100644
--- a/src/components/Analysis/AnalysisConsumptionRow.tsx
+++ b/src/components/Analysis/AnalysisConsumptionRow.tsx
@@ -20,7 +20,7 @@ interface AnalysisConsumptionRowProps {
noData: boolean
}
-const AnalysisConsumptionRow: React.FC<AnalysisConsumptionRowProps> = ({
+const AnalysisConsumptionRow = ({
fluid,
userPriceConsumption,
homePriceConsumption,
diff --git a/src/components/Analysis/AnalysisErrorModal.tsx b/src/components/Analysis/AnalysisErrorModal.tsx
index 85f09505697773d606c7762294303c710ac2342c..0372cd591be4ab90f8e7b5e5461e701e22408190 100644
--- a/src/components/Analysis/AnalysisErrorModal.tsx
+++ b/src/components/Analysis/AnalysisErrorModal.tsx
@@ -1,75 +1,75 @@
-import Button from '@material-ui/core/Button'
-import Dialog from '@material-ui/core/Dialog'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import React from 'react'
-import { useNavigate } from 'react-router-dom'
-import './analysisError.scss'
-
-const AnalysisErrorModal: React.FC = () => {
- const { t } = useI18n()
- const navigate = useNavigate()
- const goToConsumption = () => {
- navigate('/consumption')
- }
- const goBack = () => {
- if (history.length <= 2) {
- navigate('/consumption')
- } else navigate(-1)
- }
- return (
- <Dialog
- open={true}
- onClose={(event, reason): void => {
- event && reason !== 'backdropClick' && goBack()
- }}
- disableEscapeKeyDown
- aria-labelledby={'accessibility-title'}
- classes={{
- root: 'modal-root',
- paper: 'modal-paper',
- }}
- >
- <div id={'accessibility-title'}>
- {t('analysis_error_modal.accessibility.window_title')}
- </div>
- <div className="em-root analysis-error-container">
- <div className="em-content">
- <div className="analysis-error-title text-20-bold">
- {t('analysis_error_modal.title')}
- </div>
- <div className="analysis-error-message text-16-normal">
- {t('analysis_error_modal.message')}
- </div>
- <div className="analysis-error-button">
- <Button
- aria-label={t(
- 'analysis_error_modal.accessibility.button_go_back'
- )}
- onClick={goBack}
- classes={{
- root: 'btn-secondary-positive',
- label: 'text-16-normal',
- }}
- >
- {t('analysis_error_modal.go_back')}
- </Button>
- <Button
- aria-label={t(
- 'analysis_error_modal.accessibility.button_goto_konnector'
- )}
- onClick={goToConsumption}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- >
- {t('analysis_error_modal.go_to_options')}
- </Button>
- </div>
- </div>
- </div>
- </Dialog>
- )
-}
-
-export default AnalysisErrorModal
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React from 'react'
+import { useNavigate } from 'react-router-dom'
+import './analysisError.scss'
+
+const AnalysisErrorModal = () => {
+ const { t } = useI18n()
+ const navigate = useNavigate()
+ const goToConsumption = () => {
+ navigate('/consumption')
+ }
+ const goBack = () => {
+ if (history.length <= 2) {
+ navigate('/consumption')
+ } else navigate(-1)
+ }
+ return (
+ <Dialog
+ open={true}
+ onClose={(event, reason): void => {
+ event && reason !== 'backdropClick' && goBack()
+ }}
+ disableEscapeKeyDown
+ aria-labelledby={'accessibility-title'}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper',
+ }}
+ >
+ <div id={'accessibility-title'}>
+ {t('analysis_error_modal.accessibility.window_title')}
+ </div>
+ <div className="em-root analysis-error-container">
+ <div className="em-content">
+ <div className="analysis-error-title text-20-bold">
+ {t('analysis_error_modal.title')}
+ </div>
+ <div className="analysis-error-message text-16-normal">
+ {t('analysis_error_modal.message')}
+ </div>
+ <div className="analysis-error-button">
+ <Button
+ aria-label={t(
+ 'analysis_error_modal.accessibility.button_go_back'
+ )}
+ onClick={goBack}
+ classes={{
+ root: 'btn-secondary-positive',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('analysis_error_modal.go_back')}
+ </Button>
+ <Button
+ aria-label={t(
+ 'analysis_error_modal.accessibility.button_goto_konnector'
+ )}
+ onClick={goToConsumption}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-16-bold',
+ }}
+ >
+ {t('analysis_error_modal.go_to_options')}
+ </Button>
+ </div>
+ </div>
+ </div>
+ </Dialog>
+ )
+}
+
+export default AnalysisErrorModal
diff --git a/src/components/Analysis/AnalysisView.spec.tsx b/src/components/Analysis/AnalysisView.spec.tsx
index 87e6fb72a27e4b34cffba80e29d52832dd259c78..26f19004286e1d84ef8bf7c62570f21d7ff3577c 100644
--- a/src/components/Analysis/AnalysisView.spec.tsx
+++ b/src/components/Analysis/AnalysisView.spec.tsx
@@ -9,6 +9,7 @@ import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { profileData } from '../../../tests/__mocks__/profileData.mock'
import {
createMockEcolyoStore,
+ mockAnalysisState,
mockInitialChartState,
} from '../../../tests/__mocks__/store'
@@ -57,6 +58,7 @@ describe('AnalysisView component', () => {
global: globalStateData,
profile: profileData,
chart: mockInitialChartState,
+ analysis: mockAnalysisState,
})
useDispatchSpy.mockReturnValue(jest.fn())
const wrapper = mount(
@@ -81,6 +83,7 @@ describe('AnalysisView component', () => {
haveSeenLastAnalysis: false,
},
chart: mockInitialChartState,
+ analysis: mockAnalysisState,
})
useDispatchSpy.mockReturnValue(jest.fn())
const wrapper = mount(
diff --git a/src/components/Analysis/AnalysisView.tsx b/src/components/Analysis/AnalysisView.tsx
index 110099f61ae6a1f5a64328e6e15d286ba815ebea..b807f35b6b9204cbb533969191bad2940094c66c 100644
--- a/src/components/Analysis/AnalysisView.tsx
+++ b/src/components/Analysis/AnalysisView.tsx
@@ -15,17 +15,15 @@ import { toggleAnalysisNotification } from 'store/global/global.actions'
import { updateProfile } from 'store/profile/profile.actions'
import './analysisView.scss'
-const AnalysisView: React.FC = () => {
+const AnalysisView = () => {
const client = useClient()
const [headerHeight, setHeaderHeight] = useState<number>(0)
const {
+ analysis: { analysisMonth },
chart: { selectedDate },
global: { analysisNotification },
profile: { monthlyAnalysisDate, mailToken },
} = useSelector((state: AppStore) => state.ecolyo)
-
- const [currentAnalysisDate, setCurrentAnalysisDate] =
- useState<DateTime>(monthlyAnalysisDate)
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
const defineHeaderHeight = useCallback((height: number) => {
setHeaderHeight(height)
@@ -107,14 +105,12 @@ const AnalysisView: React.FC = () => {
desktopTitleKey={'common.title_analysis'}
>
<DateNavigator
- currentAnalysisDate={currentAnalysisDate}
- setCurrentAnalysisDate={setCurrentAnalysisDate}
+ currentAnalysisDate={analysisMonth}
inlineDateDisplay={true}
/>
</Header>
<Content height={headerHeight}>
<MonthlyAnalysis
- analysisDate={currentAnalysisDate}
saveLastScrollPosition={saveLastScrollPosition}
scrollPosition={scrollPosition}
/>
diff --git a/src/components/Analysis/ComparisonView.tsx b/src/components/Analysis/ComparisonView.tsx
index 17d80b45a620754979610383c629c6408ac5b059..db8032078ca2ccbd234308d955a34579e812cc4f 100644
--- a/src/components/Analysis/ComparisonView.tsx
+++ b/src/components/Analysis/ComparisonView.tsx
@@ -4,7 +4,6 @@ import FluidPerformanceIndicator from 'components/PerformanceIndicator/FluidPerf
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { TimeStep } from 'enum/timeStep.enum'
-import { DateTime } from 'luxon'
import { FluidConfig, PerformanceIndicator } from 'models'
import React, { Dispatch, useEffect, useMemo, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
@@ -13,20 +12,12 @@ import { AppActionsTypes, AppStore } from 'store'
import { setPeriod } from 'store/analysis/analysis.slice'
import './comparisonView.scss'
-interface ComparisonViewProps {
- analysisDate: DateTime
- fluidConfig: FluidConfig[]
-}
-
-const ComparisonView: React.FC<ComparisonViewProps> = ({
- analysisDate,
- fluidConfig,
-}) => {
+const ComparisonView = ({ fluidConfig }: { fluidConfig: FluidConfig[] }) => {
const { t } = useI18n()
const client = useClient()
const {
global: { fluidTypes },
- analysis: { period },
+ analysis: { period, analysisMonth },
} = useSelector((state: AppStore) => state.ecolyo)
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
const [monthPerformanceIndicators, setMonthPerformanceIndicators] = useState<
@@ -42,22 +33,22 @@ const ComparisonView: React.FC<ComparisonViewProps> = ({
)
const monthPeriod = useMemo(() => {
return {
- startDate: analysisDate.minus({ month: 1 }).startOf('month'),
- endDate: analysisDate.minus({ month: 1 }).endOf('month'),
+ startDate: analysisMonth.minus({ month: 1 }).startOf('month'),
+ endDate: analysisMonth.minus({ month: 1 }).endOf('month'),
}
- }, [analysisDate])
+ }, [analysisMonth])
const previousMonthPeriod = useMemo(() => {
return {
- startDate: analysisDate.minus({ month: 2 }).startOf('month'),
- endDate: analysisDate.minus({ month: 2 }).endOf('month'),
+ startDate: analysisMonth.minus({ month: 2 }).startOf('month'),
+ endDate: analysisMonth.minus({ month: 2 }).endOf('month'),
}
- }, [analysisDate])
+ }, [analysisMonth])
const previousYearPeriod = useMemo(() => {
return {
- startDate: analysisDate.minus({ year: 1, month: 1 }).startOf('month'),
- endDate: analysisDate.minus({ year: 1, month: 1 }).endOf('month'),
+ startDate: analysisMonth.minus({ year: 1, month: 1 }).startOf('month'),
+ endDate: analysisMonth.minus({ year: 1, month: 1 }).endOf('month'),
}
- }, [analysisDate])
+ }, [analysisMonth])
const loaderPlaceholderHeight =
fluidTypes.length * 84 + (fluidTypes.length - 1) * 10
@@ -97,7 +88,7 @@ const ComparisonView: React.FC<ComparisonViewProps> = ({
}, [
client,
fluidTypes,
- analysisDate,
+ analysisMonth,
consumptionService,
monthPeriod,
previousMonthPeriod,
diff --git a/src/components/Analysis/ElecHalfHourChart.spec.tsx b/src/components/Analysis/ElecHalfHourChart.spec.tsx
index 8cb417f255794dc21dab3493610e4d74f2d9a685..b9e16b2aad2297cddd3812ace4998e06aff0ecdb 100644
--- a/src/components/Analysis/ElecHalfHourChart.spec.tsx
+++ b/src/components/Analysis/ElecHalfHourChart.spec.tsx
@@ -1,4 +1,5 @@
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import { DateTime } from 'luxon'
import React from 'react'
import * as reactRedux from 'react-redux'
@@ -44,8 +45,8 @@ describe('ElecHalfHourChart component', () => {
<Provider store={store}>
<ElecHalfHourChart dataLoad={dataLoadArray} isWeekend={true} />
</Provider>
- ).getElement()
- expect(wrapper).toMatchSnapshot()
+ )
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should render week data', () => {
const store = mockStore({
diff --git a/src/components/Analysis/ElecHalfHourChart.tsx b/src/components/Analysis/ElecHalfHourChart.tsx
index 9ff47f22240ade0da1b9783bd5dc9b7ed3f4fb9c..b63408d3b05ae42ff1fd32550ae16c7b529407c1 100644
--- a/src/components/Analysis/ElecHalfHourChart.tsx
+++ b/src/components/Analysis/ElecHalfHourChart.tsx
@@ -17,7 +17,7 @@ interface ElecHalfHourChartProps {
const ElecHalfHourChart = ({ dataLoad, isWeekend }: ElecHalfHourChartProps) => {
const chartContainer = useRef<HTMLDivElement>(null)
- const { height, width } = useChartResize(chartContainer, 170, 940)
+ const { height, width } = useChartResize(chartContainer, false, 170, 940)
const marginLeft = 10
const marginRight = 60
const marginTop = 0
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis.spec.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis.spec.tsx
index 2326f69a18a33bd840366f0409255be7b6bd3582..2cff5c734e2090bc063c9e31bb3c4ec05352e982 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis.spec.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis.spec.tsx
@@ -1,14 +1,16 @@
import { IconButton } from '@material-ui/core'
import { mount } from 'enzyme'
import toJson from 'enzyme-to-json'
-import { DateTime } from 'luxon'
import { PerformanceIndicator } from 'models'
import React from 'react'
+import { Provider } from 'react-redux'
+import configureStore from 'redux-mock-store'
import {
mockDataLoadEnedisAnalysis,
mockEnedisMonthlyAnalysisArray,
} from '../../../tests/__mocks__/enedisMonthlyAnalysisData.mock'
import { allLastFluidPrices } from '../../../tests/__mocks__/fluidPrice.mock'
+import { mockAnalysisState } from '../../../tests/__mocks__/store'
import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import ElecHalfHourMonthlyAnalysis from './ElecHalfHourMonthlyAnalysis'
@@ -64,6 +66,13 @@ jest.mock('services/fluidsPrices.service', () => {
})
})
+const mockStore = configureStore([])
+const store = mockStore({
+ ecolyo: {
+ analysis: mockAnalysisState,
+ },
+})
+
describe('ElecHalfHourMonthlyAnalysis component', () => {
beforeEach(() => {
mockCheckDoctypeEntries.mockClear()
@@ -75,12 +84,9 @@ describe('ElecHalfHourMonthlyAnalysis component', () => {
mockCheckDoctypeEntries.mockResolvedValueOnce(false)
mockGetPrices.mockResolvedValue(allLastFluidPrices[0])
const wrapper = mount(
- <ElecHalfHourMonthlyAnalysis
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
- perfIndicator={mockPerfIndicator}
- />
+ <Provider store={store}>
+ <ElecHalfHourMonthlyAnalysis perfIndicator={mockPerfIndicator} />
+ </Provider>
)
await waitForComponentToPaint(wrapper)
expect(toJson(wrapper)).toMatchSnapshot()
@@ -97,12 +103,9 @@ describe('ElecHalfHourMonthlyAnalysis component', () => {
mockGetPrices.mockResolvedValue(allLastFluidPrices[0])
const wrapper = mount(
- <ElecHalfHourMonthlyAnalysis
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
- perfIndicator={mockPerfIndicator}
- />
+ <Provider store={store}>
+ <ElecHalfHourMonthlyAnalysis perfIndicator={mockPerfIndicator} />
+ </Provider>
)
await waitForComponentToPaint(wrapper)
expect(toJson(wrapper)).toMatchSnapshot()
@@ -118,12 +121,9 @@ describe('ElecHalfHourMonthlyAnalysis component', () => {
)
mockGetPrices.mockResolvedValue(allLastFluidPrices[0])
const wrapper = mount(
- <ElecHalfHourMonthlyAnalysis
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
- perfIndicator={mockPerfIndicator}
- />
+ <Provider store={store}>
+ <ElecHalfHourMonthlyAnalysis perfIndicator={mockPerfIndicator} />
+ </Provider>
)
await waitForComponentToPaint(wrapper)
wrapper.find(IconButton).first().simulate('click')
@@ -142,12 +142,9 @@ describe('ElecHalfHourMonthlyAnalysis component', () => {
mockGetPrices.mockResolvedValue(allLastFluidPrices[0])
const wrapper = mount(
- <ElecHalfHourMonthlyAnalysis
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
- perfIndicator={mockPerfIndicator}
- />
+ <Provider store={store}>
+ <ElecHalfHourMonthlyAnalysis perfIndicator={mockPerfIndicator} />
+ </Provider>
)
await waitForComponentToPaint(wrapper)
wrapper.find('.showmodal').first().simulate('click')
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis.tsx
index f053445d7ba81e1aa62751773716f4faf97c4822..b6fc4072005f7f60765a9f3401bcf9f8467762a6 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis.tsx
@@ -10,30 +10,31 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
-import { DateTime } from 'luxon'
import { FluidPrice, PerformanceIndicator } from 'models'
import {
AggregatedEnedisMonthlyDataloads,
EnedisMonthlyAnalysisData,
} from 'models/enedisMonthlyAnalysis'
import React, { useCallback, useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
import ConsumptionService from 'services/consumption.service'
import EnedisMonthlyAnalysisDataService from 'services/enedisMonthlyAnalysisData.service'
import FluidPricesService from 'services/fluidsPrices.service'
+import { AppStore } from 'store'
import { getNavPicto } from 'utils/picto'
import ElecInfoModal from './ElecInfoModal'
import './elecHalfHourMonthlyAnalysis.scss'
-interface ElecHalfHourMonthlyAnalysisProps {
- analysisDate: DateTime
+const ElecHalfHourMonthlyAnalysis = ({
+ perfIndicator,
+}: {
perfIndicator: PerformanceIndicator
-}
-
-const ElecHalfHourMonthlyAnalysis: React.FC<
- ElecHalfHourMonthlyAnalysisProps
-> = ({ analysisDate, perfIndicator }: ElecHalfHourMonthlyAnalysisProps) => {
+}) => {
const { t } = useI18n()
const client = useClient()
+ const { analysisMonth } = useSelector(
+ (state: AppStore) => state.ecolyo.analysis
+ )
const [isWeekend, setIsWeekend] = useState<boolean>(true)
const [isHalfHourActivated, setIsHalfHourActivated] = useState<boolean>(true)
const [isLoading, setIsLoading] = useState<boolean>(true)
@@ -87,7 +88,7 @@ const ElecHalfHourMonthlyAnalysis: React.FC<
if (!subscribed) return
if (isHalfHourLoadActivated) {
const emas = new EnedisMonthlyAnalysisDataService(client)
- const aggregatedDate = analysisDate.minus({ month: 1 })
+ const aggregatedDate = analysisMonth.minus({ month: 1 })
const data = await emas.getEnedisMonthlyAnalysisByDate(
aggregatedDate.year,
aggregatedDate.month
@@ -112,7 +113,7 @@ const ElecHalfHourMonthlyAnalysis: React.FC<
return () => {
subscribed = false
}
- }, [analysisDate, client, perfIndicator])
+ }, [analysisMonth, client, perfIndicator])
useEffect(() => {
let subscribed = true
@@ -120,7 +121,7 @@ const ElecHalfHourMonthlyAnalysis: React.FC<
async function getAllLastPrices() {
const price: FluidPrice = await fluidsPricesService.getPrices(
FluidType.ELECTRICITY,
- analysisDate.minus({ month: 1 })
+ analysisMonth.minus({ month: 1 })
)
if (subscribed && price) {
setElecPrice(price)
@@ -131,7 +132,7 @@ const ElecHalfHourMonthlyAnalysis: React.FC<
return () => {
subscribed = false
}
- }, [analysisDate, client])
+ }, [analysisMonth, client])
return (
<div className="special-elec-container">
diff --git a/src/components/Analysis/ElecInfoModal.tsx b/src/components/Analysis/ElecInfoModal.tsx
index 5224c3346aa4564669fa58add021c5c9b5dcc125..97275ab60d837a21e36b4e91ca134a1d9fd39549 100644
--- a/src/components/Analysis/ElecInfoModal.tsx
+++ b/src/components/Analysis/ElecInfoModal.tsx
@@ -11,10 +11,7 @@ interface ElecInfoModalProps {
handleCloseClick: () => void
}
-const ElecInfoModal: React.FC<ElecInfoModalProps> = ({
- open,
- handleCloseClick,
-}: ElecInfoModalProps) => {
+const ElecInfoModal = ({ open, handleCloseClick }: ElecInfoModalProps) => {
const { t } = useI18n()
return (
diff --git a/src/components/Analysis/MaxConsumptionCard.spec.tsx b/src/components/Analysis/MaxConsumptionCard.spec.tsx
index 5a3ac902d1c0823b6692c2953888b9a9626cd28e..a4273b052c65a19f899ac98be22551f7225a1421 100644
--- a/src/components/Analysis/MaxConsumptionCard.spec.tsx
+++ b/src/components/Analysis/MaxConsumptionCard.spec.tsx
@@ -1,12 +1,13 @@
import { FluidType } from 'enum/fluid.enum'
import { mount } from 'enzyme'
-import { DateTime } from 'luxon'
+import toJson from 'enzyme-to-json'
import React from 'react'
-import * as reactRedux from 'react-redux'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
+import { graphData } from '../../../tests/__mocks__/chartData.mock'
import mockClient from '../../../tests/__mocks__/client'
-import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
+import { mockAnalysisState } from '../../../tests/__mocks__/store'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import MaxConsumptionCard from './MaxConsumptionCard'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -20,10 +21,12 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
})
const mockGetMaxLoad = jest.fn(() => 0)
+const mockGetGraphData = jest.fn(() => graphData)
jest.mock('services/consumption.service', () => {
return jest.fn(() => {
return {
getMaxLoad: mockGetMaxLoad,
+ getGraphData: mockGetGraphData,
}
})
})
@@ -35,76 +38,72 @@ jest.mock('cozy-client', () => {
}
})
+jest.mock('components/Charts/BarChart', () => 'mock-BarChart')
+
const mockStore = configureStore([])
-const mockUseSelector = jest.spyOn(reactRedux, 'useSelector')
describe('MaxConsumptionCard component', () => {
- it('should be rendered correctly', () => {
+ it('should be rendered correctly', async () => {
const store = mockStore({
ecolyo: {
- global: globalStateData,
+ global: {
+ fluidTypes: [FluidType.ELECTRICITY, FluidType.GAS],
+ },
+ analysis: mockAnalysisState,
},
})
- mockUseSelector.mockReturnValue({
- fluidTypes: [FluidType.ELECTRICITY, FluidType.GAS],
- })
+
const wrapper = mount(
<Provider store={store}>
- <MaxConsumptionCard
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
- />
+ <MaxConsumptionCard />
</Provider>
- ).getElement()
- expect(wrapper).toMatchSnapshot()
+ )
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
+ expect(wrapper.find('mock-BarChart').exists()).toBeTruthy()
})
- it('should be rendered with one fluid and not display arrows', () => {
+ it('should be rendered with one fluid and not display arrows', async () => {
const store = mockStore({
ecolyo: {
- global: globalStateData,
+ global: { fluidTypes: [FluidType.ELECTRICITY] },
+ analysis: mockAnalysisState,
},
})
- mockUseSelector.mockReturnValue({ fluidTypes: [FluidType.ELECTRICITY] })
const wrapper = mount(
<Provider store={store}>
- <MaxConsumptionCard
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
- />
+ <MaxConsumptionCard />
</Provider>
)
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find('.arrow').exists()).toBeFalsy()
})
it('should be rendered with several fluids and click navigate between fluid', async () => {
const store = mockStore({
ecolyo: {
- global: globalStateData,
+ global: { fluidTypes: [FluidType.ELECTRICITY, FluidType.GAS] },
+ analysis: mockAnalysisState,
},
})
- mockUseSelector.mockReturnValue({
- fluidTypes: [FluidType.ELECTRICITY, FluidType.GAS],
- })
const wrapper = mount(
<Provider store={store}>
- <MaxConsumptionCard
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
- />
+ <MaxConsumptionCard />
</Provider>
)
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find('.arrow-next').exists()).toBeTruthy()
// navigate next
wrapper.find('.arrow-next').first().simulate('click')
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find('.fluid').text()).toBe('FLUID.GAS.LABEL')
wrapper.find('.arrow-next').first().simulate('click')
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find('.fluid').text()).toBe('FLUID.ELECTRICITY.LABEL')
// navigate prev
wrapper.find('.arrow-prev').first().simulate('click')
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find('.fluid').text()).toBe('FLUID.GAS.LABEL')
wrapper.find('.arrow-prev').first().simulate('click')
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find('.fluid').text()).toBe('FLUID.ELECTRICITY.LABEL')
})
})
diff --git a/src/components/Analysis/MaxConsumptionCard.tsx b/src/components/Analysis/MaxConsumptionCard.tsx
index b8bb9c6deb9d1678a4f52033108c2c9736756ffc..3fde2da22acabb35915ab79d8433c9327d37551d 100644
--- a/src/components/Analysis/MaxConsumptionCard.tsx
+++ b/src/components/Analysis/MaxConsumptionCard.tsx
@@ -2,78 +2,84 @@ import IconButton from '@material-ui/core/IconButton'
import GraphIcon from 'assets/icons/ico/graph-icon.svg'
import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
import RightArrowIcon from 'assets/icons/ico/right-arrow.svg'
+import BarChart from 'components/Charts/BarChart'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import DataloadSection from 'components/ConsumptionVisualizer/DataloadSection'
+import { useChartResize } from 'components/Hooks/useChartResize'
import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
+import { DataloadSectionType } from 'enum/dataload.enum'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
-import { DateTime } from 'luxon'
-import { Dataload, TimePeriod } from 'models'
-import React, { useCallback, useEffect, useState } from 'react'
-import { useSelector } from 'react-redux'
+import { Datachart, Dataload, TimePeriod } from 'models'
+import React, { Dispatch, useEffect, useRef, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
import ConsumptionDataManager from 'services/consumption.service'
-import { AppStore } from 'store'
-import { getNavPicto } from 'utils/picto'
-import { formatNumberValues } from 'utils/utils'
+import { AppActionsTypes, AppStore } from 'store'
+import { setSelectedDate } from 'store/chart/chart.slice'
import './maxConsumptionCard.scss'
-interface MaxConsumptionCardProps {
- analysisDate: DateTime
-}
-
-const MaxConsumptionCard: React.FC<MaxConsumptionCardProps> = ({
- analysisDate,
-}: MaxConsumptionCardProps) => {
+const MaxConsumptionCard = () => {
const { t } = useI18n()
const client = useClient()
-
- const { fluidTypes } = useSelector((state: AppStore) => state.ecolyo.global)
+ const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
+ const {
+ global: { fluidTypes },
+ analysis: { analysisMonth },
+ } = useSelector((state: AppStore) => state.ecolyo)
const [index, setIndex] = useState<number>(0)
-
+ const [isLoading, setIsLoading] = useState<boolean>(true)
const [maxDayData, setMaxDayData] = useState<Dataload | null>(null)
- const [isLoading, setIsLoading] = useState<boolean>(false)
+ const [chartData, setChartData] = useState<Datachart>({
+ actualData: [],
+ comparisonData: null,
+ })
+ const containerRef = useRef<HTMLDivElement>(null)
+ const { height, width } = useChartResize(containerRef, isLoading, 250, 940)
- const handleChangePrevFluid = useCallback(() => {
- setIsLoading(true)
- if (index === 0) {
- setIndex(fluidTypes.length - 1)
- } else {
- setIndex(prev => prev - 1)
- }
- }, [fluidTypes, index])
+ const currentFluidType = FluidType[fluidTypes[index]] as
+ | 'ELECTRICITY'
+ | 'WATER'
+ | 'GAZ'
+ const fluidColor = currentFluidType.toLowerCase()
- const handleChangeNextFluid = useCallback(() => {
+ const handleFluidChange = (direction: number) => {
setIsLoading(true)
- if (index === fluidTypes.length - 1) {
- setIndex(0)
- } else {
- setIndex(prev => prev + 1)
+ let newIndex = index + direction
+ if (newIndex >= fluidTypes.length) {
+ newIndex = 0
+ } else if (newIndex < 0) {
+ newIndex = fluidTypes.length - 1
}
- }, [fluidTypes, index])
+ setIndex(newIndex)
+ }
useEffect(() => {
let subscribed = true
async function getMaxLoadData() {
setIsLoading(true)
const timePeriod: TimePeriod = {
- startDate: analysisDate.minus({ month: 1 }).startOf('month'),
- endDate: analysisDate.minus({ month: 1 }).endOf('month'),
+ startDate: analysisMonth.minus({ month: 1 }).startOf('month'),
+ endDate: analysisMonth.minus({ month: 1 }).endOf('month'),
}
const consumptionService = new ConsumptionDataManager(client)
- const monthMaxData = await consumptionService.getMaxLoad(
+ const monthlyData = await consumptionService.getGraphData(
timePeriod,
TimeStep.DAY,
- [fluidTypes[index]],
- undefined,
- false,
- true
+ [fluidTypes[index]]
)
- if (monthMaxData) {
- setMaxDayData(monthMaxData as Dataload)
- } else {
- setMaxDayData(null)
+
+ if (monthlyData && monthlyData?.actualData.length > 0) {
+ setChartData(monthlyData)
+ const maxDay = getMaxConsumptionDay(monthlyData.actualData)
+ if (maxDay) {
+ setMaxDayData(maxDay)
+ dispatch(setSelectedDate(maxDay.date))
+ } else {
+ setMaxDayData(null)
+ }
}
setIsLoading(false)
}
@@ -83,40 +89,59 @@ const MaxConsumptionCard: React.FC<MaxConsumptionCardProps> = ({
return () => {
subscribed = false
}
- }, [analysisDate, client, fluidTypes, index])
+ }, [analysisMonth, client, fluidTypes, index, dispatch])
+
+ const getMaxConsumptionDay = (dataload: Dataload[]) => {
+ let maxIndex = -1
+ let maxValue = -1
+ dataload.forEach((day, index) => {
+ if (day.value > 0 && day.value > maxValue) {
+ maxValue = day.value
+ maxIndex = index
+ }
+ })
+ if (maxIndex === -1) return null
+ return dataload[maxIndex]
+ }
+
+ const buttonPrev = () => (
+ <IconButton
+ aria-label={t('consumption.accessibility.button_previous_value')}
+ onClick={() => handleFluidChange(-1)}
+ className="arrow-prev"
+ >
+ <Icon icon={LeftArrowIcon} size={24} />
+ </IconButton>
+ )
+
+ const buttonNext = () => (
+ <IconButton
+ aria-label={t('consumption.accessibility.button_next_value')}
+ onClick={() => handleFluidChange(1)}
+ className="arrow-next"
+ >
+ <Icon icon={RightArrowIcon} size={24} />
+ </IconButton>
+ )
+
return (
- <div className="max-consumption-container">
+ <div className="max-consumption-container" ref={containerRef}>
<StyledIcon icon={GraphIcon} size={38} />
<div className="text-16-normal title">{t('analysis.max_day')}</div>
<div className="fluid-navigation">
- {fluidTypes.length > 1 && (
- <IconButton
- aria-label={t('consumption.accessibility.button_previous_value')}
- onClick={handleChangePrevFluid}
- className="arrow-prev"
- >
- <Icon icon={LeftArrowIcon} size={24} />
- </IconButton>
- )}
- <div
- className={`text-20-bold fluid ${FluidType[
- fluidTypes[index]
- ].toLowerCase()}`}
- >
- {`${t('FLUID.' + FluidType[fluidTypes[index]] + '.LABEL')}`}
+ {fluidTypes.length > 1 && buttonPrev()}
+ <div className={`text-20-bold fluid ${fluidColor}`}>
+ {t(`FLUID.${currentFluidType}.LABEL`)}
</div>
- {fluidTypes.length > 1 && (
- <IconButton
- aria-label={t('consumption.accessibility.button_previous_value')}
- onClick={handleChangeNextFluid}
- className="arrow-next"
- >
- <Icon icon={RightArrowIcon} size={24} />
- </IconButton>
- )}
+ {fluidTypes.length > 1 && buttonNext()}
</div>
+
<div className="data-container">
- {isLoading && <Loader fluidType={fluidTypes[index]} />}
+ {isLoading && (
+ <div className="loaderContainer">
+ <Loader fluidType={fluidTypes[index]} />
+ </div>
+ )}
{!isLoading && (
<>
{!maxDayData && (
@@ -127,22 +152,23 @@ const MaxConsumptionCard: React.FC<MaxConsumptionCardProps> = ({
<div className="text-24-bold maxDay-date">
{maxDayData.date.setLocale('fr').toFormat('cccc dd LLLL')}
</div>
- <Icon
- className="dataloadvisualizer-euro-fluid-icon"
- icon={getNavPicto(fluidTypes[index], true, true)}
- size={38}
- />
- <div className="maxDay-load">
- {formatNumberValues(
- maxDayData.value,
- FluidType[fluidTypes[index]]
- )}{' '}
- {t(
- `FLUID.${FluidType[fluidTypes[index]]}.${
- maxDayData.value >= 1000 ? 'MEGAUNIT' : 'UNIT'
- }`
- )}
+ <div>
+ <DataloadSection
+ dataload={maxDayData}
+ fluidType={fluidTypes[index]}
+ dataloadSectionType={DataloadSectionType.NO_COMPARE}
+ toggleEstimationModal={() => null}
+ />
</div>
+ <BarChart
+ chartData={chartData}
+ fluidType={fluidTypes[index]}
+ timeStep={TimeStep.DAY}
+ height={height}
+ width={width}
+ isSwitching={false}
+ clickable={false}
+ />
</>
)}
</>
diff --git a/src/components/Analysis/MonthlyAnalysis.spec.tsx b/src/components/Analysis/MonthlyAnalysis.spec.tsx
index 3e3322e346673996db7f429b7b2fe69600cd0470..673cc0132691d514f30ff008be9ca3c5ffd33aa4 100644
--- a/src/components/Analysis/MonthlyAnalysis.spec.tsx
+++ b/src/components/Analysis/MonthlyAnalysis.spec.tsx
@@ -1,12 +1,11 @@
import MonthlyAnalysis from 'components/Analysis/MonthlyAnalysis'
import { FluidType } from 'enum/fluid.enum'
import { mount } from 'enzyme'
-import { DateTime } from 'luxon'
import React from 'react'
-import * as reactRedux from 'react-redux'
import { Provider } from 'react-redux'
+import { BrowserRouter } from 'react-router-dom'
import configureStore from 'redux-mock-store'
-import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
+import { mockAnalysisState } from '../../../tests/__mocks__/store'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -19,32 +18,27 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
})
jest.mock('services/consumption.service')
jest.mock('components/Analysis/ComparisonView', () => 'mock-comparison-view')
+jest.mock('components/Analysis/AnalysisConsumption', () => 'mock-analysis')
const mockStore = configureStore([])
-const mockUseSelector = jest.spyOn(reactRedux, 'useSelector')
-
describe('MonthlyAnalysis component', () => {
- mockUseSelector.mockReturnValue({
- fluidTypes: [FluidType.ELECTRICITY, FluidType.GAS],
- })
-
- it('should be rendered correctly', () => {
+ it('should be rendered correctly', async () => {
const store = mockStore({
ecolyo: {
- global: globalStateData,
+ global: { fluidTypes: [FluidType.ELECTRICITY, FluidType.GAS] },
+ analysis: mockAnalysisState,
},
})
const wrapper = mount(
- <Provider store={store}>
- <MonthlyAnalysis
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
- saveLastScrollPosition={jest.fn()}
- scrollPosition={0}
- />
- </Provider>
+ <BrowserRouter>
+ <Provider store={store}>
+ <MonthlyAnalysis
+ saveLastScrollPosition={jest.fn()}
+ scrollPosition={0}
+ />
+ </Provider>
+ </BrowserRouter>
).getElement()
expect(wrapper).toMatchSnapshot()
})
diff --git a/src/components/Analysis/MonthlyAnalysis.tsx b/src/components/Analysis/MonthlyAnalysis.tsx
index 0f5ef9a4c1b0f47acfecd8a0273dddce97ade3ec..6c8ff0f11940e6ede604cb82217e248c03313c10 100644
--- a/src/components/Analysis/MonthlyAnalysis.tsx
+++ b/src/components/Analysis/MonthlyAnalysis.tsx
@@ -2,7 +2,6 @@ import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
-import { DateTime } from 'luxon'
import { PerformanceIndicator } from 'models'
import React, { useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
@@ -19,53 +18,52 @@ import TotalAnalysisChart from './TotalAnalysisChart'
import './monthlyanalysis.scss'
interface MonthlyAnalysisProps {
- analysisDate: DateTime
saveLastScrollPosition: () => void
scrollPosition: number
}
-const MonthlyAnalysis: React.FC<MonthlyAnalysisProps> = ({
- analysisDate,
+const MonthlyAnalysis = ({
saveLastScrollPosition,
scrollPosition,
}: MonthlyAnalysisProps) => {
const client = useClient()
- const { fluidTypes } = useSelector((state: AppStore) => state.ecolyo.global)
+ const {
+ analysis: { analysisMonth },
+ global: { fluidTypes },
+ } = useSelector((state: AppStore) => state.ecolyo)
const [performanceIndicators, setPerformanceIndicators] = useState<
PerformanceIndicator[]
>([])
- const [loadAnalysis, setLoadAnalysis] = useState<boolean>(false)
const [aggregatedPerformanceIndicators, setAggregatedPerformanceIndicators] =
useState<PerformanceIndicator>({
value: 0,
compareValue: 0,
percentageVariation: 0,
})
- const [isLoading, setIsLoading] = useState<boolean>(true)
+ const [loadAnalysis, setLoadAnalysis] = useState<boolean>(true)
const configService = new ConfigService()
const fluidConfig = configService.getFluidConfig()
- const timeStep = TimeStep.MONTH
useEffect(() => {
let subscribed = true
async function populateData() {
- setIsLoading(true)
+ setLoadAnalysis(true)
const consumptionService = new ConsumptionService(client)
const performanceIndicatorService = new PerformanceIndicatorService()
const periods = {
timePeriod: {
- startDate: analysisDate.minus({ month: 1 }).startOf('month'),
- endDate: analysisDate.minus({ month: 1 }).endOf('month'),
+ startDate: analysisMonth.minus({ month: 1 }).startOf('month'),
+ endDate: analysisMonth.minus({ month: 1 }).endOf('month'),
},
comparisonTimePeriod: {
- startDate: analysisDate.minus({ month: 2 }).startOf('month'),
- endDate: analysisDate.minus({ month: 2 }).endOf('month'),
+ startDate: analysisMonth.minus({ month: 2 }).startOf('month'),
+ endDate: analysisMonth.minus({ month: 2 }).endOf('month'),
},
}
const fetchedPerformanceIndicators =
await consumptionService.getPerformanceIndicators(
periods.timePeriod,
- timeStep,
+ TimeStep.MONTH,
fluidTypes,
periods.comparisonTimePeriod
)
@@ -82,7 +80,7 @@ const MonthlyAnalysis: React.FC<MonthlyAnalysisProps> = ({
)
)
}
- setIsLoading(false)
+ setLoadAnalysis(false)
}
}
populateData()
@@ -91,73 +89,60 @@ const MonthlyAnalysis: React.FC<MonthlyAnalysisProps> = ({
saveLastScrollPosition()
subscribed = false
}
- }, [client, timeStep, fluidTypes, analysisDate, saveLastScrollPosition])
+ }, [client, fluidTypes, analysisMonth, saveLastScrollPosition])
useEffect(() => {
- if (!isLoading) {
+ if (!loadAnalysis) {
const app = document.querySelector('.app-content')
window.scrollTo(0, scrollPosition)
app?.scrollTo(0, scrollPosition)
}
- }, [isLoading, scrollPosition])
+ }, [loadAnalysis, scrollPosition])
return (
<>
- {isLoading && (
+ {loadAnalysis && (
<div className="analysis-container-spinner" aria-busy="true">
<Loader />
</div>
)}
- {!isLoading && (
+ {!loadAnalysis && (
<div className="analysis-root black">
{fluidTypes.length >= 1 ? (
<>
<div className="analysis-content">
- <ComparisonView
- analysisDate={analysisDate}
- fluidConfig={fluidConfig}
- />
+ <ComparisonView fluidConfig={fluidConfig} />
</div>
-
- {loadAnalysis && (
- <>
- <div className="analysis-content">
- <div className="card rich-card">
- <TotalAnalysisChart
- analysisDate={analysisDate}
- fluidTypes={fluidTypes}
- />
- </div>
- </div>
- <div className="analysis-content">
- <div className="card rich-card">
- <MaxConsumptionCard analysisDate={analysisDate} />
- </div>
- </div>
- <div className="analysis-content">
- <div className="card rich-card">
- <AnalysisConsumption
- aggregatedPerformanceIndicator={
- aggregatedPerformanceIndicators
- }
- performanceIndicators={performanceIndicators}
- analysisDate={analysisDate}
- />
- </div>
+ <div className="analysis-content">
+ <div className="card rich-card">
+ <TotalAnalysisChart fluidTypes={fluidTypes} />
+ </div>
+ </div>
+ <div className="analysis-content">
+ <div className="card rich-card">
+ <MaxConsumptionCard />
+ </div>
+ </div>
+ <div className="analysis-content">
+ <div className="card rich-card">
+ <AnalysisConsumption
+ aggregatedPerformanceIndicator={
+ aggregatedPerformanceIndicators
+ }
+ performanceIndicators={performanceIndicators}
+ />
+ </div>
+ </div>
+ {fluidTypes.includes(FluidType.ELECTRICITY) && (
+ <div className="analysis-content">
+ <div className="card">
+ <ElecHalfHourMonthlyAnalysis
+ perfIndicator={
+ performanceIndicators[FluidType.ELECTRICITY]
+ }
+ />
</div>
- {fluidTypes.includes(FluidType.ELECTRICITY) && (
- <div className="analysis-content">
- <div className="card">
- <ElecHalfHourMonthlyAnalysis
- analysisDate={analysisDate}
- perfIndicator={
- performanceIndicators[FluidType.ELECTRICITY]
- }
- />
- </div>
- </div>
- )}
- </>
+ </div>
)}
</>
) : (
diff --git a/src/components/Analysis/PieChart.spec.tsx b/src/components/Analysis/PieChart.spec.tsx
index 84bba0ee8718f6d486f76884a1b214e248b027ab..130cf415b532f5325ac4bd2b7dcdf7765fe2f154 100644
--- a/src/components/Analysis/PieChart.spec.tsx
+++ b/src/components/Analysis/PieChart.spec.tsx
@@ -1,5 +1,6 @@
import { DataloadState } from 'enum/dataload.enum'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import { DateTime } from 'luxon'
import { DataloadValueDetail } from 'models'
import React from 'react'
@@ -55,8 +56,8 @@ describe('PieChart component', () => {
dataloadValueDetailArray={mockDataloadValueDetailArray}
/>
</Provider>
- ).getElement()
- expect(wrapper).toMatchSnapshot()
+ )
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should open estimation modal', () => {
const store = mockStore({
diff --git a/src/components/Analysis/PieChart.tsx b/src/components/Analysis/PieChart.tsx
index a33312c7354909625a4f2c14918bfbce26bd2295..5a215454d830a7bd54e8a22dd65b6172260ff7ee 100644
--- a/src/components/Analysis/PieChart.tsx
+++ b/src/components/Analysis/PieChart.tsx
@@ -4,8 +4,7 @@ import * as d3 from 'd3'
import { DateTime } from 'luxon'
import { DataloadValueDetail } from 'models'
import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { convertDateToMonthString } from 'utils/date'
-import { formatNumberValues } from 'utils/utils'
+import { formatNumberValues, getMonthNameWithPrep } from 'utils/utils'
import './totalAnalysisChart.scss'
interface PieProps {
@@ -18,7 +17,7 @@ interface PieProps {
currentAnalysisDate: DateTime
}
-const PieChart: React.FC<PieProps> = ({
+const PieChart = ({
innerRadius,
outerRadius,
dataloadValueDetailArray,
@@ -102,7 +101,7 @@ const PieChart: React.FC<PieProps> = ({
</div>
<div className="text-16-normal date">
{t('analysis_pie.month') +
- convertDateToMonthString(currentAnalysisDate).substring(3)}
+ getMonthNameWithPrep(currentAnalysisDate.minus({ month: 1 }))}
</div>
<div
className="text-14-normal estimation-text"
diff --git a/src/components/Analysis/TotalAnalysisChart.spec.tsx b/src/components/Analysis/TotalAnalysisChart.spec.tsx
index 352503150f34a937bd30dd5c614dbc6a2b477542..bff43f5a94771ea8312207b0fc5a8cec6e91d2d2 100644
--- a/src/components/Analysis/TotalAnalysisChart.spec.tsx
+++ b/src/components/Analysis/TotalAnalysisChart.spec.tsx
@@ -1,13 +1,15 @@
import { DataloadState } from 'enum/dataload.enum'
import { FluidType } from 'enum/fluid.enum'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import { DateTime } from 'luxon'
import { Datachart } from 'models'
import React from 'react'
-import { act } from 'react-dom/test-utils'
import { Provider } from 'react-redux'
+import configureStore from 'redux-mock-store'
import { graphMonthData } from '../../../tests/__mocks__/chartData.mock'
-import { createMockEcolyoStore } from '../../../tests/__mocks__/store'
+import { mockAnalysisState } from '../../../tests/__mocks__/store'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import TotalAnalysisChart from './TotalAnalysisChart'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -29,41 +31,31 @@ jest.mock('services/consumption.service', () => {
})
jest.mock('components/Analysis/PieChart', () => 'mock-piechart')
+const mockStore = configureStore([])
+const store = mockStore({
+ ecolyo: {
+ analysis: mockAnalysisState,
+ },
+})
describe('TotalAnalysisChart component', () => {
- const store = createMockEcolyoStore()
- beforeEach(() => {
- store.clearActions()
- })
-
it('should be rendered correctly', () => {
const wrapper = mount(
<Provider store={store}>
- <TotalAnalysisChart
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
- fluidTypes={[FluidType.ELECTRICITY]}
- />
+ <TotalAnalysisChart fluidTypes={[FluidType.ELECTRICITY]} />
</Provider>
- ).getElement()
- expect(wrapper).toMatchSnapshot()
+ )
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should render several fluids and display month data', async () => {
mockgetGraphData.mockResolvedValueOnce(graphMonthData)
const wrapper = mount(
<Provider store={store}>
<TotalAnalysisChart
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
fluidTypes={[FluidType.ELECTRICITY, FluidType.WATER, FluidType.GAS]}
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find('.fluidconso').exists()).toBeTruthy()
})
it('should render empty price', async () => {
@@ -84,17 +76,11 @@ describe('TotalAnalysisChart component', () => {
const wrapper = mount(
<Provider store={store}>
<TotalAnalysisChart
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
fluidTypes={[FluidType.ELECTRICITY, FluidType.WATER]}
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find('.fluidconso').text()).toBe('--- €')
})
it('should render empty price for one fluid', async () => {
@@ -114,18 +100,10 @@ describe('TotalAnalysisChart component', () => {
mockgetGraphData.mockResolvedValueOnce(emptyData)
const wrapper = mount(
<Provider store={store}>
- <TotalAnalysisChart
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
- fluidTypes={[FluidType.ELECTRICITY]}
- />
+ <TotalAnalysisChart fluidTypes={[FluidType.ELECTRICITY]} />
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find('.fluidconso').exists()).toBe(false)
})
})
diff --git a/src/components/Analysis/TotalAnalysisChart.tsx b/src/components/Analysis/TotalAnalysisChart.tsx
index 238f2d338d1aab160603704dfa7121bc14a3dea9..1166bbc8c9a25d014691ddec1e664168244b33e4 100644
--- a/src/components/Analysis/TotalAnalysisChart.tsx
+++ b/src/components/Analysis/TotalAnalysisChart.tsx
@@ -3,25 +3,21 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
-import { DateTime } from 'luxon'
import { DataloadValueDetail, TimePeriod } from 'models'
import React, { useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
import ConsumptionDataManager from 'services/consumption.service'
+import { AppStore } from 'store'
import { getNavPicto } from 'utils/picto'
import { formatNumberValues } from 'utils/utils'
-import './analysisView.scss'
import PieChart from './PieChart'
+import './analysisView.scss'
import './totalAnalysisChart.scss'
-interface TotalAnalysisChartProps {
- analysisDate: DateTime
- fluidTypes: FluidType[]
-}
-
-const TotalAnalysisChart: React.FC<TotalAnalysisChartProps> = ({
- analysisDate,
- fluidTypes,
-}: TotalAnalysisChartProps) => {
+const TotalAnalysisChart = ({ fluidTypes }: { fluidTypes: FluidType[] }) => {
+ const { analysisMonth } = useSelector(
+ (state: AppStore) => state.ecolyo.analysis
+ )
const [dataLoadValueDetailArray, setDataLoadValueDetailArray] = useState<
DataloadValueDetail[] | null
>(null)
@@ -37,8 +33,8 @@ const TotalAnalysisChart: React.FC<TotalAnalysisChartProps> = ({
let subscribed = true
async function getTotalData() {
const timePeriod: TimePeriod = {
- startDate: analysisDate.minus({ month: 1 }).startOf('month'),
- endDate: analysisDate.minus({ month: 1 }).endOf('month'),
+ startDate: analysisMonth.minus({ month: 1 }).startOf('month'),
+ endDate: analysisMonth.minus({ month: 1 }).endOf('month'),
}
const consumptionService = new ConsumptionDataManager(client)
const monthTotalData = await consumptionService.getGraphData(
@@ -60,7 +56,8 @@ const TotalAnalysisChart: React.FC<TotalAnalysisChartProps> = ({
return () => {
subscribed = false
}
- }, [analysisDate, client, fluidTypes])
+ }, [analysisMonth, client, fluidTypes])
+
return (
<div
className="totalAnalysis-container"
@@ -77,9 +74,7 @@ const TotalAnalysisChart: React.FC<TotalAnalysisChartProps> = ({
height={radius}
innerRadius={innerRadius}
outerRadius={outerRadius}
- currentAnalysisDate={analysisDate
- .minus({ month: 1 })
- .startOf('month')}
+ currentAnalysisDate={analysisMonth}
/>
)}
{dataLoadValueDetailArray && fluidTypes.length > 1 && (
diff --git a/src/components/Analysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap b/src/components/Analysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
index 8e10e4a997cc5b3069dd4726d95840d0a235aac6..d6dfbc1e3aabc44cddbda56d180971a0e6da58bc 100644
--- a/src/components/Analysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
+++ b/src/components/Analysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
@@ -43,6 +43,448 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
]
}
isWeekend={true}
- />
+ >
+ <div
+ className="graph-elec-half-hour"
+ >
+ <svg
+ height={170}
+ width={940}
+ >
+ <AxisRight
+ fluidType={0}
+ isAnalysis={true}
+ marginRight={60}
+ marginTop={0}
+ width={940}
+ yScale={[Function]}
+ >
+ <g
+ className="axis y"
+ transform="translate(880, 0)"
+ />
+ </AxisRight>
+ <g
+ transform="translate(10,0)"
+ >
+ <Bar
+ compare={false}
+ compareDataload={null}
+ dataload={
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ }
+ }
+ fluidType={0}
+ height={140}
+ index={0}
+ isDuel={false}
+ isSwitching={false}
+ key="0"
+ timeStep={10}
+ weekdays="weekend"
+ xScale={[Function]}
+ yScale={[Function]}
+ >
+ <g>
+ <g
+ className="barContainer "
+ transform="translate(79.09090909090912, -40)"
+ >
+ <rect
+ className="background-undefined"
+ fill="#E0E0E0"
+ height={180}
+ onClick={[Function]}
+ width={711.8181818181818}
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ transform="translate(79.09090909090912, 0)"
+ >
+ <defs>
+ <linearGradient
+ className="bar-ELECTRICITY weekend bounce-3 delay--0 "
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </linearGradient>
+ </defs>
+ <path
+ className="bar-ELECTRICITY weekend bounce-3 delay--0 "
+ d="M0,4 a4,4 0 0 1 4,-4h-5a4,4 0 0 1 4,4v136h-3z"
+ fill="url(#gradient)"
+ onAnimationEnd={[Function]}
+ onClick={[Function]}
+ />
+ </g>
+ </g>
+ </Bar>
+ <Bar
+ compare={false}
+ compareDataload={null}
+ dataload={
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ }
+ }
+ fluidType={0}
+ height={140}
+ index={1}
+ isDuel={false}
+ isSwitching={false}
+ key="1"
+ timeStep={10}
+ weekdays="weekend"
+ xScale={[Function]}
+ yScale={[Function]}
+ >
+ <g>
+ <g
+ className="barContainer "
+ transform="translate(79.09090909090912, -40)"
+ >
+ <rect
+ className="background-undefined"
+ fill="#E0E0E0"
+ height={180}
+ onClick={[Function]}
+ width={711.8181818181818}
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ transform="translate(79.09090909090912, 0)"
+ >
+ <defs>
+ <linearGradient
+ className="bar-ELECTRICITY weekend bounce-3 delay--1 "
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </linearGradient>
+ </defs>
+ <path
+ className="bar-ELECTRICITY weekend bounce-3 delay--1 "
+ d="M0,4 a4,4 0 0 1 4,-4h-5a4,4 0 0 1 4,4v136h-3z"
+ fill="url(#gradient)"
+ onAnimationEnd={[Function]}
+ onClick={[Function]}
+ />
+ </g>
+ </g>
+ </Bar>
+ <Bar
+ compare={false}
+ compareDataload={null}
+ dataload={
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ }
+ }
+ fluidType={0}
+ height={140}
+ index={2}
+ isDuel={false}
+ isSwitching={false}
+ key="2"
+ timeStep={10}
+ weekdays="weekend"
+ xScale={[Function]}
+ yScale={[Function]}
+ >
+ <g>
+ <g
+ className="barContainer "
+ transform="translate(79.09090909090912, -40)"
+ >
+ <rect
+ className="background-undefined"
+ fill="#E0E0E0"
+ height={180}
+ onClick={[Function]}
+ width={711.8181818181818}
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ transform="translate(79.09090909090912, 0)"
+ >
+ <defs>
+ <linearGradient
+ className="bar-ELECTRICITY weekend bounce-3 delay--2 "
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </linearGradient>
+ </defs>
+ <path
+ className="bar-ELECTRICITY weekend bounce-3 delay--2 "
+ d="M0,4 a4,4 0 0 1 4,-4h-5a4,4 0 0 1 4,4v136h-3z"
+ fill="url(#gradient)"
+ onAnimationEnd={[Function]}
+ onClick={[Function]}
+ />
+ </g>
+ </g>
+ </Bar>
+ <Bar
+ compare={false}
+ compareDataload={null}
+ dataload={
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ }
+ }
+ fluidType={0}
+ height={140}
+ index={3}
+ isDuel={false}
+ isSwitching={false}
+ key="3"
+ timeStep={10}
+ weekdays="weekend"
+ xScale={[Function]}
+ yScale={[Function]}
+ >
+ <g>
+ <g
+ className="barContainer "
+ transform="translate(79.09090909090912, -40)"
+ >
+ <rect
+ className="background-undefined"
+ fill="#E0E0E0"
+ height={180}
+ onClick={[Function]}
+ width={711.8181818181818}
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ transform="translate(79.09090909090912, 0)"
+ >
+ <defs>
+ <linearGradient
+ className="bar-ELECTRICITY weekend bounce-3 delay--3 "
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </linearGradient>
+ </defs>
+ <path
+ className="bar-ELECTRICITY weekend bounce-3 delay--3 "
+ d="M0,4 a4,4 0 0 1 4,-4h-5a4,4 0 0 1 4,4v136h-3z"
+ fill="url(#gradient)"
+ onAnimationEnd={[Function]}
+ onClick={[Function]}
+ />
+ </g>
+ </g>
+ </Bar>
+ </g>
+ <AxisBottom
+ data={
+ Array [
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ },
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ },
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ },
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ },
+ ]
+ }
+ height={170}
+ isDuel={false}
+ marginBottom={30}
+ marginLeft={10}
+ timeStep={10}
+ xScale={[Function]}
+ >
+ <g
+ className="axis x"
+ transform="translate(10, 140)"
+ >
+ <g
+ className="tick"
+ key="0"
+ opacity="1"
+ transform="translate(79.09090909090912, 0)"
+ >
+ <TextAxis
+ dataload={
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ }
+ }
+ displayAllDays={false}
+ index={0}
+ timeStep={10}
+ width={355.9090909090909}
+ >
+ <text
+ dy="0.71em"
+ x={355.9090909090909}
+ y="10"
+ >
+ <tspan
+ className="tick-text chart-ticks-x-text"
+ textAnchor="middle"
+ >
+ 0
+ </tspan>
+ </text>
+ </TextAxis>
+ </g>
+ <g
+ className="tick"
+ key="1"
+ opacity="1"
+ transform="translate(79.09090909090912, 0)"
+ >
+ <TextAxis
+ dataload={
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ }
+ }
+ displayAllDays={false}
+ index={1}
+ timeStep={10}
+ width={355.9090909090909}
+ />
+ </g>
+ <g
+ className="tick"
+ key="2"
+ opacity="1"
+ transform="translate(79.09090909090912, 0)"
+ >
+ <TextAxis
+ dataload={
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ }
+ }
+ displayAllDays={false}
+ index={2}
+ timeStep={10}
+ width={355.9090909090909}
+ />
+ </g>
+ <g
+ className="tick"
+ key="3"
+ opacity="1"
+ transform="translate(79.09090909090912, 0)"
+ >
+ <TextAxis
+ dataload={
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ }
+ }
+ displayAllDays={false}
+ index={3}
+ timeStep={10}
+ width={355.9090909090909}
+ />
+ </g>
+ </g>
+ </AxisBottom>
+ </svg>
+ </div>
+ </ElecHalfHourChart>
</Provider>
`;
diff --git a/src/components/Analysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap b/src/components/Analysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
index 1e836d9ae8cffd24ddee784604c37e2c3019a2a5..001bf7012bf8018fbd8c6957ecdaccdb47b07921 100644
--- a/src/components/Analysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
+++ b/src/components/Analysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
@@ -1,389 +1,413 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when isHalfHourActivated is false 1`] = `
-<ElecHalfHourMonthlyAnalysis
- analysisDate={"2021-07-01T00:00:00.000Z"}
- perfIndicator={
+<Provider
+ store={
Object {
- "compareValue": null,
- "percentageVariation": null,
- "price": null,
- "value": 10,
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
}
}
>
- <div
- className="special-elec-container"
+ <ElecHalfHourMonthlyAnalysis
+ perfIndicator={
+ Object {
+ "compareValue": null,
+ "percentageVariation": null,
+ "price": null,
+ "value": 10,
+ }
+ }
>
- <Icon
- className="elec-icon"
- icon="test-file-stub"
- size={42}
- spin={false}
+ <div
+ className="special-elec-container"
>
- <Component
- className="elec-icon styles__icon___23x3R"
- height={42}
- style={Object {}}
- width={42}
+ <Icon
+ className="elec-icon"
+ icon="test-file-stub"
+ size={42}
+ spin={false}
>
- <svg
+ <Component
className="elec-icon styles__icon___23x3R"
height={42}
style={Object {}}
width={42}
>
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- <div
- className="text-18-normal title"
- >
- special_elec.title
- </div>
- <div
- className="activation-text text-18-normal"
- >
- timestep.half_an_hour.analysis_waiting_data
+ <svg
+ className="elec-icon styles__icon___23x3R"
+ height={42}
+ style={Object {}}
+ width={42}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ <div
+ className="text-18-normal title"
+ >
+ special_elec.title
+ </div>
+ <div
+ className="activation-text text-18-normal"
+ >
+ timestep.half_an_hour.analysis_waiting_data
+ </div>
+ <mock-elecinfomodal
+ handleCloseClick={[Function]}
+ open={false}
+ />
</div>
- <mock-elecinfomodal
- handleCloseClick={[Function]}
- open={false}
- />
- </div>
-</ElecHalfHourMonthlyAnalysis>
+ </ElecHalfHourMonthlyAnalysis>
+</Provider>
`;
exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when isHalfHourActivated is true 1`] = `
-<ElecHalfHourMonthlyAnalysis
- analysisDate={"2021-07-01T00:00:00.000Z"}
- perfIndicator={
+<Provider
+ store={
Object {
- "compareValue": null,
- "percentageVariation": null,
- "price": null,
- "value": 10,
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
}
}
>
- <div
- className="special-elec-container"
+ <ElecHalfHourMonthlyAnalysis
+ perfIndicator={
+ Object {
+ "compareValue": null,
+ "percentageVariation": null,
+ "price": null,
+ "value": 10,
+ }
+ }
>
- <Icon
- className="elec-icon"
- icon="test-file-stub"
- size={42}
- spin={false}
+ <div
+ className="special-elec-container"
>
- <Component
- className="elec-icon styles__icon___23x3R"
- height={42}
- style={Object {}}
- width={42}
+ <Icon
+ className="elec-icon"
+ icon="test-file-stub"
+ size={42}
+ spin={false}
>
- <svg
+ <Component
className="elec-icon styles__icon___23x3R"
height={42}
style={Object {}}
width={42}
>
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- <div
- className="text-18-normal title"
- >
- special_elec.title
- </div>
- <div
- className="navigator"
- >
- <WithStyles(ForwardRef(IconButton))
- aria-label="consumption.accessibility.button_previous_value"
- className="arrow-prev"
- onClick={[Function]}
+ <svg
+ className="elec-icon styles__icon___23x3R"
+ height={42}
+ style={Object {}}
+ width={42}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ <div
+ className="text-18-normal title"
>
- <ForwardRef(IconButton)
+ special_elec.title
+ </div>
+ <div
+ className="navigator"
+ >
+ <WithStyles(ForwardRef(IconButton))
aria-label="consumption.accessibility.button_previous_value"
className="arrow-prev"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
onClick={[Function]}
>
- <WithStyles(ForwardRef(ButtonBase))
+ <ForwardRef(IconButton)
aria-label="consumption.accessibility.button_previous_value"
- centerRipple={true}
- className="MuiIconButton-root arrow-prev"
- disabled={false}
- focusRipple={true}
+ className="arrow-prev"
+ classes={
+ Object {
+ "colorInherit": "MuiIconButton-colorInherit",
+ "colorPrimary": "MuiIconButton-colorPrimary",
+ "colorSecondary": "MuiIconButton-colorSecondary",
+ "disabled": "Mui-disabled",
+ "edgeEnd": "MuiIconButton-edgeEnd",
+ "edgeStart": "MuiIconButton-edgeStart",
+ "label": "MuiIconButton-label",
+ "root": "MuiIconButton-root",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
onClick={[Function]}
>
- <ForwardRef(ButtonBase)
+ <WithStyles(ForwardRef(ButtonBase))
aria-label="consumption.accessibility.button_previous_value"
centerRipple={true}
className="MuiIconButton-root arrow-prev"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
disabled={false}
focusRipple={true}
onClick={[Function]}
>
- <button
+ <ForwardRef(ButtonBase)
aria-label="consumption.accessibility.button_previous_value"
- className="MuiButtonBase-root MuiIconButton-root arrow-prev"
+ centerRipple={true}
+ className="MuiIconButton-root arrow-prev"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
disabled={false}
- onBlur={[Function]}
+ focusRipple={true}
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"
+ <button
+ aria-label="consumption.accessibility.button_previous_value"
+ className="MuiButtonBase-root MuiIconButton-root arrow-prev"
+ 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"
>
- <Icon
- icon="test-file-stub"
- size={24}
- spin={false}
+ <span
+ className="MuiIconButton-label"
>
- <Component
- className="styles__icon___23x3R"
- height={24}
- style={Object {}}
- width={24}
+ <Icon
+ icon="test-file-stub"
+ size={24}
+ spin={false}
>
- <svg
+ <Component
className="styles__icon___23x3R"
height={24}
style={Object {}}
width={24}
>
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
+ <svg
+ className="styles__icon___23x3R"
+ height={24}
+ style={Object {}}
+ width={24}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </span>
+ <WithStyles(memo)
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"
+ <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",
+ }
+ }
>
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- <div
- className="average text-18-normal"
- >
- <div
- className="text-1"
- >
- special_elec.average
- </div>
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(IconButton)>
+ </WithStyles(ForwardRef(IconButton))>
<div
- className="text-2 text-18-bold"
+ className="average text-18-normal"
>
- special_elec.weektype
-
- <span
- className="weekend"
+ <div
+ className="text-1"
>
- special_elec.weekend
- </span>
+ special_elec.average
+ </div>
+ <div
+ className="text-2 text-18-bold"
+ >
+ special_elec.weektype
+
+ <span
+ className="weekend"
+ >
+ special_elec.weekend
+ </span>
+ </div>
</div>
- </div>
- <WithStyles(ForwardRef(IconButton))
- aria-label="consumption.accessibility.button_previous_value"
- className="arrow-next"
- onClick={[Function]}
- >
- <ForwardRef(IconButton)
+ <WithStyles(ForwardRef(IconButton))
aria-label="consumption.accessibility.button_previous_value"
className="arrow-next"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
onClick={[Function]}
>
- <WithStyles(ForwardRef(ButtonBase))
+ <ForwardRef(IconButton)
aria-label="consumption.accessibility.button_previous_value"
- centerRipple={true}
- className="MuiIconButton-root arrow-next"
- disabled={false}
- focusRipple={true}
+ className="arrow-next"
+ classes={
+ Object {
+ "colorInherit": "MuiIconButton-colorInherit",
+ "colorPrimary": "MuiIconButton-colorPrimary",
+ "colorSecondary": "MuiIconButton-colorSecondary",
+ "disabled": "Mui-disabled",
+ "edgeEnd": "MuiIconButton-edgeEnd",
+ "edgeStart": "MuiIconButton-edgeStart",
+ "label": "MuiIconButton-label",
+ "root": "MuiIconButton-root",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
onClick={[Function]}
>
- <ForwardRef(ButtonBase)
+ <WithStyles(ForwardRef(ButtonBase))
aria-label="consumption.accessibility.button_previous_value"
centerRipple={true}
className="MuiIconButton-root arrow-next"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
disabled={false}
focusRipple={true}
onClick={[Function]}
>
- <button
+ <ForwardRef(ButtonBase)
aria-label="consumption.accessibility.button_previous_value"
- className="MuiButtonBase-root MuiIconButton-root arrow-next"
+ centerRipple={true}
+ className="MuiIconButton-root arrow-next"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
disabled={false}
- onBlur={[Function]}
+ focusRipple={true}
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"
+ <button
+ aria-label="consumption.accessibility.button_previous_value"
+ className="MuiButtonBase-root MuiIconButton-root arrow-next"
+ 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"
>
- <Icon
- icon="test-file-stub"
- size={24}
- spin={false}
+ <span
+ className="MuiIconButton-label"
>
- <Component
- className="styles__icon___23x3R"
- height={24}
- style={Object {}}
- width={24}
+ <Icon
+ icon="test-file-stub"
+ size={24}
+ spin={false}
>
- <svg
+ <Component
className="styles__icon___23x3R"
height={24}
style={Object {}}
width={24}
>
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
+ <svg
+ className="styles__icon___23x3R"
+ height={24}
+ style={Object {}}
+ width={24}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </span>
+ <WithStyles(memo)
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"
+ <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",
+ }
+ }
>
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(IconButton)>
+ </WithStyles(ForwardRef(IconButton))>
+ </div>
+ <p
+ className="text-20-bold no_data"
+ >
+ analysis.no_data
+ </p>
+ <mock-elecinfomodal
+ handleCloseClick={[Function]}
+ open={false}
+ />
</div>
- <p
- className="text-20-bold no_data"
- >
- analysis.no_data
- </p>
- <mock-elecinfomodal
- handleCloseClick={[Function]}
- open={false}
- />
- </div>
-</ElecHalfHourMonthlyAnalysis>
+ </ElecHalfHourMonthlyAnalysis>
+</Provider>
`;
diff --git a/src/components/Analysis/__snapshots__/MaxConsumptionCard.spec.tsx.snap b/src/components/Analysis/__snapshots__/MaxConsumptionCard.spec.tsx.snap
index ff4e013f8c35fdf709df8140c0f994e51baa984b..8a146488c5ec22dcd6575e849da9afab08d37e36 100644
--- a/src/components/Analysis/__snapshots__/MaxConsumptionCard.spec.tsx.snap
+++ b/src/components/Analysis/__snapshots__/MaxConsumptionCard.spec.tsx.snap
@@ -13,8 +13,520 @@ exports[`MaxConsumptionCard component should be rendered correctly 1`] = `
}
}
>
- <MaxConsumptionCard
- analysisDate={"2021-07-01T00:00:00.000Z"}
- />
+ <MaxConsumptionCard>
+ <div
+ className="max-consumption-container"
+ >
+ <StyledIcon
+ icon="test-file-stub"
+ size={38}
+ >
+ <Icon
+ aria-hidden={true}
+ icon="test-file-stub"
+ size={38}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={38}
+ style={Object {}}
+ width={38}
+ >
+ <svg
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={38}
+ style={Object {}}
+ width={38}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <div
+ className="text-16-normal title"
+ >
+ analysis.max_day
+ </div>
+ <div
+ className="fluid-navigation"
+ >
+ <WithStyles(ForwardRef(IconButton))
+ aria-label="consumption.accessibility.button_previous_value"
+ className="arrow-prev"
+ onClick={[Function]}
+ >
+ <ForwardRef(IconButton)
+ aria-label="consumption.accessibility.button_previous_value"
+ className="arrow-prev"
+ classes={
+ Object {
+ "colorInherit": "MuiIconButton-colorInherit",
+ "colorPrimary": "MuiIconButton-colorPrimary",
+ "colorSecondary": "MuiIconButton-colorSecondary",
+ "disabled": "Mui-disabled",
+ "edgeEnd": "MuiIconButton-edgeEnd",
+ "edgeStart": "MuiIconButton-edgeStart",
+ "label": "MuiIconButton-label",
+ "root": "MuiIconButton-root",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="consumption.accessibility.button_previous_value"
+ centerRipple={true}
+ className="MuiIconButton-root arrow-prev"
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="consumption.accessibility.button_previous_value"
+ centerRipple={true}
+ className="MuiIconButton-root arrow-prev"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <button
+ aria-label="consumption.accessibility.button_previous_value"
+ className="MuiButtonBase-root MuiIconButton-root arrow-prev"
+ 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"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={24}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={24}
+ style={Object {}}
+ width={24}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={24}
+ style={Object {}}
+ width={24}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </span>
+ <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)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(IconButton)>
+ </WithStyles(ForwardRef(IconButton))>
+ <div
+ className="text-20-bold fluid electricity"
+ >
+ FLUID.ELECTRICITY.LABEL
+ </div>
+ <WithStyles(ForwardRef(IconButton))
+ aria-label="consumption.accessibility.button_next_value"
+ className="arrow-next"
+ onClick={[Function]}
+ >
+ <ForwardRef(IconButton)
+ aria-label="consumption.accessibility.button_next_value"
+ className="arrow-next"
+ classes={
+ Object {
+ "colorInherit": "MuiIconButton-colorInherit",
+ "colorPrimary": "MuiIconButton-colorPrimary",
+ "colorSecondary": "MuiIconButton-colorSecondary",
+ "disabled": "Mui-disabled",
+ "edgeEnd": "MuiIconButton-edgeEnd",
+ "edgeStart": "MuiIconButton-edgeStart",
+ "label": "MuiIconButton-label",
+ "root": "MuiIconButton-root",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="consumption.accessibility.button_next_value"
+ centerRipple={true}
+ className="MuiIconButton-root arrow-next"
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="consumption.accessibility.button_next_value"
+ centerRipple={true}
+ className="MuiIconButton-root arrow-next"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <button
+ aria-label="consumption.accessibility.button_next_value"
+ className="MuiButtonBase-root MuiIconButton-root arrow-next"
+ 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"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={24}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={24}
+ style={Object {}}
+ width={24}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={24}
+ style={Object {}}
+ width={24}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </span>
+ <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)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(IconButton)>
+ </WithStyles(ForwardRef(IconButton))>
+ </div>
+ <div
+ className="data-container"
+ >
+ <div
+ className="text-24-bold maxDay-date"
+ >
+ jeudi 01 octobre
+ </div>
+ <div>
+ <DataloadSection
+ dataload={
+ Object {
+ "date": "2020-10-01T00:00:00.000Z",
+ "state": "AGGREGATED_VALID",
+ "value": 69.18029999999999,
+ "valueDetail": Array [
+ Object {
+ "state": "VALID",
+ "value": 45.127739999999996,
+ },
+ Object {
+ "state": "VALID",
+ "value": 0.9048899999999999,
+ },
+ Object {
+ "state": "VALID",
+ "value": 23.147669999999998,
+ },
+ ],
+ }
+ }
+ dataloadSectionType="NO_COMPARE"
+ fluidType={0}
+ toggleEstimationModal={[Function]}
+ >
+ <div
+ className="dataloadvisualizer-section"
+ >
+ <div
+ className="dataloadvisualizer-value text-36-bold electricity"
+ >
+ <DataloadSectionValue
+ dataload={
+ Object {
+ "date": "2020-10-01T00:00:00.000Z",
+ "state": "AGGREGATED_VALID",
+ "value": 69.18029999999999,
+ "valueDetail": Array [
+ Object {
+ "state": "VALID",
+ "value": 45.127739999999996,
+ },
+ Object {
+ "state": "VALID",
+ "value": 0.9048899999999999,
+ },
+ Object {
+ "state": "VALID",
+ "value": 23.147669999999998,
+ },
+ ],
+ }
+ }
+ dataloadSectionType="NO_COMPARE"
+ fluidType={0}
+ toggleEstimationModal={[Function]}
+ >
+ 69,18
+ <span
+ className="text-18-normal"
+ >
+ FLUID.ELECTRICITY.UNIT
+ </span>
+ </DataloadSectionValue>
+ </div>
+ <DataloadSectionDetail
+ dataload={
+ Object {
+ "date": "2020-10-01T00:00:00.000Z",
+ "state": "AGGREGATED_VALID",
+ "value": 69.18029999999999,
+ "valueDetail": Array [
+ Object {
+ "state": "VALID",
+ "value": 45.127739999999996,
+ },
+ Object {
+ "state": "VALID",
+ "value": 0.9048899999999999,
+ },
+ Object {
+ "state": "VALID",
+ "value": 23.147669999999998,
+ },
+ ],
+ }
+ }
+ dataloadSectionType="NO_COMPARE"
+ fluidType={0}
+ >
+ <div
+ className="dataloadvisualizer-euro text-16-normal electricity"
+ >
+ 12,04 €
+ </div>
+ </DataloadSectionDetail>
+ </div>
+ </DataloadSection>
+ </div>
+ <mock-BarChart
+ chartData={
+ Object {
+ "actualData": Array [
+ Object {
+ "date": "2020-10-01T00:00:00.000Z",
+ "state": "AGGREGATED_VALID",
+ "value": 69.18029999999999,
+ "valueDetail": Array [
+ Object {
+ "state": "VALID",
+ "value": 45.127739999999996,
+ },
+ Object {
+ "state": "VALID",
+ "value": 0.9048899999999999,
+ },
+ Object {
+ "state": "VALID",
+ "value": 23.147669999999998,
+ },
+ ],
+ },
+ Object {
+ "date": "2020-10-02T00:00:00.000Z",
+ "state": "AGGREGATED_VALID",
+ "value": 61.65554999999999,
+ "valueDetail": Array [
+ Object {
+ "state": "VALID",
+ "value": 40.21918999999999,
+ },
+ Object {
+ "state": "VALID",
+ "value": 0.8064649999999999,
+ },
+ Object {
+ "state": "VALID",
+ "value": 20.629894999999998,
+ },
+ ],
+ },
+ Object {
+ "date": "2020-10-03T00:00:00.000Z",
+ "state": "EMPTY",
+ "value": -1,
+ "valueDetail": null,
+ },
+ ],
+ "comparisonData": Array [
+ Object {
+ "date": "2020-09-01T00:00:00.000Z",
+ "state": "AGGREGATED_VALID",
+ "value": 54.090509999999995,
+ "valueDetail": Array [
+ Object {
+ "state": "VALID",
+ "value": 35.284358,
+ },
+ Object {
+ "state": "VALID",
+ "value": 0.707513,
+ },
+ Object {
+ "state": "VALID",
+ "value": 18.098639,
+ },
+ ],
+ },
+ Object {
+ "date": "2020-09-02T00:00:00.000Z",
+ "state": "AGGREGATED_VALID",
+ "value": 56.57427,
+ "valueDetail": Array [
+ Object {
+ "state": "VALID",
+ "value": 36.904565999999996,
+ },
+ Object {
+ "state": "VALID",
+ "value": 0.740001,
+ },
+ Object {
+ "state": "VALID",
+ "value": 18.929703,
+ },
+ ],
+ },
+ Object {
+ "date": "2020-09-03T00:00:00.000Z",
+ "state": "EMPTY",
+ "value": -1,
+ "valueDetail": null,
+ },
+ ],
+ }
+ }
+ clickable={false}
+ fluidType={0}
+ height={250}
+ isSwitching={false}
+ timeStep={20}
+ width={940}
+ />
+ </div>
+ </div>
+ </MaxConsumptionCard>
</Provider>
`;
diff --git a/src/components/Analysis/__snapshots__/MonthlyAnalysis.spec.tsx.snap b/src/components/Analysis/__snapshots__/MonthlyAnalysis.spec.tsx.snap
index df6db5b4dd2d3cd1752ae4b844b1561999e79bce..58f132c9cc13dd48fdcb95e671b7b7eeffc0fada 100644
--- a/src/components/Analysis/__snapshots__/MonthlyAnalysis.spec.tsx.snap
+++ b/src/components/Analysis/__snapshots__/MonthlyAnalysis.spec.tsx.snap
@@ -1,22 +1,23 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`MonthlyAnalysis component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
+<BrowserRouter>
+ <Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
}
- }
->
- <MonthlyAnalysis
- analysisDate={"2021-07-01T00:00:00.000Z"}
- saveLastScrollPosition={[MockFunction]}
- scrollPosition={0}
- />
-</Provider>
+ >
+ <MonthlyAnalysis
+ saveLastScrollPosition={[MockFunction]}
+ scrollPosition={0}
+ />
+ </Provider>
+</BrowserRouter>
`;
diff --git a/src/components/Analysis/__snapshots__/PieChart.spec.tsx.snap b/src/components/Analysis/__snapshots__/PieChart.spec.tsx.snap
index b630956172b5d0b582dae7a95fc56e3f765a3a24..068b2c5beea6874e586213b5186fc2958ef45d50 100644
--- a/src/components/Analysis/__snapshots__/PieChart.spec.tsx.snap
+++ b/src/components/Analysis/__snapshots__/PieChart.spec.tsx.snap
@@ -36,6 +36,472 @@ exports[`PieChart component should be rendered correctly 1`] = `
outerRadius={300}
totalValue={60}
width={300}
- />
+ >
+ <div
+ className="pie-container"
+ style={
+ Object {
+ "height": 300,
+ "width": 300,
+ }
+ }
+ >
+ <svg
+ height={300}
+ width={300}
+ >
+ <defs>
+ <filter
+ height="300%"
+ id="glow"
+ width="300%"
+ x="-75%"
+ y="-75%"
+ >
+ <feGaussianBlur
+ result="coloredBlur"
+ stdDeviation="10"
+ />
+ <feMerge>
+ <feMergeNode
+ in="coloredBlur"
+ />
+ <feMergeNode
+ in="SourceGraphic"
+ />
+ </feMerge>
+ </filter>
+ </defs>
+ <g
+ transform="translate(300 300)"
+ />
+ </svg>
+ <div
+ className="pie-center"
+ style={
+ Object {
+ "height": 300,
+ "left": 0,
+ "top": 0,
+ "width": 300,
+ }
+ }
+ >
+ <div
+ className="text-36-bold"
+ >
+ 60,00
+ <span
+ className="euro-unit"
+ >
+ FLUID.MULTIFLUID.UNIT
+ </span>
+ </div>
+ <div
+ className="text-16-normal date"
+ >
+ analysis_pie.monthde juin
+ </div>
+ <div
+ className="text-14-normal estimation-text"
+ onClick={[Function]}
+ >
+ <span
+ className="estimated"
+ >
+ analysis_pie.estimation
+ </span>
+ <span
+ className="estimated"
+ >
+ analysis_pie.estimation2
+ </span>
+ </div>
+ <div
+ className="circle"
+ style={
+ Object {
+ "height": 300,
+ "left": 0,
+ "top": 0,
+ "width": 300,
+ }
+ }
+ />
+ </div>
+ <EstimatedConsumptionModal
+ 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 {
+ "activatedOpacity": 0.12,
+ "active": "rgba(0, 0, 0, 0.54)",
+ "disabled": "rgba(0, 0, 0, 0.26)",
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
+ "disabledOpacity": 0.38,
+ "focus": "rgba(0, 0, 0, 0.12)",
+ "focusOpacity": 0.12,
+ "hover": "rgba(0, 0, 0, 0.04)",
+ "hoverOpacity": 0.04,
+ "selected": "rgba(0, 0, 0, 0.08)",
+ "selectedOpacity": 0.08,
+ },
+ "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}
+ disableEscapeKeyDown={false}
+ onClose={[Function]}
+ open={false}
+ />
+ </ForwardRef(Dialog)>
+ </WithStyles(ForwardRef(Dialog))>
+ </EstimatedConsumptionModal>
+ </div>
+ </PieChart>
</Provider>
`;
diff --git a/src/components/Analysis/__snapshots__/TotalAnalysisChart.spec.tsx.snap b/src/components/Analysis/__snapshots__/TotalAnalysisChart.spec.tsx.snap
index f3c1e0102d9d3b875fd8535f8589558562a5d734..c5f2907e27ed682ca5092e5687f7db37e7b2d7b5 100644
--- a/src/components/Analysis/__snapshots__/TotalAnalysisChart.spec.tsx.snap
+++ b/src/components/Analysis/__snapshots__/TotalAnalysisChart.spec.tsx.snap
@@ -14,12 +14,26 @@ exports[`TotalAnalysisChart component should be rendered correctly 1`] = `
}
>
<TotalAnalysisChart
- analysisDate={"2021-07-01T00:00:00.000Z"}
fluidTypes={
Array [
0,
]
}
- />
+ >
+ <div
+ className="totalAnalysis-container"
+ style={
+ Object {
+ "minHeight": 475,
+ }
+ }
+ >
+ <div
+ className="text-24-normal title"
+ >
+ analysis_pie.total
+ </div>
+ </div>
+ </TotalAnalysisChart>
</Provider>
`;
diff --git a/src/components/Analysis/maxConsumptionCard.scss b/src/components/Analysis/maxConsumptionCard.scss
index a3da1133e6da3cb29116b85df4f83692f4bc0fd3..66ac47a38804821d41f9026d16341d8fa1a9e6b5 100644
--- a/src/components/Analysis/maxConsumptionCard.scss
+++ b/src/components/Analysis/maxConsumptionCard.scss
@@ -16,6 +16,9 @@
justify-content: space-between;
align-items: center;
width: 100%;
+ div {
+ font-weight: 900;
+ }
}
.fluid {
min-width: 120px;
@@ -40,10 +43,25 @@
flex-direction: column;
justify-content: space-between;
align-items: center;
+
+ .loaderContainer {
+ height: 22rem;
+ display: flex;
+ }
.maxDay-date {
text-transform: capitalize;
- margin: 0.8rem;
+ margin: 0.5rem 0;
text-align: center;
}
+ .maxDay-load span {
+ font-size: 2rem;
+ font-weight: 700;
+ }
}
}
+
+.dataloadvisualizer-section {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
diff --git a/src/components/Challenge/ChallengeCard.tsx b/src/components/Challenge/ChallengeCard.tsx
index 5088f4347401fda2ebc7713f4d5ea43cf60ea5c3..a6788d190ade10f3defc8b7bbe3f389b94aa2b2c 100644
--- a/src/components/Challenge/ChallengeCard.tsx
+++ b/src/components/Challenge/ChallengeCard.tsx
@@ -1,12 +1,12 @@
import { UserChallengeState } from 'enum/userChallenge.enum'
import { UserChallenge } from 'models'
import React from 'react'
-import './challengeCard.scss'
import ChallengeCardDone from './ChallengeCardDone'
import ChallengeCardLast from './ChallengeCardLast'
import ChallengeCardLocked from './ChallengeCardLocked'
import ChallengeCardOnGoing from './ChallengeCardOnGoing'
import ChallengeCardUnlocked from './ChallengeCardUnlocked'
+import './challengeCard.scss'
interface ChallengeCardProps {
userChallenge?: UserChallenge
@@ -18,7 +18,7 @@ interface ChallengeCardProps {
moveToSlide: (slideIndex: number) => void
}
-const ChallengeCard: React.FC<ChallengeCardProps> = ({
+const ChallengeCard = ({
userChallenge,
indexSlider,
index,
diff --git a/src/components/Challenge/ChallengeCardDone.tsx b/src/components/Challenge/ChallengeCardDone.tsx
index 969e55c0f4c78fe10974e4245c85ce74cdaa9a44..9430da1fbfba471072a8763eb91278819e8d9315 100644
--- a/src/components/Challenge/ChallengeCardDone.tsx
+++ b/src/components/Challenge/ChallengeCardDone.tsx
@@ -14,13 +14,11 @@ import {
} from 'utils/utils'
import './challengeCardDone.scss'
-interface ChallengeCardDoneProps {
- userChallenge: UserChallenge
-}
-
-const ChallengeCardDone: React.FC<ChallengeCardDoneProps> = ({
+const ChallengeCardDone = ({
userChallenge,
-}: ChallengeCardDoneProps) => {
+}: {
+ userChallenge: UserChallenge
+}) => {
const { t } = useI18n()
const navigate = useNavigate()
const [winIcon, setWinIcon] = useState<string>(defaultIcon)
diff --git a/src/components/Challenge/ChallengeCardLast.spec.tsx b/src/components/Challenge/ChallengeCardLast.spec.tsx
index b9b4cee801ba40f5a8014e7f04d391e71d86cf5d..be445a7a2433ef341f63e569ae1b5e09c0df31ef 100644
--- a/src/components/Challenge/ChallengeCardLast.spec.tsx
+++ b/src/components/Challenge/ChallengeCardLast.spec.tsx
@@ -1,8 +1,10 @@
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import React from 'react'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import ChallengeCardLast from './ChallengeCardLast'
// Value coming from jest.config
@@ -27,13 +29,14 @@ describe('ChallengeCardLast component', () => {
},
})
- it('should be rendered correctly', () => {
+ it('should be rendered correctly', async () => {
const wrapper = mount(
<Provider store={store}>
<ChallengeCardLast />
</Provider>
)
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should open SAU new idea link', () => {
diff --git a/src/components/Challenge/ChallengeCardLast.tsx b/src/components/Challenge/ChallengeCardLast.tsx
index 252ad7ec0eb7aa76703eab79af70e9b1d6287923..c811000446f86b208f252d79a020f4f2ce764516 100644
--- a/src/components/Challenge/ChallengeCardLast.tsx
+++ b/src/components/Challenge/ChallengeCardLast.tsx
@@ -8,7 +8,7 @@ import './challengeCardLast.scss'
declare let __SAU_IDEA_DIRECT_LINK__: string
-const ChallengeCardLast: React.FC = () => {
+const ChallengeCardLast = () => {
const { t } = useI18n()
const client = useClient()
diff --git a/src/components/Challenge/ChallengeCardLocked.tsx b/src/components/Challenge/ChallengeCardLocked.tsx
index 6624aae9e1b3ff4bdb2380b052ab94320ec88208..9d8a5d5ca9960e4d87f2c182b1d509527283a359 100644
--- a/src/components/Challenge/ChallengeCardLocked.tsx
+++ b/src/components/Challenge/ChallengeCardLocked.tsx
@@ -6,12 +6,11 @@ import React from 'react'
import { getChallengeTitleWithLineReturn } from 'utils/utils'
import './challengeCardLocked.scss'
-interface ChallengeCardLockedProps {
- userChallenge: UserChallenge
-}
-const ChallengeCardLocked: React.FC<ChallengeCardLockedProps> = ({
+const ChallengeCardLocked = ({
userChallenge,
-}: ChallengeCardLockedProps) => {
+}: {
+ userChallenge: UserChallenge
+}) => {
const { t } = useI18n()
return (
diff --git a/src/components/Challenge/ChallengeCardOnGoing.tsx b/src/components/Challenge/ChallengeCardOnGoing.tsx
index 6d0f31dca0523ef8fb7822da271c25107a2294ce..54eeab6a7d2bceb6d7d9874a3d591ad045c40ba4 100644
--- a/src/components/Challenge/ChallengeCardOnGoing.tsx
+++ b/src/components/Challenge/ChallengeCardOnGoing.tsx
@@ -21,18 +21,17 @@ import { useDispatch, useSelector } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import ChallengeService from 'services/challenge.service'
import { AppActionsTypes, AppStore } from 'store'
-import { updateUserChallengeList } from 'store/challenge/challenge.actions'
+import { updateUserChallengeList } from 'store/challenge/challenge.slice'
import { getChallengeTitleWithLineReturn, importIconById } from 'utils/utils'
import ChallengeNoFluidModal from './ChallengeNoFluidModal'
import StarsContainer from './StarsContainer'
import './challengeCardOnGoing.scss'
-interface ChallengeCardOnGoingProps {
- userChallenge: UserChallenge
-}
-const ChallengeCardOnGoing: React.FC<ChallengeCardOnGoingProps> = ({
+const ChallengeCardOnGoing = ({
userChallenge,
-}: ChallengeCardOnGoingProps) => {
+}: {
+ userChallenge: UserChallenge
+}) => {
const client: Client = useClient()
const { t } = useI18n()
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
diff --git a/src/components/Challenge/ChallengeCardUnlocked.tsx b/src/components/Challenge/ChallengeCardUnlocked.tsx
index 68cfcd89f0dfbedb7bf825ba236900cf0531ecf2..7d65fbab8ad380eee976e14b2135261760da04d4 100644
--- a/src/components/Challenge/ChallengeCardUnlocked.tsx
+++ b/src/components/Challenge/ChallengeCardUnlocked.tsx
@@ -11,17 +11,16 @@ import { useDispatch, useSelector } from 'react-redux'
import ChallengeService from 'services/challenge.service'
import UsageEventService from 'services/usageEvent.service'
import { AppActionsTypes, AppStore } from 'store'
-import { updateUserChallengeList } from 'store/challenge/challenge.actions'
+import { updateUserChallengeList } from 'store/challenge/challenge.slice'
import { getChallengeTitleWithLineReturn, importIconById } from 'utils/utils'
-import './challengeCardUnlocked.scss'
import ChallengeNoFluidModal from './ChallengeNoFluidModal'
+import './challengeCardUnlocked.scss'
-interface ChallengeCardUnlockedProps {
- userChallenge: UserChallenge
-}
-const ChallengeCardUnlocked: React.FC<ChallengeCardUnlockedProps> = ({
+const ChallengeCardUnlocked = ({
userChallenge,
-}: ChallengeCardUnlockedProps) => {
+}: {
+ userChallenge: UserChallenge
+}) => {
const client: Client = useClient()
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
const { t } = useI18n()
diff --git a/src/components/Challenge/ChallengeNoFluidModal.tsx b/src/components/Challenge/ChallengeNoFluidModal.tsx
index 9d9c0e9fc72aab0f6b80e2bb9a055fe3e1aa98ad..46d0057675c15f5364de798f37f15ec6d2183ca4 100644
--- a/src/components/Challenge/ChallengeNoFluidModal.tsx
+++ b/src/components/Challenge/ChallengeNoFluidModal.tsx
@@ -9,7 +9,7 @@ interface ChallengeNoFluidModalProps {
handleCloseClick: () => void
}
-const ChallengeNoFluidModal: React.FC<ChallengeNoFluidModalProps> = ({
+const ChallengeNoFluidModal = ({
open,
handleCloseClick,
}: ChallengeNoFluidModalProps) => {
diff --git a/src/components/Challenge/ChallengeView.tsx b/src/components/Challenge/ChallengeView.tsx
index 929a63f11206f57b9b0449af5e8c163076dc39ff..95f526de73d4673de4b050e9e3567ca74837688f 100644
--- a/src/components/Challenge/ChallengeView.tsx
+++ b/src/components/Challenge/ChallengeView.tsx
@@ -13,7 +13,7 @@ import { AppStore } from 'store'
import ChallengeCard from './ChallengeCard'
import './challengeView.scss'
-const ChallengeView: React.FC = () => {
+const ChallengeView = () => {
const { t } = useI18n()
const { userChallengeList } = useSelector(
(state: AppStore) => state.ecolyo.challenge
diff --git a/src/components/Challenge/StarsContainer.tsx b/src/components/Challenge/StarsContainer.tsx
index ab6c67731bbecc39571a18fb5951ae42235487f9..c1a32c5e3d1ca80abf8089b37f71dc387138ced7 100644
--- a/src/components/Challenge/StarsContainer.tsx
+++ b/src/components/Challenge/StarsContainer.tsx
@@ -8,10 +8,7 @@ interface StarsContainerProps {
isQuizBegin?: boolean
}
-const StarsContainer: React.FC<StarsContainerProps> = ({
- result,
- isQuizBegin,
-}: StarsContainerProps) => {
+const StarsContainer = ({ result, isQuizBegin }: StarsContainerProps) => {
const maxStars = [1, 2, 3, 4, 5]
return (
diff --git a/src/components/Challenge/__snapshots__/ChallengeCardLast.spec.tsx.snap b/src/components/Challenge/__snapshots__/ChallengeCardLast.spec.tsx.snap
index efa5167434fb0e24a32c5fca7598b47712b53300..5f80b30e60723bb66d88a833aa052deaeb5d18d8 100644
--- a/src/components/Challenge/__snapshots__/ChallengeCardLast.spec.tsx.snap
+++ b/src/components/Challenge/__snapshots__/ChallengeCardLast.spec.tsx.snap
@@ -1,3 +1,201 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`ChallengeCardLast component should be rendered correctly 1`] = `ReactWrapper {}`;
+exports[`ChallengeCardLast component should be rendered correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <ChallengeCardLast>
+ <div
+ className="cardLast"
+ >
+ <StyledIcon
+ icon="test-file-stub"
+ size={62}
+ >
+ <Icon
+ aria-hidden={true}
+ icon="test-file-stub"
+ size={62}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={62}
+ style={Object {}}
+ width={62}
+ >
+ <svg
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={62}
+ style={Object {}}
+ width={62}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <div
+ className="content"
+ >
+ <div
+ className="text-22-bold title-last"
+ >
+ challenge.card_last.title
+ </div>
+ <div
+ className="text-18-normal message"
+ >
+ challenge.card_last.message1
+ </div>
+ </div>
+ <WithStyles(ForwardRef(Button))
+ aria-label="challenge.card_last.button"
+ className="btn1"
+ classes={
+ Object {
+ "label": "text-15-bold",
+ "root": "btn-secondary-negative btn_lastCard",
+ }
+ }
+ onClick={[Function]}
+ >
+ <ForwardRef(Button)
+ aria-label="challenge.card_last.button"
+ className="btn1"
+ 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-15-bold",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root btn-secondary-negative btn_lastCard",
+ "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]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="challenge.card_last.button"
+ className="MuiButton-root btn-secondary-negative btn_lastCard MuiButton-text btn1"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="button"
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="challenge.card_last.button"
+ className="MuiButton-root btn-secondary-negative btn_lastCard MuiButton-text btn1"
+ 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-label="challenge.card_last.button"
+ className="MuiButtonBase-root MuiButton-root btn-secondary-negative btn_lastCard MuiButton-text btn1"
+ 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-15-bold"
+ >
+ challenge.card_last.button
+ </span>
+ <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)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(Button)>
+ </WithStyles(ForwardRef(Button))>
+ </div>
+ </ChallengeCardLast>
+</Provider>
+`;
diff --git a/src/components/Charts/AxisBottom.tsx b/src/components/Charts/AxisBottom.tsx
index a34c45c90762665f3b0dfa789ec891e81784a938..0fcdc71c016200d196c21ee80a8b32b7f117327e 100644
--- a/src/components/Charts/AxisBottom.tsx
+++ b/src/components/Charts/AxisBottom.tsx
@@ -130,7 +130,7 @@ interface AxisBottomProps {
isDuel?: boolean
}
-const AxisBottom: React.FC<AxisBottomProps> = ({
+const AxisBottom = ({
data,
timeStep,
xScale,
diff --git a/src/components/Charts/Bar.tsx b/src/components/Charts/Bar.tsx
index 9d198936fce70f2db37d0a622842de19582b5ea3..57f86f31795bfd07f5f6b49479b6b62e8eb6f689 100644
--- a/src/components/Charts/Bar.tsx
+++ b/src/components/Charts/Bar.tsx
@@ -27,6 +27,7 @@ interface BarProps {
isDuel?: boolean
isMultiMissingFluid?: boolean
weekdays?: 'week' | 'weekend'
+ clickable?: boolean
}
const Bar = ({
@@ -43,6 +44,7 @@ const Bar = ({
isDuel,
isMultiMissingFluid,
weekdays,
+ clickable = true,
}: BarProps) => {
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
const { selectedDate } = useSelector((state: AppStore) => state.ecolyo.chart)
@@ -55,7 +57,7 @@ const Bar = ({
fluidType === FluidType.MULTIFLUID ? 'MULTIFLUID' : FluidType[fluidType]
const handleClick = () => {
- if (!isSwitching && !isDuel) {
+ if (!isSwitching && !isDuel && clickable) {
setClicked(true)
dispatch(setSelectedDate(dataload.date))
}
@@ -94,6 +96,7 @@ const Bar = ({
const edgeBrowser = browser && browser.name !== 'edge'
const selected = isSelectedDate ? ' selected' : ''
const bounce = edgeBrowser ? '1' : '3'
+ const disabled = `${clickable ? '' : 'disabled'}`
const getBarClass = () => {
const bounceDelay = ` bounce-${bounce} delay--${delayIndex}`
@@ -102,9 +105,9 @@ const Bar = ({
if (clicked) {
return `${fluidWeekdays}${selected} bounce-2 delay`
} else if (animationEnded) {
- return `${fluidWeekdays}${selected}`
+ return `${fluidWeekdays}${selected} ${disabled}`
}
- return `${fluidWeekdays}${bounceDelay}${selected}`
+ return `${fluidWeekdays}${bounceDelay}${selected} ${disabled}`
}
const getCompareBarClass = () => {
@@ -186,7 +189,7 @@ const Bar = ({
{height > 0 && (
<g
transform={`translate(${xScaleValue}, -40)`}
- className="barContainer"
+ className={`barContainer ${disabled}`}
>
<rect
onClick={!weekdays ? handleClick : () => undefined}
diff --git a/src/components/Charts/BarChart.tsx b/src/components/Charts/BarChart.tsx
index fd77f84d2db67e756088394c51f0ed4dfc4faab5..9483e03da8756f0359fb2eba52e6975a8d59834e 100644
--- a/src/components/Charts/BarChart.tsx
+++ b/src/components/Charts/BarChart.tsx
@@ -22,9 +22,10 @@ export interface BarChartProps {
marginTop?: number
marginBottom?: number
isSwitching: boolean
+ clickable?: boolean
}
-const BarChart: React.FC<BarChartProps> = ({
+const BarChart = ({
chartData,
fluidType,
timeStep,
@@ -35,6 +36,7 @@ const BarChart: React.FC<BarChartProps> = ({
marginTop = 20,
marginBottom = 50,
isSwitching,
+ clickable = true,
}: BarChartProps) => {
const { showCompare } = useSelector((state: AppStore) => state.ecolyo.chart)
const getContentWidth = () => {
@@ -112,6 +114,7 @@ const BarChart: React.FC<BarChartProps> = ({
? true
: false
}
+ clickable={clickable}
/>
))}
</g>
diff --git a/src/components/Charts/UncomingBar.tsx b/src/components/Charts/UncomingBar.tsx
index 9a8ae0f69fe023a36ffc6103aba489f7e59d17b6..3a252cb967e7dfb7bfbf363a57276966fa34e2ef 100644
--- a/src/components/Charts/UncomingBar.tsx
+++ b/src/components/Charts/UncomingBar.tsx
@@ -21,7 +21,6 @@ const UncomingBar = ({
height,
average,
}: BarProps) => {
- dataload.value = average
const [animationEnded, setAnimationEnded] = useState(false)
const browser = detect()
const onAnimationEnd = () => {
@@ -93,18 +92,18 @@ const UncomingBar = ({
/>
</g>
)}
- {height > 0 && dataload.value >= 0 && (
+ {height > 0 && average >= 0 && (
<g
transform={`translate(${xScale(
dataload.date.toLocaleString(DateTime.DATETIME_SHORT)
- )}, ${yScale(dataload.value)})`}
+ )}, ${yScale(average)})`}
>
<path
d={topRoundedRectDashedLine(
0,
0,
getBandWidth(),
- height - yScale(dataload.value)
+ height - yScale(average)
)}
fill="url(#gradient)"
strokeDasharray="5"
diff --git a/src/components/CommonKit/Card/StyledBorderCard.spec.tsx b/src/components/CommonKit/Card/StyledBorderCard.spec.tsx
deleted file mode 100644
index 38d535360f8a7667234e7fe9980bec0073e1c0a2..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/Card/StyledBorderCard.spec.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { mount } from 'enzyme'
-import React from 'react'
-import StyledBorderCard from './StyledBorderCard'
-
-describe('StyledBorderCard component test', () => {
- it('should render correctly StyleBorderCard', () => {
- const wrapper = mount(<StyledBorderCard />)
- expect(wrapper.getElement()).toMatchSnapshot()
- })
-})
diff --git a/src/components/CommonKit/Card/StyledBorderCard.tsx b/src/components/CommonKit/Card/StyledBorderCard.tsx
deleted file mode 100644
index 7f9a6a34dff44c65ac484dc88cc347521341c886..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/Card/StyledBorderCard.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import CardActionArea, {
- CardActionAreaProps,
-} from '@material-ui/core/CardActionArea'
-import CardContent from '@material-ui/core/CardContent'
-import { withStyles } from '@material-ui/core/styles'
-import React from 'react'
-
-const CardBase = withStyles({
- root: {
- border: '1px solid var(--softGrey)',
- boxSizing: 'border-box',
- borderRadius: '4px',
- width: '100hv',
- margin: '1.25rem 0',
- cursor: 'default',
- },
-})(CardActionArea) as React.FC<StyledBorderCardProps>
-
-type StyledBorderCardProps = CardActionAreaProps
-
-const StyledBorderCard = ({ ...props }: StyledBorderCardProps) => {
- return (
- <CardBase {...props}>
- <CardContent>{props.children}</CardContent>
- </CardBase>
- )
-}
-
-export default StyledBorderCard
diff --git a/src/components/CommonKit/Card/StyledCard.tsx b/src/components/CommonKit/Card/StyledCard.tsx
index caa675934560fd85d01f6e77e99f1a3d159391de..39e472c59d9876587c7923c6f51cde1eaa5626a8 100644
--- a/src/components/CommonKit/Card/StyledCard.tsx
+++ b/src/components/CommonKit/Card/StyledCard.tsx
@@ -5,6 +5,7 @@ import CardContent from '@material-ui/core/CardContent'
import { withStyles } from '@material-ui/core/styles'
import { FluidType } from 'enum/fluid.enum'
import React, { ReactNode } from 'react'
+import { getFluidName } from 'utils/utils'
const CardBase = withStyles({
root: {
@@ -12,84 +13,38 @@ const CardBase = withStyles({
boxSizing: 'border-box',
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.75)',
borderRadius: '4px',
- margin: '10px 0px 10px 0px',
},
})(CardActionArea) as React.FC<StyledCardProps>
-const CardElec = withStyles({
- root: {
- border: '1px solid var(--elecColor40)',
- },
-})(CardBase) as React.FC<StyledCardProps>
-
-const CardWater = withStyles({
- root: {
- border: '1px solid var(--waterColor40)',
- },
-})(CardBase) as React.FC<StyledCardProps>
-
-const CardGas = withStyles({
- root: {
- border: '1px solid var(--gasColor40)',
- },
-})(CardBase) as React.FC<StyledCardProps>
-
-const CardMulti = withStyles({
- root: {
- border: '1px solid var( --greyDark)',
- },
-})(CardBase) as React.FC<StyledCardProps>
-
const CardContentBase = withStyles({
root: {
color: 'white',
+ display: 'flex',
+ alignItems: 'center',
+ gap: '1rem',
+ boxSizing: 'border-box',
},
})(CardContent) as React.FC<StyledCardProps>
interface StyledCardProps extends CardActionAreaProps {
fluidType?: FluidType
-}
-
-const GenerateContentCard = (
- fluidType: FluidType,
children: ReactNode
-): React.ReactFragment => {
- return <CardContentBase>{children}</CardContentBase>
}
-const StyledCard = ({ fluidType, ...props }: StyledCardProps) => {
- switch (fluidType) {
- case FluidType.ELECTRICITY:
- return (
- <CardElec {...props}>
- {GenerateContentCard(fluidType, props.children)}
- </CardElec>
- )
- case FluidType.WATER:
- return (
- <CardWater {...props}>
- {GenerateContentCard(fluidType, props.children)}
- </CardWater>
- )
- case FluidType.GAS:
- return (
- <CardGas {...props}>
- {GenerateContentCard(fluidType, props.children)}
- </CardGas>
- )
- case FluidType.MULTIFLUID:
- return (
- <CardMulti {...props}>
- {GenerateContentCard(fluidType, props.children)}
- </CardMulti>
- )
- default:
- return (
- <CardBase {...props}>
- <CardContentBase>{props.children}</CardContentBase>
- </CardBase>
- )
- }
+const StyledCard = ({
+ fluidType,
+ children,
+ className,
+ ...props
+}: StyledCardProps) => {
+ const cardClass =
+ className + (fluidType !== undefined ? ` ${getFluidName(fluidType)}` : '')
+
+ return (
+ <CardBase {...props} className={cardClass}>
+ <CardContentBase>{children}</CardContentBase>
+ </CardBase>
+ )
}
export default StyledCard
diff --git a/src/components/CommonKit/Card/StyledEcogestureCard.tsx b/src/components/CommonKit/Card/StyledEcogestureCard.tsx
index dea5dd8310b6fb4091061c9daee31eff9581b9a8..31a8ad5ef4fff646c85a6b8bf4dc97e12aad045b 100644
--- a/src/components/CommonKit/Card/StyledEcogestureCard.tsx
+++ b/src/components/CommonKit/Card/StyledEcogestureCard.tsx
@@ -3,52 +3,18 @@ import CardActionArea, {
} from '@material-ui/core/CardActionArea'
import CardContent from '@material-ui/core/CardContent'
import { withStyles } from '@material-ui/core/styles'
-import React, { ReactNode } from 'react'
+import React from 'react'
const CardBase = withStyles({
root: {
background: 'var(--greyLinearGradientBackground)',
- // border: '1px solid',
boxSizing: 'border-box',
boxShadow: '0px 4px 16px black',
borderRadius: '4px',
padding: '0.5rem 1rem',
minHeight: '72px',
},
-})(CardActionArea) as React.FC<StyledEcogestureCardProps>
-
-const CardNew = withStyles({
- '@keyframes glowAnimation': {
- '0%': { boxShadow: '0px 0px 4px var(--blue)' },
- '50%': { boxShadow: '0px 0px 16px var(--blue)' },
- '100%': { boxShadow: '0px 0px 4px var(--blue)' },
- },
- root: {
- border: '1px solid var(--blue)',
- animation: '2s glowAnimation linear infinite',
- color: 'white',
- height: '100%',
- padding: 0,
- },
-})(CardBase) as React.FC<StyledEcogestureCardProps>
-
-const CardBlueBorderContentBase = withStyles({
- root: {
- border: '1px solid var(--blue)',
- height: '100%',
- padding: 0,
- },
-})(CardBase) as React.FC<StyledEcogestureCardProps>
-
-const CardChallengeBase = withStyles({
- root: {
- height: '100%',
- padding: 0,
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- },
-})(CardContent) as React.FC<StyledEcogestureCardProps>
+})(CardActionArea) as React.FC<CardActionAreaProps>
const CardContentBase = withStyles({
root: {
@@ -56,37 +22,14 @@ const CardContentBase = withStyles({
height: '100%',
padding: 0,
},
-})(CardContent) as React.FC<StyledEcogestureCardProps>
-
-interface StyledEcogestureCardProps extends CardActionAreaProps {
- border?: boolean
- newEcogesture?: boolean | null
-}
-
-const GenerateContentCard = (children: ReactNode): React.ReactFragment => {
- return <CardChallengeBase>{children}</CardChallengeBase>
-}
-
-const StyledEcogestureCard = ({
- border,
- newEcogesture,
- ...props
-}: StyledEcogestureCardProps) => {
- if (newEcogesture) {
- return <CardNew {...props}>{GenerateContentCard(props.children)}</CardNew>
- } else if (border) {
- return (
- <CardBlueBorderContentBase {...props}>
- {GenerateContentCard(props.children)}
- </CardBlueBorderContentBase>
- )
- } else {
- return (
- <CardBase {...props}>
- <CardContentBase>{props.children}</CardContentBase>
- </CardBase>
- )
- }
+})(CardContent) as React.FC<CardActionAreaProps>
+
+const StyledEcogestureCard = ({ children, ...props }: CardActionAreaProps) => {
+ return (
+ <CardBase {...props}>
+ <CardContentBase>{children}</CardContentBase>
+ </CardBase>
+ )
}
export default StyledEcogestureCard
diff --git a/src/components/CommonKit/Card/StyledIconCard.spec.tsx b/src/components/CommonKit/Card/StyledIconCard.spec.tsx
deleted file mode 100644
index 77b94a6844c58f58a39ce4f33d09a3cb42521a04..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/Card/StyledIconCard.spec.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { FluidType } from 'enum/fluid.enum'
-import { mount } from 'enzyme'
-import React from 'react'
-import StyledIconCard from './StyledIconCard'
-
-describe('StyledIconCard component test', () => {
- it('it should render correctly StyledIconCard', () => {
- const wrapper = mount(<StyledIconCard fluidType={FluidType.ELECTRICITY} />)
- expect(wrapper.getElement()).toMatchSnapshot()
- })
-})
diff --git a/src/components/CommonKit/Card/StyledIconCard.tsx b/src/components/CommonKit/Card/StyledIconCard.tsx
deleted file mode 100644
index 58e6b8d4f09fdad56642fb04e1059b0a5ad569af..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/Card/StyledIconCard.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import CardActionArea, {
- CardActionAreaProps,
-} from '@material-ui/core/CardActionArea'
-import CardContent from '@material-ui/core/CardContent'
-import Grid from '@material-ui/core/Grid'
-import { withStyles } from '@material-ui/core/styles'
-import { FluidType } from 'enum/fluid.enum'
-import React, { ReactNode } from 'react'
-import { getPicto } from 'utils/picto'
-import StyledIcon from '../Icon/StyledIcon'
-
-const CardBase = withStyles({
- root: {
- background: 'var(--greyLinearGradientBackground)',
- border: '1px solid',
- boxSizing: 'border-box',
- boxShadow: '0px 4px 16px',
- borderRadius: '4px',
- display: 'inline',
- margin: '0',
- },
-})(CardActionArea) as React.FC<StyledIconCardProps>
-
-const CardElec = withStyles({
- root: {
- border: '1px solid var(--elecColor40)',
- },
-})(CardBase) as React.FC<StyledIconCardProps>
-
-const CardWater = withStyles({
- root: {
- border: '1px solid var(--waterColor40)',
- },
-})(CardBase) as React.FC<StyledIconCardProps>
-
-const CardGas = withStyles({
- root: {
- border: '1px solid var(--gasColor40)',
- },
-})(CardBase) as React.FC<StyledIconCardProps>
-
-const CardContentBase = withStyles({
- root: {
- color: 'white',
- },
-})(CardContent) as React.FC<StyledIconCardProps>
-
-interface StyledIconCardProps extends CardActionAreaProps {
- fluidType?: FluidType
-}
-
-const GenerateContentCard = (
- fluidType: FluidType,
- children: ReactNode
-): React.ReactFragment => {
- const icon = getPicto(fluidType)
-
- return (
- <CardContentBase>
- <Grid
- container
- spacing={8}
- direction="column"
- alignItems="center"
- justifyContent="center"
- >
- <Grid item>
- <StyledIcon icon={icon} size={64} />
- </Grid>
- <Grid item>{children}</Grid>
- </Grid>
- </CardContentBase>
- )
-}
-
-const StyledIconCard = ({ fluidType, ...props }: StyledIconCardProps) => {
- switch (fluidType) {
- case FluidType.ELECTRICITY:
- return (
- <CardElec {...props}>
- {GenerateContentCard(fluidType, props.children)}
- </CardElec>
- )
- case FluidType.WATER:
- return (
- <CardWater {...props}>
- {GenerateContentCard(fluidType, props.children)}
- </CardWater>
- )
- case FluidType.GAS:
- return (
- <CardGas {...props}>
- {GenerateContentCard(fluidType, props.children)}
- </CardGas>
- )
- default:
- return (
- <CardBase {...props}>
- <CardContentBase>
- <Grid
- container
- spacing={8}
- alignItems="center"
- justifyContent="center"
- >
- <Grid item>{props.children}</Grid>
- </Grid>
- </CardContentBase>
- </CardBase>
- )
- }
-}
-
-export default StyledIconCard
diff --git a/src/components/CommonKit/Card/__snapshots__/StyledBorderCard.spec.tsx.snap b/src/components/CommonKit/Card/__snapshots__/StyledBorderCard.spec.tsx.snap
deleted file mode 100644
index 5da16e6b78dfc4aecea6d8b208df24b2bd89841c..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/Card/__snapshots__/StyledBorderCard.spec.tsx.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StyledBorderCard component test should render correctly StyleBorderCard 1`] = `<StyledBorderCard />`;
diff --git a/src/components/CommonKit/Card/__snapshots__/StyledIconCard.spec.tsx.snap b/src/components/CommonKit/Card/__snapshots__/StyledIconCard.spec.tsx.snap
deleted file mode 100644
index f9d8af05dbf5a9930b9cef8c760805c376c15b97..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/Card/__snapshots__/StyledIconCard.spec.tsx.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StyledIconCard component test it should render correctly StyledIconCard 1`] = `
-<StyledIconCard
- fluidType={0}
-/>
-`;
diff --git a/src/components/CommonKit/ErrorPage/ErrorPage.tsx b/src/components/CommonKit/ErrorPage/ErrorPage.tsx
index 4142f1c9b176ea4a6d53e5778e630ffef5382530..69136c0867bc9beab069d7499a636c7e74920492 100644
--- a/src/components/CommonKit/ErrorPage/ErrorPage.tsx
+++ b/src/components/CommonKit/ErrorPage/ErrorPage.tsx
@@ -14,10 +14,7 @@ interface ErrorPageProps {
returnPage: string
}
-const ErrorPage: React.FC<ErrorPageProps> = ({
- text,
- returnPage,
-}: ErrorPageProps) => {
+const ErrorPage = ({ text, returnPage }: ErrorPageProps) => {
const navigate = useNavigate()
const { t } = useI18n()
diff --git a/src/components/CommonKit/Icon/StyledIcon.tsx b/src/components/CommonKit/Icon/StyledIcon.tsx
index bbf01cc5803f126ba7b5a72e8764c34cdc961d64..d555270c0ca2f6ee2283e07f741a8788927edcad 100644
--- a/src/components/CommonKit/Icon/StyledIcon.tsx
+++ b/src/components/CommonKit/Icon/StyledIcon.tsx
@@ -10,7 +10,7 @@ interface StyledIconProps {
title?: string
}
-const StyledIcon: React.FC<StyledIconProps> = ({
+const StyledIcon = ({
icon,
ariaHidden = true,
size = 16,
diff --git a/src/components/CommonKit/IconButton/StyledIconBorderedButton.spec.tsx b/src/components/CommonKit/IconButton/StyledIconBorderedButton.spec.tsx
deleted file mode 100644
index 1890bead1d5f57d01f15714b25869d263e9076d6..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/IconButton/StyledIconBorderedButton.spec.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { shallow } from 'enzyme'
-import React from 'react'
-import StyledIconBorderedButton from './StyledIconBorderedButton'
-
-describe('StyledIconBorderedButton component test', () => {
- const mockProps = {
- icon: 'icon',
- size: 20,
- }
-
- it('should render correctly UnselectedIconButtonBase ', () => {
- const wrapper = shallow(
- <StyledIconBorderedButton icon={mockProps.icon} sized={mockProps.size} />
- )
-
- expect(wrapper.getElement()).toMatchSnapshot()
- })
-
- it('should render correctly SelectedIconButtonBase', () => {
- const wrapper = shallow(
- <StyledIconBorderedButton
- icon={mockProps.icon}
- sized={mockProps.size}
- selected={true}
- />
- )
-
- expect(wrapper.getElement()).toMatchSnapshot()
- })
-})
diff --git a/src/components/CommonKit/IconButton/StyledIconBorderedButton.tsx b/src/components/CommonKit/IconButton/StyledIconBorderedButton.tsx
deleted file mode 100644
index 761d01d449469faa7f29240f6d60359af9235dc2..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/IconButton/StyledIconBorderedButton.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import IconButton, { IconButtonProps } from '@material-ui/core/IconButton'
-import { withStyles } from '@material-ui/core/styles'
-import StyledIconProps from 'components/CommonKit/Icon/StyledIcon'
-import React from 'react'
-
-const IconButtonBase = withStyles({
- root: {
- outline: 'none !important',
- borderRadius: '4px',
- width: '100%',
- padding: 'unset',
- },
- label: {
- display: 'flex',
- flexDirection: 'column',
- },
-})(IconButton) as React.FC<IconButtonProps>
-
-const SelectedIconButtonBase = withStyles({
- root: {
- border: '1px solid var(--multiColor)',
- background: 'var(--greyLinearGradientBackground)',
- boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.55)',
- },
-})(IconButtonBase) as React.FC<IconButtonProps>
-
-const UnselectedIconButtonBase = withStyles({
- root: {
- border: '1px solid var(--greyDark)',
- },
-})(IconButtonBase) as React.FC<IconButtonProps>
-
-interface StyledIconBorderedButtonProps extends IconButtonProps {
- icon: string
- sized?: number
- selected?: boolean
- children?: React.ReactNode
-}
-
-const StyledIconBorderedButton: React.FC<StyledIconBorderedButtonProps> = ({
- icon,
- sized = 16,
- selected = false,
- children = null,
- ...props
-}: StyledIconBorderedButtonProps) => {
- return (
- <>
- {selected ? (
- <SelectedIconButtonBase {...props}>
- <StyledIconProps icon={icon} size={sized} />
- {children}
- </SelectedIconButtonBase>
- ) : (
- <UnselectedIconButtonBase {...props}>
- <StyledIconProps icon={icon} size={sized} />
- {children}
- </UnselectedIconButtonBase>
- )}
- </>
- )
-}
-
-export default StyledIconBorderedButton
diff --git a/src/components/CommonKit/IconButton/StyledIconButton.tsx b/src/components/CommonKit/IconButton/StyledIconButton.tsx
index 03e1b990581d3dfb13417329d5ee72d2e62c1020..b71760b5d51353f9fa129037822d0efb0fca476d 100644
--- a/src/components/CommonKit/IconButton/StyledIconButton.tsx
+++ b/src/components/CommonKit/IconButton/StyledIconButton.tsx
@@ -14,7 +14,7 @@ interface StyledIconButtonProps extends IconButtonProps {
sized?: number
}
-const StyledIconButton: React.FC<StyledIconButtonProps> = ({
+const StyledIconButton = ({
icon,
sized = 16,
...props
diff --git a/src/components/CommonKit/IconButton/__snapshots__/StyledIconBorderedButton.spec.tsx.snap b/src/components/CommonKit/IconButton/__snapshots__/StyledIconBorderedButton.spec.tsx.snap
deleted file mode 100644
index 55ffe0707050115b083c4664fa1c380f7755ceeb..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/IconButton/__snapshots__/StyledIconBorderedButton.spec.tsx.snap
+++ /dev/null
@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StyledIconBorderedButton component test should render correctly SelectedIconButtonBase 1`] = `
-<React.Fragment>
- <WithStyles(WithStyles(WithStyles(ForwardRef(IconButton))))>
- <StyledIcon
- icon="icon"
- size={20}
- />
- </WithStyles(WithStyles(WithStyles(ForwardRef(IconButton))))>
-</React.Fragment>
-`;
-
-exports[`StyledIconBorderedButton component test should render correctly UnselectedIconButtonBase 1`] = `
-<React.Fragment>
- <WithStyles(WithStyles(WithStyles(ForwardRef(IconButton))))>
- <StyledIcon
- icon="icon"
- size={20}
- />
- </WithStyles(WithStyles(WithStyles(ForwardRef(IconButton))))>
-</React.Fragment>
-`;
diff --git a/src/components/Connection/Connection.tsx b/src/components/Connection/Connection.tsx
index a6913571dd19f9c54cb5ac54262b82a9600a6ce5..3e0aedc0f10ce68b2ec0df6c396c7be7b5f58bc8 100644
--- a/src/components/Connection/Connection.tsx
+++ b/src/components/Connection/Connection.tsx
@@ -8,13 +8,8 @@ import EpglInit from './EPGLConnect/EpglInit'
import GrdfInit from './GRDFConnect/GrdfInit'
import SgeInit from './SGEConnect/SgeInit'
import './connection.scss'
-interface ConnectionProps {
- fluidStatus: FluidStatus
-}
-const Connection: React.FC<ConnectionProps> = ({
- fluidStatus,
-}: ConnectionProps) => {
+const Connection = ({ fluidStatus }: { fluidStatus: FluidStatus }) => {
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
const handleSuccess = useCallback(async () => {
diff --git a/src/components/Connection/ConnectionNotFound.tsx b/src/components/Connection/ConnectionNotFound.tsx
index e80bda11abbfde9f76b0601add74a3fa713cb757..360ad1a8d9c8118bc209a58774d20c04ef3c4d98 100644
--- a/src/components/Connection/ConnectionNotFound.tsx
+++ b/src/components/Connection/ConnectionNotFound.tsx
@@ -1,40 +1,35 @@
-import Button from '@material-ui/core/Button'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import React from 'react'
-import './connectionNotFound.scss'
-interface ConnectionNotFoundProps {
- konnectorSlug: string
-}
-
-const ConnectionNotFound: React.FC<ConnectionNotFoundProps> = ({
- konnectorSlug,
-}: ConnectionNotFoundProps) => {
- const { t } = useI18n()
-
- const openKonnectorURL = () => {
- // TODO - Use getstoreinstallationurl from client - https://docs.cozy.io/en/cozy-client/api/cozy-client/#getstoreinstallationurl-string
- const hostname = window.location.origin.replace('ecolyo', 'store')
- const url = hostname + '/#/discover/' + konnectorSlug
- window.open(url, '_blank')
- }
-
- return (
- <div className="knotfound">
- <div className="knotfound-text"> {t('konnector_form.not_installed')}</div>
- <div className="knotfound-button">
- <Button
- aria-label={t('konnector_form.accessibility.button_install')}
- onClick={openKonnectorURL}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- >
- {t('konnector_form.button_install')}
- </Button>
- </div>
- </div>
- )
-}
-
-export default ConnectionNotFound
+import Button from '@material-ui/core/Button'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React from 'react'
+import './connectionNotFound.scss'
+
+const ConnectionNotFound = ({ konnectorSlug }: { konnectorSlug: string }) => {
+ const { t } = useI18n()
+
+ const openKonnectorURL = () => {
+ // TODO - Use getstoreinstallationurl from client - https://docs.cozy.io/en/cozy-client/api/cozy-client/#getstoreinstallationurl-string
+ const hostname = window.location.origin.replace('ecolyo', 'store')
+ const url = hostname + '/#/discover/' + konnectorSlug
+ window.open(url, '_blank')
+ }
+
+ return (
+ <div className="knotfound">
+ <div className="knotfound-text"> {t('konnector_form.not_installed')}</div>
+ <div className="knotfound-button">
+ <Button
+ aria-label={t('konnector_form.accessibility.button_install')}
+ onClick={openKonnectorURL}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-16-bold',
+ }}
+ >
+ {t('konnector_form.button_install')}
+ </Button>
+ </div>
+ </div>
+ )
+}
+
+export default ConnectionNotFound
diff --git a/src/components/Connection/ConnectionResult.tsx b/src/components/Connection/ConnectionResult.tsx
index 31201f2f77350723a1515d99ca7825c02da392b1..27263a062697e937d31d5184a94fea4e0d43825d 100644
--- a/src/components/Connection/ConnectionResult.tsx
+++ b/src/components/Connection/ConnectionResult.tsx
@@ -35,7 +35,7 @@ interface ConnectionResultProps {
fluidType: FluidType
}
-const ConnectionResult: React.FC<ConnectionResultProps> = ({
+const ConnectionResult = ({
fluidStatus,
handleAccountDeletion,
fluidType,
diff --git a/src/components/Connection/DeleteGRDFAccountModal.tsx b/src/components/Connection/DeleteGRDFAccountModal.tsx
index 6ec568182479006ce2b0692051151abcf923e5d2..d2464efca8c40d70a2b41a90fc34348c995a8e33 100644
--- a/src/components/Connection/DeleteGRDFAccountModal.tsx
+++ b/src/components/Connection/DeleteGRDFAccountModal.tsx
@@ -13,7 +13,7 @@ interface DeleteGRDFAccountModalProps {
deleteAccount: () => void
}
-const DeleteGRDFAccountModal: React.FC<DeleteGRDFAccountModalProps> = ({
+const DeleteGRDFAccountModal = ({
open,
handleCloseClick,
deleteAccount,
diff --git a/src/components/Connection/EPGLConnect/EpglInit.tsx b/src/components/Connection/EPGLConnect/EpglInit.tsx
index fff3a0881e367b37aad05e81927a2e447e72b936..be04c95c0c4aaad34b39624357d7a7b71942480c 100644
--- a/src/components/Connection/EPGLConnect/EpglInit.tsx
+++ b/src/components/Connection/EPGLConnect/EpglInit.tsx
@@ -8,11 +8,7 @@ import '../connection.scss'
import EpglBill from './EpglBill'
import EpglForm from './EpglForm'
-interface EpglInitProps {
- fluidStatus: FluidStatus
-}
-
-const EpglInit: React.FC<EpglInitProps> = ({ fluidStatus }: EpglInitProps) => {
+const EpglInit = ({ fluidStatus }: { fluidStatus: FluidStatus }) => {
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
const {
modal: { isConnectionModalOpen },
diff --git a/src/components/Connection/ExpiredConsentModal.tsx b/src/components/Connection/ExpiredConsentModal.tsx
index 6a6dcc5c5d784090b3e7a4a92f2830fdd6c7798e..194ee25246f29f482eded5ffa267aa9fceaeb08e 100644
--- a/src/components/Connection/ExpiredConsentModal.tsx
+++ b/src/components/Connection/ExpiredConsentModal.tsx
@@ -15,6 +15,7 @@ import {
setShouldRefreshConsent,
updateSgeStore,
} from 'store/global/global.actions'
+import { getFluidName } from 'utils/utils'
import './expiredConsentModal.scss'
interface ExpiredConsentModalProps {
@@ -24,7 +25,7 @@ interface ExpiredConsentModalProps {
toggleModal: () => void
}
-const ExpiredConsentModal: React.FC<ExpiredConsentModalProps> = ({
+const ExpiredConsentModal = ({
open,
handleCloseClick,
fluidType,
@@ -88,9 +89,7 @@ const ExpiredConsentModal: React.FC<ExpiredConsentModalProps> = ({
/>
</div>
- <div
- className={`text-20-bold title ${FluidType[fluidType].toLowerCase()}`}
- >
+ <div className={`text-20-bold title ${getFluidName(fluidType)}`}>
{t(`consent_outdated.title.${fluidType}`)}
</div>
<div className="text-16-normal text1">
diff --git a/src/components/Connection/FormLogin.tsx b/src/components/Connection/FormLogin.tsx
index 68434000785ce984f0c2e2c1fc499c531ba4dd6f..e3c88579cf078e8d94dffb5e154617be6309c1ac 100644
--- a/src/components/Connection/FormLogin.tsx
+++ b/src/components/Connection/FormLogin.tsx
@@ -11,13 +11,7 @@ import React, { useEffect, useState } from 'react'
import { getPartnerPicto } from 'utils/picto'
import './formLogin.scss'
-interface FormLoginProps {
- fluidStatus: FluidStatus
-}
-
-const FormLogin: React.FC<FormLoginProps> = ({
- fluidStatus,
-}: FormLoginProps) => {
+const FormLogin = ({ fluidStatus }: { fluidStatus: FluidStatus }) => {
const { t } = useI18n()
const konnectorSlug: string = fluidStatus.connection.konnectorConfig.slug
const lastKnownCredentials: string | undefined =
diff --git a/src/components/Connection/FormOAuth.tsx b/src/components/Connection/FormOAuth.tsx
index af38519e33e05d339147c3ac45297089af4ccae1..736bd4ab02b1ac37523fa4b95ed769afae25ea14 100644
--- a/src/components/Connection/FormOAuth.tsx
+++ b/src/components/Connection/FormOAuth.tsx
@@ -16,11 +16,7 @@ interface FormOAuthProps {
fluidStatus: FluidStatus
}
-const FormOAuth: React.FC<FormOAuthProps> = ({
- konnector,
- onSuccess,
- fluidStatus,
-}: FormOAuthProps) => {
+const FormOAuth = ({ konnector, onSuccess, fluidStatus }: FormOAuthProps) => {
const IDLE = 'idle'
const WAITING = 'waiting'
diff --git a/src/components/Connection/GRDFConnect/GrdfInit.tsx b/src/components/Connection/GRDFConnect/GrdfInit.tsx
index 27df3d8ff9451fef90d02beeda55daeb0a39efe5..d47625171b37b485ac722f1e80bfdb00734d81f0 100644
--- a/src/components/Connection/GRDFConnect/GrdfInit.tsx
+++ b/src/components/Connection/GRDFConnect/GrdfInit.tsx
@@ -19,10 +19,7 @@ interface GrdfInitProps {
onSuccess: () => Promise<void>
}
-const GrdfInit: React.FC<GrdfInitProps> = ({
- fluidStatus,
- onSuccess,
-}: GrdfInitProps) => {
+const GrdfInit = ({ fluidStatus, onSuccess }: GrdfInitProps) => {
const client = useClient()
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
const {
diff --git a/src/components/Connection/PartnerConnectModal/EpglConnectModal.tsx b/src/components/Connection/PartnerConnectModal/EpglConnectModal.tsx
index 8987d385c865af7aaaa7ade64e1c2f8938628e02..2442a5f028eedcb7d50f775c3f0e900789192002 100644
--- a/src/components/Connection/PartnerConnectModal/EpglConnectModal.tsx
+++ b/src/components/Connection/PartnerConnectModal/EpglConnectModal.tsx
@@ -21,13 +21,13 @@ interface EpglConnectModalProps {
setHasCreatedAccount: (value: boolean) => void
}
-const EpglConnectModal: React.FC<EpglConnectModalProps> = ({
+const EpglConnectModal = ({
open,
handleCloseClick,
setShowForm,
goToPartnerSite,
setHasCreatedAccount,
-}) => {
+}: EpglConnectModalProps) => {
const { t } = useI18n()
const [currentStep, setCurrentStep] = useState(StepEnum.DoYouHaveAccount)
useEffect(() => {
diff --git a/src/components/Connection/PartnerConnectModal/GrdfConnectModal.tsx b/src/components/Connection/PartnerConnectModal/GrdfConnectModal.tsx
index 75edfed2927fa920fd322d8ad45fd5673d708f78..871172766e322945ed6fc05f0f6b36b2c9c7a249 100644
--- a/src/components/Connection/PartnerConnectModal/GrdfConnectModal.tsx
+++ b/src/components/Connection/PartnerConnectModal/GrdfConnectModal.tsx
@@ -28,7 +28,7 @@ interface GrdfConnectModalProps {
handleSuccess: (accountId: string) => Promise<void>
}
-const GrdfConnectModal: React.FC<GrdfConnectModalProps> = ({
+const GrdfConnectModal = ({
open,
showForm,
konnector,
@@ -37,7 +37,7 @@ const GrdfConnectModal: React.FC<GrdfConnectModalProps> = ({
setShowForm,
goToPartnerSite,
handleSuccess,
-}) => {
+}: GrdfConnectModalProps) => {
const { t } = useI18n()
const [currentStep, setCurrentStep] = useState(StepEnum.DoYouHaveAccount)
useEffect(() => {
diff --git a/src/components/Connection/PartnerConnectModal/Steps/EpglCreateAccount.tsx b/src/components/Connection/PartnerConnectModal/Steps/EpglCreateAccount.tsx
index 1c709db2d8177f798fbd395ec114717dc744c960..7c362975af1fda45504b97594457f8946271681c 100644
--- a/src/components/Connection/PartnerConnectModal/Steps/EpglCreateAccount.tsx
+++ b/src/components/Connection/PartnerConnectModal/Steps/EpglCreateAccount.tsx
@@ -5,7 +5,7 @@ import React from 'react'
import { decoreText } from 'utils/decoreText'
import './stepDetail.scss'
-const EpglCreateAccount: React.FC = () => {
+const EpglCreateAccount = () => {
const { t } = useI18n()
return (
diff --git a/src/components/Connection/PartnerConnectModal/Steps/EpglDoYouHaveAccount.tsx b/src/components/Connection/PartnerConnectModal/Steps/EpglDoYouHaveAccount.tsx
index 272d36ea7d8d129d932cd907a5590484de9005c7..db1e1a186bee9c727d05fff097b1c3a8d844794b 100644
--- a/src/components/Connection/PartnerConnectModal/Steps/EpglDoYouHaveAccount.tsx
+++ b/src/components/Connection/PartnerConnectModal/Steps/EpglDoYouHaveAccount.tsx
@@ -5,7 +5,7 @@ import React from 'react'
import { decoreText } from 'utils/decoreText'
import './stepDetail.scss'
-const EpglDoYouHaveAccount: React.FC = () => {
+const EpglDoYouHaveAccount = () => {
const { t } = useI18n()
return (
diff --git a/src/components/Connection/PartnerConnectModal/Steps/GrdfCreateAccount.tsx b/src/components/Connection/PartnerConnectModal/Steps/GrdfCreateAccount.tsx
index 0a5e93611cde27be2c5082c1047ec4d4f72cc3e9..1751a430928764263e04c595b5e4944a15c48f8d 100644
--- a/src/components/Connection/PartnerConnectModal/Steps/GrdfCreateAccount.tsx
+++ b/src/components/Connection/PartnerConnectModal/Steps/GrdfCreateAccount.tsx
@@ -5,7 +5,7 @@ import React from 'react'
import { decoreText } from 'utils/decoreText'
import './stepDetail.scss'
-const GrdfCreateAccount: React.FC = () => {
+const GrdfCreateAccount = () => {
const { t } = useI18n()
return (
diff --git a/src/components/Connection/PartnerConnectModal/Steps/GrdfDoYouHaveAccount.tsx b/src/components/Connection/PartnerConnectModal/Steps/GrdfDoYouHaveAccount.tsx
index eaddd5946cb8261221caff35065ab241c0b0ac42..680d15184fc472155fee743138f14edf90a1fc9c 100644
--- a/src/components/Connection/PartnerConnectModal/Steps/GrdfDoYouHaveAccount.tsx
+++ b/src/components/Connection/PartnerConnectModal/Steps/GrdfDoYouHaveAccount.tsx
@@ -5,7 +5,7 @@ import React from 'react'
import { decoreText } from 'utils/decoreText'
import './stepDetail.scss'
-const GrdfDoYouHaveAccount: React.FC = () => {
+const GrdfDoYouHaveAccount = () => {
const { t } = useI18n()
return (
diff --git a/src/components/Connection/PartnerConnectModal/Steps/GrdfGiveConsent.tsx b/src/components/Connection/PartnerConnectModal/Steps/GrdfGiveConsent.tsx
index 5b5c567b8357ef58fe4845a7c923804a94986a45..79e5bcbc547c74f55440b5bce613390307bb6569 100644
--- a/src/components/Connection/PartnerConnectModal/Steps/GrdfGiveConsent.tsx
+++ b/src/components/Connection/PartnerConnectModal/Steps/GrdfGiveConsent.tsx
@@ -5,7 +5,7 @@ import React from 'react'
import { decoreText } from 'utils/decoreText'
import './stepDetail.scss'
-const GrdfGiveConsent: React.FC = () => {
+const GrdfGiveConsent = () => {
const { t } = useI18n()
return (
diff --git a/src/components/Connection/SGEConnect/SgeConnectView.tsx b/src/components/Connection/SGEConnect/SgeConnectView.tsx
index fbde3f636945b73f067a423f7da8551ab78f0525..c2e0c11cb5e007a0bc673c5de238a245bd71e110 100644
--- a/src/components/Connection/SGEConnect/SgeConnectView.tsx
+++ b/src/components/Connection/SGEConnect/SgeConnectView.tsx
@@ -24,7 +24,7 @@ export type SGEKeysForm =
| 'dataConsent'
| 'pdlConfirm'
-const SgeConnectView: React.FC = () => {
+const SgeConnectView = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
const { sgeConnect } = useSelector((state: AppStore) => state.ecolyo.global)
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
diff --git a/src/components/Connection/SGEConnect/SgeInit.tsx b/src/components/Connection/SGEConnect/SgeInit.tsx
index 72dfc6f37a88df669799160ea61406135a368369..530045358d0eb2b7be18a649e5640dfb10e0ca61 100644
--- a/src/components/Connection/SGEConnect/SgeInit.tsx
+++ b/src/components/Connection/SGEConnect/SgeInit.tsx
@@ -14,11 +14,8 @@ import {
updateSgeStore,
} from 'store/global/global.actions'
import { decoreText } from 'utils/decoreText'
-interface SgeInitProps {
- fluidStatus: FluidStatus
-}
-const SgeInit: React.FC<SgeInitProps> = ({ fluidStatus }: SgeInitProps) => {
+const SgeInit = ({ fluidStatus }: { fluidStatus: FluidStatus }) => {
const { t } = useI18n()
const navigate = useNavigate()
const konnectorSlug: string = fluidStatus.connection.konnectorConfig.slug
diff --git a/src/components/Connection/SGEConnect/SgeModalHint.tsx b/src/components/Connection/SGEConnect/SgeModalHint.tsx
index 43827c813e6faa9944ff53e94a7d078c5d266649..2e5b34872fe7d16cded12d1415244ab538a41a35 100644
--- a/src/components/Connection/SGEConnect/SgeModalHint.tsx
+++ b/src/components/Connection/SGEConnect/SgeModalHint.tsx
@@ -13,10 +13,7 @@ interface SgeModalHintProps {
handleCloseClick: () => void
}
-const SgeModalHint: React.FC<SgeModalHintProps> = ({
- open,
- handleCloseClick,
-}: SgeModalHintProps) => {
+const SgeModalHint = ({ open, handleCloseClick }: SgeModalHintProps) => {
const { t } = useI18n()
return (
diff --git a/src/components/Connection/SGEConnect/StepAddress.tsx b/src/components/Connection/SGEConnect/StepAddress.tsx
index 73a405da655d1dd4033ad04e7ff0c9bb75a73518..8fe99e04d6d963fcec29b65ff2778f2132375ccc 100644
--- a/src/components/Connection/SGEConnect/StepAddress.tsx
+++ b/src/components/Connection/SGEConnect/StepAddress.tsx
@@ -8,10 +8,7 @@ interface StepAddressProps {
onChange: (key: SGEKeysForm, value: string, maxLength?: number) => void
}
-const StepAddress: React.FC<StepAddressProps> = ({
- sgeState,
- onChange,
-}: StepAddressProps) => {
+const StepAddress = ({ sgeState, onChange }: StepAddressProps) => {
const { t } = useI18n()
return (
<div className="sge-step-container stepAddress">
diff --git a/src/components/Connection/SGEConnect/StepConsent.tsx b/src/components/Connection/SGEConnect/StepConsent.tsx
index f3e6bbac2049c0683ad1d1515c860b2f6a262b63..4997b3b812d2664f6dd04c3eea2e141229dc9159 100644
--- a/src/components/Connection/SGEConnect/StepConsent.tsx
+++ b/src/components/Connection/SGEConnect/StepConsent.tsx
@@ -9,10 +9,12 @@ interface StepConsentProps {
sgeState: SgeStore
onChange: (key: SGEKeysForm, value: boolean) => void
}
-const StepConsent: React.FC<StepConsentProps> = ({
- sgeState,
- onChange,
-}: StepConsentProps) => {
+const StepConsent = (
+ {
+ sgeState,
+ onChange
+ }: StepConsentProps
+) => {
const { t } = useI18n()
return (
diff --git a/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx b/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
index eebeb80f914f49dc01c5055fe3ab19c8c4bdedbf..0012020f79887df5097ba64806d96f8ee7b12c0a 100644
--- a/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
+++ b/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
@@ -13,7 +13,7 @@ interface StepIdentityAndPdlProps {
) => void
}
-const StepIdentityAndPdl: React.FC<StepIdentityAndPdlProps> = ({
+const StepIdentityAndPdl = ({
sgeState,
onChange,
}: StepIdentityAndPdlProps) => {
diff --git a/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
index 03921d3db74467b78d419513b42ccc67b9fdf903..d497f4279740b55cac3eb60cc1527c10f54b5aca 100644
--- a/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
@@ -12,7 +12,7 @@ interface ConsumptionVisualizerProps {
fluidType: FluidType
setActive: React.Dispatch<React.SetStateAction<boolean>>
}
-const ConsumptionVisualizer: React.FC<ConsumptionVisualizerProps> = ({
+const ConsumptionVisualizer = ({
fluidType,
setActive,
}: ConsumptionVisualizerProps) => {
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
index b4818a32796c03afcbd0723bd7ec43c6e89b0086..83fa79f6b3e31125182c1deda1a0b861a7783b86 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
@@ -1,10 +1,11 @@
import { DataloadState } from 'enum/dataload.enum'
import { FluidType } from 'enum/fluid.enum'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import { Dataload } from 'models'
import React from 'react'
import { Provider } from 'react-redux'
-import { BrowserRouter as Router } from 'react-router-dom'
+import { BrowserRouter } from 'react-router-dom'
import configureStore from 'redux-mock-store'
import UsageEventService from 'services/usageEvent.service'
import { baseDataLoad } from '../../../tests/__mocks__/chartData.mock'
@@ -12,6 +13,7 @@ import {
mockInitialChartState,
mockInitialEcolyoState,
} from '../../../tests/__mocks__/store'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import DataloadConsumptionVisualizer from './DataloadConsumptionVisualizer'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -50,40 +52,44 @@ const dataLoadWithValueDetail: Dataload = {
}
describe('Dataload consumption visualizer component', () => {
- it('should render correctly', () => {
+ it('should render with single fluid', async () => {
const store = mockStore({
- ecolyo: mockInitialEcolyoState,
+ ecolyo: {
+ chart: mockChartStateLoaded,
+ },
})
const wrapper = mount(
<Provider store={store}>
<DataloadConsumptionVisualizer
- fluidType={FluidType.MULTIFLUID}
+ fluidType={FluidType.ELECTRICITY}
dataload={baseDataLoad}
compareDataload={baseDataLoad}
setActive={jest.fn()}
/>
</Provider>
)
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
- it('should render with single fluid', () => {
+ it('should render correctly multifluid and 3 clickable links', () => {
const store = mockStore({
- ecolyo: {
- chart: mockChartStateLoaded,
- },
+ ecolyo: mockInitialEcolyoState,
})
const wrapper = mount(
<Provider store={store}>
- <DataloadConsumptionVisualizer
- fluidType={FluidType.ELECTRICITY}
- dataload={baseDataLoad}
- compareDataload={baseDataLoad}
- setActive={jest.fn()}
- />
+ <BrowserRouter>
+ <DataloadConsumptionVisualizer
+ fluidType={FluidType.MULTIFLUID}
+ dataload={baseDataLoad}
+ compareDataload={baseDataLoad}
+ setActive={jest.fn()}
+ />
+ </BrowserRouter>
</Provider>
)
- expect(wrapper).toMatchSnapshot()
+ expect(wrapper.find('.dataloadvisualizer-euro-link').length).toBe(3)
})
+
it('should render with no value to compare available', async () => {
const store = mockStore({
ecolyo: {
@@ -156,14 +162,14 @@ describe('Dataload consumption visualizer component', () => {
const wrapper = mount(
<Provider store={store}>
- <Router>
+ <BrowserRouter>
<DataloadConsumptionVisualizer
fluidType={FluidType.MULTIFLUID}
dataload={dataLoadWithValueDetail}
compareDataload={emptyDataLoad}
setActive={jest.fn()}
/>
- </Router>
+ </BrowserRouter>
</Provider>
)
jest.mock('services/usageEvent.service')
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
index 85ed7d9554cb8906e385696c70def0cb8b7f7a9a..be0f81676b33701aa787dcf8c0556fb5519ccf95 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
@@ -21,16 +21,13 @@ const DataloadConsumptionVisualizer = ({
compareDataload,
setActive,
}: DataloadConsumptionVisualizerProps) => {
- const { loading, showCompare } = useSelector(
- (state: AppStore) => state.ecolyo.chart
- )
+ const { showCompare } = useSelector((state: AppStore) => state.ecolyo.chart)
const [openEstimationModal, setOpenEstimationModal] = useState<boolean>(false)
-
const toggleEstimationModal = useCallback(() => {
setOpenEstimationModal(prev => !prev)
}, [])
- if (loading || !dataload) {
+ if (!dataload) {
return <div className="dataloadvisualizer-root" />
}
diff --git a/src/components/ConsumptionVisualizer/DataloadNoValue.tsx b/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
index 04b194750ea7bf4b55ff0e79a04837c4f166ba35..65aee657bcf1604731a8530053e77a10a8264841 100644
--- a/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
@@ -12,7 +12,7 @@ interface DataloadNoValueProps {
setActive: React.Dispatch<React.SetStateAction<boolean>>
}
-const DataloadNoValue: React.FC<DataloadNoValueProps> = ({
+const DataloadNoValue = ({
dataload,
fluidType,
setActive,
diff --git a/src/components/ConsumptionVisualizer/DataloadSection.tsx b/src/components/ConsumptionVisualizer/DataloadSection.tsx
index 3132d25dad4af730f36e8a1f946cd529eec3d43d..85ddd0648f5e3fb88217789b499d4bc7d413247e 100644
--- a/src/components/ConsumptionVisualizer/DataloadSection.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSection.tsx
@@ -4,9 +4,10 @@ import { DataloadSectionType } from 'enum/dataload.enum'
import { FluidType } from 'enum/fluid.enum'
import { Dataload } from 'models'
import React from 'react'
-import './consumptionVisualizer.scss'
+import { getFluidName } from 'utils/utils'
import DataloadSectionDetail from './DataloadSectionDetail'
import DataloadSectionValue from './DataloadSectionValue'
+import './consumptionVisualizer.scss'
interface DataloadSectionProps {
dataload: Dataload
@@ -14,7 +15,7 @@ interface DataloadSectionProps {
dataloadSectionType: DataloadSectionType
toggleEstimationModal: () => void
}
-const DataloadSection: React.FC<DataloadSectionProps> = ({
+const DataloadSection = ({
dataload,
fluidType,
dataloadSectionType,
@@ -50,9 +51,9 @@ const DataloadSection: React.FC<DataloadSectionProps> = ({
>
<div
className={classNames('dataloadvisualizer-value', 'text-36-bold', {
- [`${FluidType[fluidType].toLowerCase()}-compare`]:
+ [`${getFluidName(fluidType)}-compare`]:
dataloadSectionType === DataloadSectionType.LEFT,
- [`${FluidType[fluidType].toLowerCase()}`]:
+ [`${getFluidName(fluidType)}`]:
dataloadSectionType === DataloadSectionType.NO_COMPARE ||
dataloadSectionType === DataloadSectionType.RIGHT,
['multifluid-compare-color']:
diff --git a/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx b/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
index 7ce1a123f3dd2b3a0022acb1c83599b16b8e419e..78861f7447c7eacecafa07f88a61f561afd9a039 100644
--- a/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
@@ -11,7 +11,7 @@ import { NavLink } from 'react-router-dom'
import ConverterService from 'services/converter.service'
import UsageEventService from 'services/usageEvent.service'
import { getNavPicto } from 'utils/picto'
-import { formatNumberValues } from 'utils/utils'
+import { formatNumberValues, getFluidName } from 'utils/utils'
interface DataloadSectionDetailProps {
dataload: Dataload
@@ -42,9 +42,9 @@ const DataloadSectionDetail = ({
return (
<div
className={classNames('dataloadvisualizer-euro text-16-normal', {
- [`${FluidType[fluidType].toLowerCase()}`]:
+ [`${getFluidName(fluidType)}`]:
dataloadSectionType !== DataloadSectionType.LEFT,
- [`${FluidType[fluidType].toLowerCase()}-compare`]:
+ [`${getFluidName(fluidType)}-compare`]:
dataloadSectionType === DataloadSectionType.LEFT,
})}
>
@@ -119,13 +119,11 @@ const DataloadSectionDetail = ({
return (
<div className="dataloadvisualizer-euro text-16-normal">
<NavLink
- to={`/consumption/${FluidType[fluidType].toLowerCase()}`}
+ to={`/consumption/${getFluidName(fluidType)}`}
className="dataloadvisualizer-euro-link"
>
<div
- className={`dataloadvisualizer-euro-fluid ${FluidType[
- fluidType
- ].toLowerCase()}`}
+ className={`dataloadvisualizer-euro-fluid ${getFluidName(fluidType)}`}
>
<Icon
className="dataloadvisualizer-euro-fluid-icon"
diff --git a/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.spec.tsx b/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.spec.tsx
index 6c6816dff5e797fce51b7a35c762fe908a279628..789d44b5bfbe4deabde615a843b853362005a2e7 100644
--- a/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.spec.tsx
+++ b/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.spec.tsx
@@ -1,8 +1,10 @@
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import React from 'react'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import { mockInitialEcolyoState } from '../../../tests/__mocks__/store'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import EstimatedConsumptionModal from './EstimatedConsumptionModal'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -27,7 +29,7 @@ jest.mock('services/fluidsPrices.service', () => {
const mockStore = configureStore([])
const mockHandleClose = jest.fn()
describe('EstimatedConsumptionModal component', () => {
- it('should render correctly', () => {
+ it('should render correctly', async () => {
const store = mockStore({
ecolyo: mockInitialEcolyoState,
})
@@ -39,6 +41,7 @@ describe('EstimatedConsumptionModal component', () => {
/>
</Provider>
)
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
})
diff --git a/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx b/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx
index 267b981cdb1122fc7cce0a735602bd43da9de3e8..94a30953d04311e1a8ba23824bd07a3d2b718e28 100644
--- a/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx
+++ b/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx
@@ -16,7 +16,7 @@ interface EstimatedConsumptionModalProps {
handleCloseClick: () => void
}
-const EstimatedConsumptionModal: React.FC<EstimatedConsumptionModalProps> = ({
+const EstimatedConsumptionModal = ({
open,
handleCloseClick,
}: EstimatedConsumptionModalProps) => {
diff --git a/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx b/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx
index ca13f103c9b9e49161596d48110eab020b14facc..85e4f86bafbcd303ce130ab2784c3493fea55886 100644
--- a/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx
+++ b/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx
@@ -1,8 +1,10 @@
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import React from 'react'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import { mockInitialEcolyoState } from '../../../tests/__mocks__/store'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import NoDataModal from './NoDataModal'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -18,7 +20,7 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
const mockStore = configureStore([])
const mockHandleClose = jest.fn()
describe('NoDataModal component', () => {
- it('should render correctly', () => {
+ it('should render correctly', async () => {
const store = mockStore({
ecolyo: mockInitialEcolyoState,
})
@@ -27,6 +29,7 @@ describe('NoDataModal component', () => {
<NoDataModal open={true} handleCloseClick={mockHandleClose} />
</Provider>
)
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
})
diff --git a/src/components/ConsumptionVisualizer/NoDataModal.tsx b/src/components/ConsumptionVisualizer/NoDataModal.tsx
index 11c362381192ab392d009f238999a7dd2609e3c6..98112d8f7eaa8dddd35673abbf820fe22e08b618 100644
--- a/src/components/ConsumptionVisualizer/NoDataModal.tsx
+++ b/src/components/ConsumptionVisualizer/NoDataModal.tsx
@@ -12,10 +12,7 @@ interface NoDataModalProps {
handleCloseClick: () => void
}
-const NoDataModal: React.FC<NoDataModalProps> = ({
- open,
- handleCloseClick,
-}: NoDataModalProps) => {
+const NoDataModal = ({ open, handleCloseClick }: NoDataModalProps) => {
const { t } = useI18n()
return (
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/DataloadConsumptionVisualizer.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/DataloadConsumptionVisualizer.spec.tsx.snap
index e3a2075d632b0ac68586d2d92b6c0711aab83ec2..3161ddaa1c875e273f2f2cd14cb21dea4af246e9 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/DataloadConsumptionVisualizer.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/DataloadConsumptionVisualizer.spec.tsx.snap
@@ -1,5 +1,478 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Dataload consumption visualizer component should render correctly 1`] = `ReactWrapper {}`;
-
-exports[`Dataload consumption visualizer component should render with single fluid 1`] = `ReactWrapper {}`;
+exports[`Dataload consumption visualizer component should render with single fluid 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <DataloadConsumptionVisualizer
+ compareDataload={
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ }
+ }
+ dataload={
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ }
+ }
+ fluidType={0}
+ setActive={[MockFunction]}
+ >
+ <div
+ className="dataloadvisualizer-root"
+ >
+ <div
+ className="dataloadvisualizer-content"
+ >
+ <DataloadSection
+ dataload={
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ }
+ }
+ dataloadSectionType="NO_COMPARE"
+ fluidType={0}
+ toggleEstimationModal={[Function]}
+ >
+ <div
+ className="dataloadvisualizer-section"
+ >
+ <div
+ className="dataloadvisualizer-value text-36-bold electricity"
+ >
+ <DataloadSectionValue
+ dataload={
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ }
+ }
+ dataloadSectionType="NO_COMPARE"
+ fluidType={0}
+ toggleEstimationModal={[Function]}
+ >
+ 12,00
+ <span
+ className="text-18-normal"
+ >
+ FLUID.ELECTRICITY.UNIT
+ </span>
+ </DataloadSectionValue>
+ </div>
+ <DataloadSectionDetail
+ dataload={
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ }
+ }
+ dataloadSectionType="NO_COMPARE"
+ fluidType={0}
+ >
+ <div
+ className="dataloadvisualizer-euro text-16-normal electricity"
+ >
+ 2,09 €
+ </div>
+ </DataloadSectionDetail>
+ </div>
+ </DataloadSection>
+ </div>
+ <EstimatedConsumptionModal
+ 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 {
+ "activatedOpacity": 0.12,
+ "active": "rgba(0, 0, 0, 0.54)",
+ "disabled": "rgba(0, 0, 0, 0.26)",
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
+ "disabledOpacity": 0.38,
+ "focus": "rgba(0, 0, 0, 0.12)",
+ "focusOpacity": 0.12,
+ "hover": "rgba(0, 0, 0, 0.04)",
+ "hoverOpacity": 0.04,
+ "selected": "rgba(0, 0, 0, 0.08)",
+ "selectedOpacity": 0.08,
+ },
+ "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}
+ disableEscapeKeyDown={false}
+ onClose={[Function]}
+ open={false}
+ />
+ </ForwardRef(Dialog)>
+ </WithStyles(ForwardRef(Dialog))>
+ </EstimatedConsumptionModal>
+ </div>
+ </DataloadConsumptionVisualizer>
+</Provider>
+`;
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap
index 70af07cd53f5d83d0e2ed9c6d147ed2c7c74b50e..3d48d7e5101088f20e3f7f903aae9b541f5261c7 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap
@@ -1,3 +1,904 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`EstimatedConsumptionModal component should render correctly 1`] = `ReactWrapper {}`;
+exports[`EstimatedConsumptionModal component should render correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <EstimatedConsumptionModal
+ 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 {
+ "activatedOpacity": 0.12,
+ "active": "rgba(0, 0, 0, 0.54)",
+ "disabled": "rgba(0, 0, 0, 0.26)",
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
+ "disabledOpacity": 0.38,
+ "focus": "rgba(0, 0, 0, 0.12)",
+ "focusOpacity": 0.12,
+ "hover": "rgba(0, 0, 0, 0.04)",
+ "hoverOpacity": 0.04,
+ "selected": "rgba(0, 0, 0, 0.08)",
+ "selectedOpacity": 0.08,
+ },
+ "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}
+ 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"
+ >
+ consumption_visualizer.modal.window_title
+ </div>
+ <button
+ aria-label="consumption_visualizer.modal.close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="estimation-modal"
+ >
+ <div
+ class="text-20-normal modal-title"
+ >
+ consumption_visualizer.modal.title
+ </div>
+ <div
+ class="text-16-normal"
+ >
+ consumption_visualizer.modal.part1
+ </div>
+ <br />
+ <div
+ class="text-16-normal"
+ >
+ consumption_visualizer.modal.part2
+ </div>
+ <ul>
+ <li>
+ <span
+ class="electricity"
+ >
+ FLUID.ELECTRICITY.LABEL
+ </span>
+ consumption_visualizer.modal.list1
+ </li>
+ <li>
+ <span
+ class="water"
+ >
+ FLUID.WATER.LABEL
+ </span>
+ consumption_visualizer.modal.list3
+ </li>
+ <li>
+ <span
+ class="gas"
+ >
+ FLUID.GAS.LABEL
+ </span>
+ consumption_visualizer.modal.list2
+ </li>
+ </ul>
+ <div
+ class="text-16-normal"
+ >
+ consumption_visualizer.modal.part3
+ </div>
+ </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))>
+ <Unstable_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"
+ onMouseDown={[Function]}
+ onMouseUp={[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"
+ >
+ consumption_visualizer.modal.window_title
+ </div>
+ <WithStyles(ForwardRef(IconButton))
+ aria-label="consumption_visualizer.modal.close"
+ className="modal-paper-close-button"
+ onClick={[MockFunction]}
+ >
+ <ForwardRef(IconButton)
+ aria-label="consumption_visualizer.modal.close"
+ className="modal-paper-close-button"
+ classes={
+ Object {
+ "colorInherit": "MuiIconButton-colorInherit",
+ "colorPrimary": "MuiIconButton-colorPrimary",
+ "colorSecondary": "MuiIconButton-colorSecondary",
+ "disabled": "Mui-disabled",
+ "edgeEnd": "MuiIconButton-edgeEnd",
+ "edgeStart": "MuiIconButton-edgeStart",
+ "label": "MuiIconButton-label",
+ "root": "MuiIconButton-root",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ onClick={[MockFunction]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="consumption_visualizer.modal.close"
+ centerRipple={true}
+ className="MuiIconButton-root modal-paper-close-button"
+ disabled={false}
+ focusRipple={true}
+ onClick={[MockFunction]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="consumption_visualizer.modal.close"
+ centerRipple={true}
+ className="MuiIconButton-root modal-paper-close-button"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ disabled={false}
+ focusRipple={true}
+ onClick={[MockFunction]}
+ >
+ <button
+ aria-label="consumption_visualizer.modal.close"
+ className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ 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="MuiIconButton-label"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={16}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </span>
+ <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)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(IconButton)>
+ </WithStyles(ForwardRef(IconButton))>
+ <div
+ className="estimation-modal"
+ >
+ <div
+ className="text-20-normal modal-title"
+ >
+ consumption_visualizer.modal.title
+ </div>
+ <div
+ className="text-16-normal"
+ >
+ consumption_visualizer.modal.part1
+ </div>
+ <br />
+ <div
+ className="text-16-normal"
+ >
+ consumption_visualizer.modal.part2
+ </div>
+ <ul>
+ <li>
+ <span
+ className="electricity"
+ >
+ FLUID.ELECTRICITY.LABEL
+ </span>
+ consumption_visualizer.modal.list1
+ </li>
+ <li>
+ <span
+ className="water"
+ >
+ FLUID.WATER.LABEL
+ </span>
+ consumption_visualizer.modal.list3
+ </li>
+ <li>
+ <span
+ className="gas"
+ >
+ FLUID.GAS.LABEL
+ </span>
+ consumption_visualizer.modal.list2
+ </li>
+ </ul>
+ <div
+ className="text-16-normal"
+ >
+ consumption_visualizer.modal.part3
+ </div>
+ </div>
+ </div>
+ </ForwardRef(Paper)>
+ </WithStyles(ForwardRef(Paper))>
+ </div>
+ </Transition>
+ </ForwardRef(Fade)>
+ <div
+ data-test="sentinelEnd"
+ tabIndex={0}
+ />
+ </Unstable_TrapFocus>
+ </div>
+ </Portal>
+ </ForwardRef(Portal)>
+ </ForwardRef(Modal)>
+ </ForwardRef(Dialog)>
+ </WithStyles(ForwardRef(Dialog))>
+ </EstimatedConsumptionModal>
+</Provider>
+`;
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
index f7551fdfb8bdd9385a89819055da7cad08d48173..5f65ba1f1858d93da1a1b0fcdd92f36235e358b1 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
@@ -1,3 +1,1080 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`NoDataModal component should render correctly 1`] = `ReactWrapper {}`;
+exports[`NoDataModal component should render correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <NoDataModal
+ 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 {
+ "activatedOpacity": 0.12,
+ "active": "rgba(0, 0, 0, 0.54)",
+ "disabled": "rgba(0, 0, 0, 0.26)",
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
+ "disabledOpacity": 0.38,
+ "focus": "rgba(0, 0, 0, 0.12)",
+ "focusOpacity": 0.12,
+ "hover": "rgba(0, 0, 0, 0.04)",
+ "hoverOpacity": 0.04,
+ "selected": "rgba(0, 0, 0, 0.08)",
+ "selectedOpacity": 0.08,
+ },
+ "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}
+ 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"
+ >
+ consumption_visualizer.modal.window_title
+ </div>
+ <button
+ aria-label="consumption_visualizer.modal.close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="nodata-modal"
+ >
+ <div
+ class="question-mark"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="36"
+ width="36"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ <div
+ class="text-20-normal title"
+ >
+ consumption_visualizer.why_no_data
+ </div>
+ <div
+ class="text-16-normal"
+ >
+ consumption_visualizer.dataModal.list_title
+ </div>
+ <div
+ class="text-16-normal justified-text"
+ >
+ <span>
+ •Â
+ </span>
+ consumption_visualizer.dataModal.item1
+ </div>
+ <div
+ class="text-16-normal justified-text"
+ >
+ <span>
+ •Â
+ </span>
+ consumption_visualizer.dataModal.item2
+ </div>
+ <div
+ class="text-16-normal justified-text"
+ >
+ <span>
+ •Â
+ </span>
+ consumption_visualizer.dataModal.item3
+ </div>
+ <div
+ class="text-16-normal justified-text"
+ >
+ <span>
+ •Â
+ </span>
+ consumption_visualizer.dataModal.item4
+ </div>
+ <button
+ aria-label="ecogesture_info_modal.button_close"
+ class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label text-16-bold"
+ >
+ 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))>
+ <Unstable_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"
+ onMouseDown={[Function]}
+ onMouseUp={[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"
+ >
+ consumption_visualizer.modal.window_title
+ </div>
+ <WithStyles(ForwardRef(IconButton))
+ aria-label="consumption_visualizer.modal.close"
+ className="modal-paper-close-button"
+ onClick={[MockFunction]}
+ >
+ <ForwardRef(IconButton)
+ aria-label="consumption_visualizer.modal.close"
+ className="modal-paper-close-button"
+ classes={
+ Object {
+ "colorInherit": "MuiIconButton-colorInherit",
+ "colorPrimary": "MuiIconButton-colorPrimary",
+ "colorSecondary": "MuiIconButton-colorSecondary",
+ "disabled": "Mui-disabled",
+ "edgeEnd": "MuiIconButton-edgeEnd",
+ "edgeStart": "MuiIconButton-edgeStart",
+ "label": "MuiIconButton-label",
+ "root": "MuiIconButton-root",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ onClick={[MockFunction]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="consumption_visualizer.modal.close"
+ centerRipple={true}
+ className="MuiIconButton-root modal-paper-close-button"
+ disabled={false}
+ focusRipple={true}
+ onClick={[MockFunction]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="consumption_visualizer.modal.close"
+ centerRipple={true}
+ className="MuiIconButton-root modal-paper-close-button"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ disabled={false}
+ focusRipple={true}
+ onClick={[MockFunction]}
+ >
+ <button
+ aria-label="consumption_visualizer.modal.close"
+ className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ 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="MuiIconButton-label"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={16}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </span>
+ <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)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(IconButton)>
+ </WithStyles(ForwardRef(IconButton))>
+ <div
+ className="nodata-modal"
+ >
+ <div
+ className="question-mark"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={36}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={36}
+ style={Object {}}
+ width={36}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={36}
+ style={Object {}}
+ width={36}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </div>
+ <div
+ className="text-20-normal title"
+ >
+ consumption_visualizer.why_no_data
+ </div>
+ <div
+ className="text-16-normal"
+ >
+ consumption_visualizer.dataModal.list_title
+ </div>
+ <div
+ className="text-16-normal justified-text"
+ >
+ <span>
+ •Â
+ </span>
+ consumption_visualizer.dataModal.item1
+ </div>
+ <div
+ className="text-16-normal justified-text"
+ >
+ <span>
+ •Â
+ </span>
+ consumption_visualizer.dataModal.item2
+ </div>
+ <div
+ className="text-16-normal justified-text"
+ >
+ <span>
+ •Â
+ </span>
+ consumption_visualizer.dataModal.item3
+ </div>
+ <div
+ className="text-16-normal justified-text"
+ >
+ <span>
+ •Â
+ </span>
+ consumption_visualizer.dataModal.item4
+ </div>
+ <WithStyles(ForwardRef(Button))
+ aria-label="ecogesture_info_modal.button_close"
+ classes={
+ Object {
+ "label": "text-16-bold",
+ "root": "btn-highlight",
+ }
+ }
+ onClick={[MockFunction]}
+ >
+ <ForwardRef(Button)
+ aria-label="ecogesture_info_modal.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-16-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={[MockFunction]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="ecogesture_info_modal.button_close"
+ className="MuiButton-root btn-highlight MuiButton-text"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[MockFunction]}
+ type="button"
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="ecogesture_info_modal.button_close"
+ className="MuiButton-root btn-highlight 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.button_close"
+ className="MuiButtonBase-root MuiButton-root btn-highlight 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-16-bold"
+ >
+ ecogesture_info_modal.button_close
+ </span>
+ <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)>
+ </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}
+ />
+ </Unstable_TrapFocus>
+ </div>
+ </Portal>
+ </ForwardRef(Portal)>
+ </ForwardRef(Modal)>
+ </ForwardRef(Dialog)>
+ </WithStyles(ForwardRef(Dialog))>
+ </NoDataModal>
+</Provider>
+`;
diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
index 10cf6a7cd8270383fffdcd384df4cb9bfc41ee03..caf29cd956b6185a27e3130d7256889265622533 100644
--- a/src/components/Content/Content.tsx
+++ b/src/components/Content/Content.tsx
@@ -7,12 +7,12 @@ import { changeScreenType } from 'store/global/global.actions'
import { openFeedbackModal } from 'store/modal/modal.slice'
import './content.scss'
interface ContentProps {
- children?: React.ReactNode
+ children: React.ReactNode
height?: number
background?: string
}
-const Content: React.FC<ContentProps> = ({
+const Content = ({
children,
height = 0,
background = 'inherit',
diff --git a/src/components/CustomPopup/CustomPopupModal.tsx b/src/components/CustomPopup/CustomPopupModal.tsx
index 333a703cfce737c1fa7496782ce1f960fc48d0fa..f3e5fb338bd45502119dbd5719abb86d145756e0 100644
--- a/src/components/CustomPopup/CustomPopupModal.tsx
+++ b/src/components/CustomPopup/CustomPopupModal.tsx
@@ -16,10 +16,10 @@ interface CustomPopupModalProps {
handleCloseClick: () => void
}
-const CustomPopupModal: React.FC<CustomPopupModalProps> = ({
+const CustomPopupModal = ({
customPopup,
handleCloseClick,
-}) => {
+}: CustomPopupModalProps) => {
const { t } = useI18n()
const isPopupOutdated = () =>
DateTime.local() >= DateTime.fromISO(customPopup.endDate)
diff --git a/src/components/DateNavigator/DateNavigator.spec.tsx b/src/components/DateNavigator/DateNavigator.spec.tsx
index 7c1f57700326aa79c96f0ce1163b3b9d3933c277..60020958c4661d0fc0bbf2df6835ac022838dc78 100644
--- a/src/components/DateNavigator/DateNavigator.spec.tsx
+++ b/src/components/DateNavigator/DateNavigator.spec.tsx
@@ -1,13 +1,14 @@
import { IconButton } from '@material-ui/core'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import { DateTime } from 'luxon'
import React from 'react'
-import { act } from 'react-dom/test-utils'
import * as reactRedux from 'react-redux'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { mockInitialChartState } from '../../../tests/__mocks__/store'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import DateNavigator from './DateNavigator'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -21,10 +22,20 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
})
const mockStore = configureStore([])
+jest.mock(
+ 'components/DateNavigator/DateNavigatorFormat',
+ () => 'mock-date-navigator-format'
+)
+
const mockUseDispatch = jest.spyOn(reactRedux, 'useDispatch')
describe('DateNavigator component', () => {
- it('should be rendered correctly', () => {
+ const mockedDate = DateTime.local(2021, 7, 1)
+ .setZone('utc', {
+ keepLocalTime: true,
+ })
+ .startOf('day')
+ it('should be rendered correctly', async () => {
const store = mockStore({
ecolyo: {
global: globalStateData,
@@ -33,14 +44,11 @@ describe('DateNavigator component', () => {
})
const wrapper = mount(
<Provider store={store}>
- <DateNavigator
- currentAnalysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
- />
+ <DateNavigator currentAnalysisDate={mockedDate} />
</Provider>
- ).getElement()
- expect(wrapper).toMatchSnapshot()
+ )
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should click on left arrow and change date', async () => {
const store = mockStore({
@@ -51,17 +59,10 @@ describe('DateNavigator component', () => {
})
const wrapper = mount(
<Provider store={store}>
- <DateNavigator
- currentAnalysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
- />
+ <DateNavigator currentAnalysisDate={mockedDate} />
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
wrapper.find(IconButton).first().simulate('click')
expect(mockUseDispatch).toHaveBeenCalledTimes(2)
})
@@ -74,13 +75,10 @@ describe('DateNavigator component', () => {
})
const wrapper = mount(
<Provider store={store}>
- <DateNavigator currentAnalysisDate={DateTime.now()} />
+ <DateNavigator currentAnalysisDate={mockedDate} />
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
wrapper.find(IconButton).at(1).simulate('click')
expect(mockUseDispatch).toHaveBeenCalledTimes(3)
})
@@ -97,10 +95,7 @@ describe('DateNavigator component', () => {
<DateNavigator />
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
wrapper.find(IconButton).at(0).simulate('click')
expect(mockUseDispatch).toHaveBeenCalledTimes(4)
})
@@ -116,10 +111,7 @@ describe('DateNavigator component', () => {
<DateNavigator />
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
wrapper.find(IconButton).at(1).simulate('click')
expect(mockUseDispatch).toHaveBeenCalledTimes(5)
})
diff --git a/src/components/DateNavigator/DateNavigator.tsx b/src/components/DateNavigator/DateNavigator.tsx
index ba0054f21db61154cfa79c8a3a9f10763f1173ee..97a2a39ec089523dd957dae2b4eed0c79503aff8 100644
--- a/src/components/DateNavigator/DateNavigator.tsx
+++ b/src/components/DateNavigator/DateNavigator.tsx
@@ -12,20 +12,20 @@ import React, { Dispatch } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import DateChartService from 'services/dateChart.service'
import { AppActionsTypes, AppStore } from 'store'
+import { setAnalysisMonth } from 'store/analysis/analysis.slice'
import { setCurrentIndex, setSelectedDate } from 'store/chart/chart.slice'
import { isLastDateReached } from 'utils/date'
import { isKonnectorActive } from 'utils/utils'
import './datenavigator.scss'
interface DateNavigatorProps {
+ /** If a value is given, Navigator is for Analysis view */
currentAnalysisDate?: DateTime
- setCurrentAnalysisDate?: React.Dispatch<React.SetStateAction<DateTime>>
inlineDateDisplay?: boolean
}
-const DateNavigator: React.FC<DateNavigatorProps> = ({
+const DateNavigator = ({
currentAnalysisDate,
- setCurrentAnalysisDate,
inlineDateDisplay = false,
}: DateNavigatorProps) => {
const { t } = useI18n()
@@ -46,9 +46,10 @@ const DateNavigator: React.FC<DateNavigatorProps> = ({
const dateChartService = new DateChartService()
+ /** Handle date navigation from ConsumptionView and Analysis view, not ideal though */
const handleClickMove = (increment: number) => {
if (!currentAnalysisDate) {
- const updatedDate: DateTime = dateChartService.incrementeDate(
+ const updatedDate: DateTime = dateChartService.incrementDate(
currentTimeStep,
selectedDate,
increment
@@ -60,12 +61,12 @@ const DateNavigator: React.FC<DateNavigatorProps> = ({
dispatch(setSelectedDate(updatedDate))
dispatch(setCurrentIndex(updatedIndex))
} else {
- const updatedDate: DateTime = dateChartService.incrementeDate(
+ const updatedDate: DateTime = dateChartService.incrementDate(
TimeStep.MONTH,
currentAnalysisDate,
increment
)
- setCurrentAnalysisDate?.(updatedDate)
+ dispatch(setAnalysisMonth(updatedDate))
}
}
diff --git a/src/components/DateNavigator/DateNavigatorFormat.tsx b/src/components/DateNavigator/DateNavigatorFormat.tsx
index 7b206615476ff2c9e875f46682907f09900026ad..d3052d2440d42674c8bb84d45a0156a99bdaed02 100644
--- a/src/components/DateNavigator/DateNavigatorFormat.tsx
+++ b/src/components/DateNavigator/DateNavigatorFormat.tsx
@@ -9,7 +9,7 @@ interface DateNavigatorFormatProps {
inline: boolean
}
-const DateNavigatorFormat: React.FC<DateNavigatorFormatProps> = ({
+const DateNavigatorFormat = ({
timeStep,
date,
inline,
diff --git a/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap b/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
index e58a9227a17de891a3736c3f46af672aaf4b52d8..387873be42031c45326461c64db8e7ccba2da098 100644
--- a/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
+++ b/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
@@ -15,6 +15,270 @@ exports[`DateNavigator component should be rendered correctly 1`] = `
>
<DateNavigator
currentAnalysisDate={"2021-07-01T00:00:00.000Z"}
- />
+ >
+ <div
+ className="date-navigator"
+ >
+ <div>
+ <WithStyles(ForwardRef(IconButton))
+ aria-label="consumption.accessibility.button_previous_value"
+ className="date-navigator-button disable"
+ onClick={[Function]}
+ >
+ <ForwardRef(IconButton)
+ aria-label="consumption.accessibility.button_previous_value"
+ className="date-navigator-button disable"
+ classes={
+ Object {
+ "colorInherit": "MuiIconButton-colorInherit",
+ "colorPrimary": "MuiIconButton-colorPrimary",
+ "colorSecondary": "MuiIconButton-colorSecondary",
+ "disabled": "Mui-disabled",
+ "edgeEnd": "MuiIconButton-edgeEnd",
+ "edgeStart": "MuiIconButton-edgeStart",
+ "label": "MuiIconButton-label",
+ "root": "MuiIconButton-root",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="consumption.accessibility.button_previous_value"
+ centerRipple={true}
+ className="MuiIconButton-root date-navigator-button disable"
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="consumption.accessibility.button_previous_value"
+ centerRipple={true}
+ className="MuiIconButton-root date-navigator-button disable"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <button
+ aria-label="consumption.accessibility.button_previous_value"
+ className="MuiButtonBase-root MuiIconButton-root date-navigator-button disable"
+ 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"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={16}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </span>
+ <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)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(IconButton)>
+ </WithStyles(ForwardRef(IconButton))>
+ </div>
+ <mock-date-navigator-format
+ date={"2021-06-01T00:00:00.000Z"}
+ inline={false}
+ timeStep={40}
+ />
+ <div>
+ <WithStyles(ForwardRef(IconButton))
+ aria-label="consumption.accessibility.button_next_value"
+ className="date-navigator-button disable"
+ onClick={[Function]}
+ >
+ <ForwardRef(IconButton)
+ aria-label="consumption.accessibility.button_next_value"
+ className="date-navigator-button disable"
+ classes={
+ Object {
+ "colorInherit": "MuiIconButton-colorInherit",
+ "colorPrimary": "MuiIconButton-colorPrimary",
+ "colorSecondary": "MuiIconButton-colorSecondary",
+ "disabled": "Mui-disabled",
+ "edgeEnd": "MuiIconButton-edgeEnd",
+ "edgeStart": "MuiIconButton-edgeStart",
+ "label": "MuiIconButton-label",
+ "root": "MuiIconButton-root",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="consumption.accessibility.button_next_value"
+ centerRipple={true}
+ className="MuiIconButton-root date-navigator-button disable"
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="consumption.accessibility.button_next_value"
+ centerRipple={true}
+ className="MuiIconButton-root date-navigator-button disable"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <button
+ aria-label="consumption.accessibility.button_next_value"
+ className="MuiButtonBase-root MuiIconButton-root date-navigator-button disable"
+ 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"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={16}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </span>
+ <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)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(IconButton)>
+ </WithStyles(ForwardRef(IconButton))>
+ </div>
+ </div>
+ </DateNavigator>
</Provider>
`;
diff --git a/src/components/Duel/DuelBar.tsx b/src/components/Duel/DuelBar.tsx
index 1fbe4960739cec6af7b2113a147ac6d09963cfc7..99cfce82752506906ef1cd3b18b888763c52a89c 100644
--- a/src/components/Duel/DuelBar.tsx
+++ b/src/components/Duel/DuelBar.tsx
@@ -1,180 +1,158 @@
-import AxisBottom from 'components/Charts/AxisBottom'
-import AxisRight from 'components/Charts/AxisRight'
-import Bar from 'components/Charts/Bar'
-import UncomingBar from 'components/Charts/UncomingBar'
-import { scaleBand, ScaleBand, scaleLinear, ScaleLinear } from 'd3-scale'
-import { FluidType } from 'enum/fluid.enum'
-import { TimeStep } from 'enum/timeStep.enum'
-import { DateTime } from 'luxon'
-import { Dataload, UserChallenge } from 'models'
-import React from 'react'
-import { useSelector } from 'react-redux'
-import { AppStore } from 'store'
-
-export interface BarChartProps {
- userChallenge: UserChallenge
- finishedDataLoad?: Dataload[]
- average: number
- timeStep: TimeStep
- width?: number
- height?: number
- marginLeft?: number
- marginRight?: number
- marginTop?: number
- marginBottom?: number
-}
-
-interface DefaultProps {
- width: number
- height: number
- marginLeft: number
- marginRight: number
- marginTop: number
- marginBottom: number
-}
-
-type PropsWithDefaults = BarChartProps & DefaultProps
-
-const DuelBar: React.FC<BarChartProps> = (props: BarChartProps) => {
- const {
- userChallenge,
- finishedDataLoad,
- timeStep,
- average,
- width,
- height,
- marginLeft,
- marginRight,
- marginTop,
- marginBottom,
- } = props as PropsWithDefaults
-
- const { currentDataload } = useSelector(
- (state: AppStore) => state.ecolyo.challenge
- )
- const dataload: Dataload[] = finishedDataLoad
- ? finishedDataLoad
- : currentDataload
- const getContentWidth = () => {
- return width - marginLeft - marginRight
- }
-
- const getContentHeight = () => {
- return height - marginTop - marginBottom
- }
-
- const getMaxLoad = () => {
- return dataload ? Math.max(...dataload.map((d: Dataload) => d.value)) : 0
- }
-
- const xScale: ScaleBand<string> = scaleBand()
- .domain(
- dataload.map((d: Dataload) =>
- d.date.toLocaleString(DateTime.DATETIME_SHORT)
- )
- )
- .range([0, getContentWidth()])
- .padding(0.2)
-
- const yScale: ScaleLinear<number, number> = scaleLinear()
- .domain([0, getMaxLoad() > average ? getMaxLoad() : average * 2])
- .range([getContentHeight(), 0])
-
- const isUpcoming = (dataload: Dataload): boolean => {
- let completedValueDetail = true
- if (dataload.valueDetail) {
- dataload.valueDetail.forEach(value => {
- if (!value) completedValueDetail = false
- })
- }
- if (!dataload.valueDetail || !completedValueDetail) {
- const dateDiff = DateTime.local()
- .setZone('utc', { keepLocalTime: true })
- .diff(dataload.date, 'days')
- .toObject()
- if (
- dateDiff.days !== undefined &&
- userChallenge !== undefined &&
- 0 < dateDiff.days
- ) {
- return true
- }
- }
- return false
- }
-
- return (
- <svg width={width} height={height}>
- <AxisRight
- fluidType={FluidType.MULTIFLUID}
- yScale={yScale}
- width={width}
- marginRight={marginRight - 10}
- marginTop={marginTop}
- />
- <g transform={`translate(${marginLeft},${marginTop})`}>
- {dataload.map((d: Dataload, index: number) => {
- if (!isUpcoming(d)) {
- return (
- <Bar
- key={index}
- index={index}
- dataload={d}
- compareDataload={null}
- fluidType={FluidType.MULTIFLUID}
- timeStep={timeStep}
- compare={false}
- xScale={xScale}
- yScale={yScale}
- height={getContentHeight()}
- isSwitching={false}
- isDuel={true}
- />
- )
- } else {
- return (
- <UncomingBar
- key={index}
- index={index}
- dataload={d}
- xScale={xScale}
- yScale={yScale}
- height={getContentHeight()}
- average={average / 2}
- />
- )
- }
- })}
- <line
- transform={`translate(0, ${yScale(average)})`}
- strokeDasharray="10"
- x1="0"
- y1={`0`}
- x2={width - marginRight}
- y2={`0`}
- className="bar-average"
- />
- </g>
- <AxisBottom
- data={dataload}
- timeStep={timeStep}
- xScale={xScale}
- height={height}
- marginLeft={marginLeft}
- marginBottom={marginBottom}
- isDuel={true}
- />
- </svg>
- )
-}
-
-DuelBar.defaultProps = {
- width: 600,
- height: 400,
- marginLeft: 10,
- marginRight: 50,
- marginTop: 20,
- marginBottom: 50,
-}
-
-export default DuelBar
+import AxisBottom from 'components/Charts/AxisBottom'
+import AxisRight from 'components/Charts/AxisRight'
+import Bar from 'components/Charts/Bar'
+import UncomingBar from 'components/Charts/UncomingBar'
+import { scaleBand, ScaleBand, scaleLinear, ScaleLinear } from 'd3-scale'
+import { FluidType } from 'enum/fluid.enum'
+import { TimeStep } from 'enum/timeStep.enum'
+import { DateTime } from 'luxon'
+import { Dataload, UserChallenge } from 'models'
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { AppStore } from 'store'
+
+export interface BarChartProps {
+ userChallenge: UserChallenge
+ finishedDataLoad?: Dataload[]
+ average: number
+ timeStep: TimeStep
+ width?: number
+ height?: number
+ marginLeft?: number
+ marginRight?: number
+ marginTop?: number
+ marginBottom?: number
+}
+
+const DuelBar = ({
+ userChallenge,
+ finishedDataLoad,
+ timeStep,
+ average,
+ width = 600,
+ height = 400,
+ marginLeft = 10,
+ marginRight = 50,
+ marginTop = 20,
+ marginBottom = 50,
+}: BarChartProps) => {
+ const { currentDataload } = useSelector(
+ (state: AppStore) => state.ecolyo.challenge
+ )
+ const dataload: Dataload[] = finishedDataLoad
+ ? finishedDataLoad
+ : currentDataload
+ const getContentWidth = () => {
+ return width - marginLeft - marginRight
+ }
+
+ const getContentHeight = () => {
+ return height - marginTop - marginBottom
+ }
+
+ const getMaxLoad = () => {
+ return dataload ? Math.max(...dataload.map((d: Dataload) => d.value)) : 0
+ }
+
+ const xScale: ScaleBand<string> = scaleBand()
+ .domain(
+ dataload.map((d: Dataload) =>
+ d.date.toLocaleString(DateTime.DATETIME_SHORT)
+ )
+ )
+ .range([0, getContentWidth()])
+ .padding(0.2)
+
+ const yScale: ScaleLinear<number, number> = scaleLinear()
+ .domain([0, getMaxLoad() > average ? getMaxLoad() : average * 2])
+ .range([getContentHeight(), 0])
+
+ const isUpcoming = (dataload: Dataload): boolean => {
+ let completedValueDetail = true
+ if (dataload.valueDetail) {
+ dataload.valueDetail.forEach(value => {
+ if (!value) completedValueDetail = false
+ })
+ }
+ if (!dataload.valueDetail || !completedValueDetail) {
+ const dateDiff = DateTime.local()
+ .setZone('utc', { keepLocalTime: true })
+ .diff(dataload.date, 'days')
+ .toObject()
+ if (
+ dateDiff.days !== undefined &&
+ userChallenge !== undefined &&
+ 0 < dateDiff.days
+ ) {
+ return true
+ }
+ }
+ return false
+ }
+
+ return (
+ <svg width={width} height={height}>
+ <AxisRight
+ fluidType={FluidType.MULTIFLUID}
+ yScale={yScale}
+ width={width}
+ marginRight={marginRight - 10}
+ marginTop={marginTop}
+ />
+ <g transform={`translate(${marginLeft},${marginTop})`}>
+ {dataload.map((d: Dataload, index: number) => {
+ if (!isUpcoming(d)) {
+ return (
+ <Bar
+ key={index}
+ index={index}
+ dataload={d}
+ compareDataload={null}
+ fluidType={FluidType.MULTIFLUID}
+ timeStep={timeStep}
+ compare={false}
+ xScale={xScale}
+ yScale={yScale}
+ height={getContentHeight()}
+ isSwitching={false}
+ isDuel={true}
+ />
+ )
+ } else {
+ return (
+ <UncomingBar
+ key={index}
+ index={index}
+ dataload={d}
+ xScale={xScale}
+ yScale={yScale}
+ height={getContentHeight()}
+ average={average / 2}
+ />
+ )
+ }
+ })}
+ <line
+ transform={`translate(0, ${yScale(average)})`}
+ strokeDasharray="10"
+ x1="0"
+ y1={`0`}
+ x2={width - marginRight}
+ y2={`0`}
+ className="bar-average"
+ />
+ </g>
+ <AxisBottom
+ data={dataload}
+ timeStep={timeStep}
+ xScale={xScale}
+ height={height}
+ marginLeft={marginLeft}
+ marginBottom={marginBottom}
+ isDuel={true}
+ />
+ </svg>
+ )
+}
+
+export default DuelBar
diff --git a/src/components/Duel/DuelChart.tsx b/src/components/Duel/DuelChart.tsx
index eaa8d67195fbdaaea588bac2d525d34ba9d721a0..5e3b76882bc691117a73baf1e81ded9a923fb68e 100644
--- a/src/components/Duel/DuelChart.tsx
+++ b/src/components/Duel/DuelChart.tsx
@@ -11,7 +11,7 @@ interface DuelChartProps {
height: number
}
-const DuelChart: React.FC<DuelChartProps> = ({
+const DuelChart = ({
userChallenge,
finishedDataLoad,
width,
diff --git a/src/components/Duel/DuelEmptyValueModal.tsx b/src/components/Duel/DuelEmptyValueModal.tsx
index 2fbdf024ad98f3a766d0ec8f37213d22f0259b96..cc39de14f720b650d1405f0e0604969e5230e1ea 100644
--- a/src/components/Duel/DuelEmptyValueModal.tsx
+++ b/src/components/Duel/DuelEmptyValueModal.tsx
@@ -1,70 +1,70 @@
-import Button from '@material-ui/core/Button'
-import Dialog from '@material-ui/core/Dialog'
-import defaultIcon from 'assets/icons/visu/duelResult/default.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import React, { useEffect, useState } from 'react'
-import { importIconById } from 'utils/utils'
-import './duelEmptyValueModal.scss'
-
-interface DuelEmptyValueModalProps {
- open: boolean
- handleCloseClick: () => void
-}
-
-const DuelEmptyValueModal: React.FC<DuelEmptyValueModalProps> = ({
- open,
- handleCloseClick,
-}: DuelEmptyValueModalProps) => {
- const { t } = useI18n()
- const [emptyIcon, setEmptyIcon] = useState<string>(defaultIcon)
- useEffect(() => {
- async function handleEcogestureIcon() {
- const icon = await importIconById('emptyValue', 'duel')
- if (icon) {
- setEmptyIcon(icon)
- } else {
- setEmptyIcon(defaultIcon)
- }
- }
-
- handleEcogestureIcon()
- }, [])
-
- return (
- <Dialog
- open={open}
- onClose={handleCloseClick}
- aria-labelledby={'accessibility-title'}
- classes={{
- root: 'modal-root',
- paper: 'modal-paper blue-border',
- }}
- >
- <div id={'accessibility-title'}>
- {t('duel_empty_value_modal.accessibility.window_title')}
- </div>
- <div className="modal-empty-value-root">
- <Icon className="imgResult" icon={emptyIcon} size={208} />
- <div className="text-28-normal-uppercase modal-empty-value-title">
- {t('duel_empty_value_modal.title')}
- </div>
- <div className="text-18-normal">
- {t('duel_empty_value_modal.message')}
- </div>
- <Button
- aria-label={t('duel_empty_value_modal.accessibility.button_validate')}
- onClick={handleCloseClick}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('duel_empty_value_modal.button')}
- </Button>
- </div>
- </Dialog>
- )
-}
-
-export default DuelEmptyValueModal
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
+import defaultIcon from 'assets/icons/visu/duelResult/default.svg'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import React, { useEffect, useState } from 'react'
+import { importIconById } from 'utils/utils'
+import './duelEmptyValueModal.scss'
+
+interface DuelEmptyValueModalProps {
+ open: boolean
+ handleCloseClick: () => void
+}
+
+const DuelEmptyValueModal = ({
+ open,
+ handleCloseClick,
+}: DuelEmptyValueModalProps) => {
+ const { t } = useI18n()
+ const [emptyIcon, setEmptyIcon] = useState<string>(defaultIcon)
+ useEffect(() => {
+ async function handleEcogestureIcon() {
+ const icon = await importIconById('emptyValue', 'duel')
+ if (icon) {
+ setEmptyIcon(icon)
+ } else {
+ setEmptyIcon(defaultIcon)
+ }
+ }
+
+ handleEcogestureIcon()
+ }, [])
+
+ return (
+ <Dialog
+ open={open}
+ onClose={handleCloseClick}
+ aria-labelledby={'accessibility-title'}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper blue-border',
+ }}
+ >
+ <div id={'accessibility-title'}>
+ {t('duel_empty_value_modal.accessibility.window_title')}
+ </div>
+ <div className="modal-empty-value-root">
+ <Icon className="imgResult" icon={emptyIcon} size={208} />
+ <div className="text-28-normal-uppercase modal-empty-value-title">
+ {t('duel_empty_value_modal.title')}
+ </div>
+ <div className="text-18-normal">
+ {t('duel_empty_value_modal.message')}
+ </div>
+ <Button
+ aria-label={t('duel_empty_value_modal.accessibility.button_validate')}
+ onClick={handleCloseClick}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('duel_empty_value_modal.button')}
+ </Button>
+ </div>
+ </Dialog>
+ )
+}
+
+export default DuelEmptyValueModal
diff --git a/src/components/Duel/DuelError.tsx b/src/components/Duel/DuelError.tsx
index 80e9e5945fa5d244104d05dbf1ebe9b91aaa7bff..0ae106637ceb376670be433162cef6f663506916 100644
--- a/src/components/Duel/DuelError.tsx
+++ b/src/components/Duel/DuelError.tsx
@@ -1,34 +1,34 @@
-import Button from '@material-ui/core/Button'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import React, { useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
-import './duelError.scss'
-
-const DuelError: React.FC = () => {
- const { t } = useI18n()
- const navigate = useNavigate()
-
- const goBack = useCallback(() => {
- navigate(-1)
- }, [navigate])
-
- return (
- <div className="duel-error-container">
- <div className="duel-error-message">{t('duel.global_error')}</div>
- <div className="duel-error-button">
- <Button
- aria-label={t('duel.accessibility.button_go_back')}
- onClick={goBack}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('duel.button_go_back')}
- </Button>
- </div>
- </div>
- )
-}
-
-export default DuelError
+import Button from '@material-ui/core/Button'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React, { useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+import './duelError.scss'
+
+const DuelError = () => {
+ const { t } = useI18n()
+ const navigate = useNavigate()
+
+ const goBack = useCallback(() => {
+ navigate(-1)
+ }, [navigate])
+
+ return (
+ <div className="duel-error-container">
+ <div className="duel-error-message">{t('duel.global_error')}</div>
+ <div className="duel-error-button">
+ <Button
+ aria-label={t('duel.accessibility.button_go_back')}
+ onClick={goBack}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('duel.button_go_back')}
+ </Button>
+ </div>
+ </div>
+ )
+}
+
+export default DuelError
diff --git a/src/components/Duel/DuelOngoing.spec.tsx b/src/components/Duel/DuelOngoing.spec.tsx
index 8202525bd14939a9eaf3d42a974f8b34fd72f005..45ff068e8769c537eca05c35e7deb76e220d798b 100644
--- a/src/components/Duel/DuelOngoing.spec.tsx
+++ b/src/components/Duel/DuelOngoing.spec.tsx
@@ -4,11 +4,11 @@ import { mount } from 'enzyme'
import { DateTime } from 'luxon'
import { UserChallenge } from 'models'
import React from 'react'
-import { act } from 'react-dom/test-utils'
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'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
import DuelResultModal from './DuelResultModal'
@@ -76,10 +76,7 @@ describe('DuelOngoing component', () => {
<DuelOngoing userChallenge={userChallengeData[0]} />
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find('.duel-title').text()).toEqual(
userChallengeData[1].duel.title
)
@@ -111,10 +108,7 @@ describe('DuelOngoing component', () => {
<DuelOngoing userChallenge={updatedUserChallenge} />
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find(DuelResultModal).exists()).toBeTruthy()
})
})
diff --git a/src/components/Duel/DuelOngoing.tsx b/src/components/Duel/DuelOngoing.tsx
index 56de0d8ce5a2826d3cb80f34598daf92d53aa408..2b9eef56d7f14ae68c3c88dd54efa43485acc919 100644
--- a/src/components/Duel/DuelOngoing.tsx
+++ b/src/components/Duel/DuelOngoing.tsx
@@ -31,7 +31,7 @@ import { AppActionsTypes, AppStore } from 'store'
import {
unlockNextUserChallenge,
updateUserChallengeList,
-} from 'store/challenge/challenge.actions'
+} from 'store/challenge/challenge.slice'
import { toggleChallengeDuelNotification } from 'store/global/global.actions'
import { formatNumberValues } from 'utils/utils'
import './duelOngoing.scss'
@@ -41,10 +41,7 @@ interface DuelOngoingProps {
isFinished?: boolean
}
-const DuelOngoing: React.FC<DuelOngoingProps> = ({
- userChallenge,
- isFinished,
-}: DuelOngoingProps) => {
+const DuelOngoing = ({ userChallenge, isFinished }: DuelOngoingProps) => {
const client: Client = useClient()
const { t } = useI18n()
const { currentDataload, userChallengeList } = useSelector(
@@ -57,7 +54,7 @@ const DuelOngoing: React.FC<DuelOngoingProps> = ({
const [isLastDuel, setIsLastDuel] = useState<boolean>(false)
const [finishedDataLoad, setFinishedDataLoad] = useState<Dataload[]>()
const chartContainer = useRef<HTMLDivElement>(null)
- const { height, width } = useChartResize(chartContainer)
+ const { height, width } = useChartResize(chartContainer, false)
const challengeService = useMemo(() => new ChallengeService(client), [client])
const duel: UserDuel = userChallenge.duel
diff --git a/src/components/Duel/DuelResultModal.spec.tsx b/src/components/Duel/DuelResultModal.spec.tsx
index 543839aff4da3f44d2450a32b5812902c92205ca..42447533ee09f713330965e1a46d75f9629b7244 100644
--- a/src/components/Duel/DuelResultModal.spec.tsx
+++ b/src/components/Duel/DuelResultModal.spec.tsx
@@ -1,10 +1,11 @@
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import React from 'react'
-import { act } from 'react-dom/test-utils'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { profileData } from '../../../tests/__mocks__/profileData.mock'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
import DuelResultModal from './DuelResultModal'
@@ -51,11 +52,8 @@ describe('DuelResultModal component', () => {
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should render a loss modal', async () => {
const store = mockStore({
@@ -77,10 +75,7 @@ describe('DuelResultModal component', () => {
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find('.title').text()).toBe('duel_result_modal.lost.title')
})
})
diff --git a/src/components/Duel/DuelResultModal.tsx b/src/components/Duel/DuelResultModal.tsx
index 7d83254a60e93f9c37f13e936f44806215f37bef..3295124400eefc2004957b1540929be235aa229f 100644
--- a/src/components/Duel/DuelResultModal.tsx
+++ b/src/components/Duel/DuelResultModal.tsx
@@ -1,109 +1,109 @@
-import Button from '@material-ui/core/Button'
-import Dialog from '@material-ui/core/Dialog'
-import challengeWon from 'assets/icons/visu/duelResult/challengeWon.svg'
-import defaultIcon from 'assets/icons/visu/duelResult/default.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import { UserChallenge } from 'models/challenge.model'
-import React, { useEffect, useState } from 'react'
-import { formatNumberValues, importIconById } from 'utils/utils'
-import './duelResultModal.scss'
-
-interface DuelResultModalProps {
- open: boolean
- userChallenge: UserChallenge
- win: boolean
- handleCloseClick: () => void
-}
-
-const DuelResultModal: React.FC<DuelResultModalProps> = ({
- open,
- userChallenge,
- win,
- handleCloseClick,
-}: DuelResultModalProps) => {
- const { t } = useI18n()
- const [winIcon, setWinIcon] = useState<string>(defaultIcon)
- const [lossIcon, setLossIcon] = useState<string>(defaultIcon)
- const result: string | number = formatNumberValues(
- Math.abs(userChallenge.duel.threshold - userChallenge.duel.userConsumption)
- )
-
- useEffect(() => {
- async function handleEcogestureIcon() {
- const icon = await importIconById(userChallenge.id + '-1', 'duelResult')
- if (icon) {
- setWinIcon(icon)
- } else {
- setWinIcon(defaultIcon)
- }
- const icon2 = await importIconById(userChallenge.id + '-0', 'duelResult')
- if (icon2) {
- setLossIcon(icon2)
- } else {
- setLossIcon(defaultIcon)
- }
- }
- handleEcogestureIcon()
- }, [userChallenge])
-
- return (
- <Dialog
- open={open}
- onClose={handleCloseClick}
- aria-labelledby={'accessibility-title'}
- classes={{
- root: 'modal-root',
- paper: 'modal-paper blue-border',
- }}
- >
- <div id={'accessibility-title'}>
- {t('duel_result_modal.accessibility.window_title')}
- </div>
- <div className="duel-result-modal-root ">
- <div className="imgResultContainer">
- {win && (
- <Icon className="challengeWon" icon={challengeWon} size={300} />
- )}
- <Icon
- className="imgResult"
- icon={win ? winIcon : lossIcon}
- size={180}
- />
- </div>
- <div className="text-28-normal-uppercase title">
- {win
- ? t('duel_result_modal.sucess.title')
- : t('duel_result_modal.lost.title')}
- </div>
- <div className="text-18-normal">
- {win
- ? t('duel_result_modal.sucess.message1') + result + ' €'
- : t('duel_result_modal.lost.message1') + result + ' €'}
- </div>
- <div className="text-18-normal">
- {win
- ? t('duel_result_modal.sucess.message2') + userChallenge.title
- : t('duel_result_modal.lost.message2') +
- userChallenge.title +
- '...'}
- </div>
- <Button
- aria-label={t('duel_result_modal.accessibility.button_validate')}
- className="button"
- onClick={handleCloseClick}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {win
- ? t('duel_result_modal.sucess.button_validate')
- : t('duel_result_modal.lost.button_validate')}
- </Button>
- </div>
- </Dialog>
- )
-}
-
-export default DuelResultModal
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
+import challengeWon from 'assets/icons/visu/duelResult/challengeWon.svg'
+import defaultIcon from 'assets/icons/visu/duelResult/default.svg'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import { UserChallenge } from 'models/challenge.model'
+import React, { useEffect, useState } from 'react'
+import { formatNumberValues, importIconById } from 'utils/utils'
+import './duelResultModal.scss'
+
+interface DuelResultModalProps {
+ open: boolean
+ userChallenge: UserChallenge
+ win: boolean
+ handleCloseClick: () => void
+}
+
+const DuelResultModal = ({
+ open,
+ userChallenge,
+ win,
+ handleCloseClick,
+}: DuelResultModalProps) => {
+ const { t } = useI18n()
+ const [winIcon, setWinIcon] = useState<string>(defaultIcon)
+ const [lossIcon, setLossIcon] = useState<string>(defaultIcon)
+ const result: string | number = formatNumberValues(
+ Math.abs(userChallenge.duel.threshold - userChallenge.duel.userConsumption)
+ )
+
+ useEffect(() => {
+ async function handleEcogestureIcon() {
+ const icon = await importIconById(userChallenge.id + '-1', 'duelResult')
+ if (icon) {
+ setWinIcon(icon)
+ } else {
+ setWinIcon(defaultIcon)
+ }
+ const icon2 = await importIconById(userChallenge.id + '-0', 'duelResult')
+ if (icon2) {
+ setLossIcon(icon2)
+ } else {
+ setLossIcon(defaultIcon)
+ }
+ }
+ handleEcogestureIcon()
+ }, [userChallenge])
+
+ return (
+ <Dialog
+ open={open}
+ onClose={handleCloseClick}
+ aria-labelledby={'accessibility-title'}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper blue-border',
+ }}
+ >
+ <div id={'accessibility-title'}>
+ {t('duel_result_modal.accessibility.window_title')}
+ </div>
+ <div className="duel-result-modal-root ">
+ <div className="imgResultContainer">
+ {win && (
+ <Icon className="challengeWon" icon={challengeWon} size={300} />
+ )}
+ <Icon
+ className="imgResult"
+ icon={win ? winIcon : lossIcon}
+ size={180}
+ />
+ </div>
+ <div className="text-28-normal-uppercase title">
+ {win
+ ? t('duel_result_modal.sucess.title')
+ : t('duel_result_modal.lost.title')}
+ </div>
+ <div className="text-18-normal">
+ {win
+ ? t('duel_result_modal.sucess.message1') + result + ' €'
+ : t('duel_result_modal.lost.message1') + result + ' €'}
+ </div>
+ <div className="text-18-normal">
+ {win
+ ? t('duel_result_modal.sucess.message2') + userChallenge.title
+ : t('duel_result_modal.lost.message2') +
+ userChallenge.title +
+ '...'}
+ </div>
+ <Button
+ aria-label={t('duel_result_modal.accessibility.button_validate')}
+ className="button"
+ onClick={handleCloseClick}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ {win
+ ? t('duel_result_modal.sucess.button_validate')
+ : t('duel_result_modal.lost.button_validate')}
+ </Button>
+ </div>
+ </Dialog>
+ )
+}
+
+export default DuelResultModal
diff --git a/src/components/Duel/DuelUnlocked.tsx b/src/components/Duel/DuelUnlocked.tsx
index 8128a5539b3a88afaad6e58948667c2d0c0639f2..c4b16b9e0b10dc7818ed75cbb7cdfa12a01fd4c8 100644
--- a/src/components/Duel/DuelUnlocked.tsx
+++ b/src/components/Duel/DuelUnlocked.tsx
@@ -12,17 +12,11 @@ import { useDispatch } from 'react-redux'
import ChallengeService from 'services/challenge.service'
import UsageEventService from 'services/usageEvent.service'
import { AppActionsTypes } from 'store'
-import { setChallengeConsumption } from 'store/challenge/challenge.actions'
+import { setChallengeConsumption } from 'store/challenge/challenge.slice'
import { formatNumberValues, importIconById } from 'utils/utils'
import './duelUnlocked.scss'
-interface DuelUnlockedProps {
- userChallenge: UserChallenge
-}
-
-const DuelUnlocked: React.FC<DuelUnlockedProps> = ({
- userChallenge,
-}: DuelUnlockedProps) => {
+const DuelUnlocked = ({ userChallenge }: { userChallenge: UserChallenge }) => {
const client: Client = useClient()
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
const { t } = useI18n()
@@ -50,7 +44,12 @@ const DuelUnlocked: React.FC<DuelUnlockedProps> = ({
target: userChallenge.duel.id,
context: userChallenge.id,
})
- dispatch(setChallengeConsumption(updatedChallenge, dataloads))
+ dispatch(
+ setChallengeConsumption({
+ userChallenge: updatedChallenge,
+ currentDataload: dataloads,
+ })
+ )
}, [client, dispatch, userChallenge])
useEffect(() => {
diff --git a/src/components/Duel/DuelView.tsx b/src/components/Duel/DuelView.tsx
index d96cc56ff760117c24dc14c00dbe8c9fd0640e61..b5a269f172684c9e3c6bd968026265ff6e6b911f 100644
--- a/src/components/Duel/DuelView.tsx
+++ b/src/components/Duel/DuelView.tsx
@@ -1,76 +1,76 @@
-import Content from 'components/Content/Content'
-import DuelError from 'components/Duel/DuelError'
-import DuelUnlocked from 'components/Duel/DuelUnlocked'
-import CozyBar from 'components/Header/CozyBar'
-import Header from 'components/Header/Header'
-import { UserChallengeState } from 'enum/userChallenge.enum'
-import { UserDuelState } from 'enum/userDuel.enum'
-import { UserChallenge } from 'models'
-import React, { useCallback, useState } from 'react'
-import { useSelector } from 'react-redux'
-import { useLocation, useNavigate } from 'react-router-dom'
-import { AppStore } from 'store'
-import DuelEmptyValueModal from './DuelEmptyValueModal'
-import DuelOngoing from './DuelOngoing'
-
-const DuelView: React.FC = () => {
- const [headerHeight, setHeaderHeight] = useState<number>(0)
- const { userChallengeList } = useSelector(
- (state: AppStore) => state.ecolyo.challenge
- )
- const id = new URLSearchParams(useLocation().search).get('id')
- const challengeToDisplay: UserChallenge | undefined = userChallengeList.find(
- challenge => challenge.id === id
- )
-
- const navigate = useNavigate()
- const defineHeaderHeight = useCallback((height: number) => {
- setHeaderHeight(height)
- }, [])
- const goBackToChallenge = () => {
- navigate('/challenges')
- }
- const renderDuel = (challenge: UserChallenge) => {
- switch (challenge.duel.state) {
- case UserDuelState.UNLOCKED:
- return <DuelUnlocked userChallenge={challenge} />
- case UserDuelState.ONGOING:
- return <DuelOngoing userChallenge={challenge} />
- case UserDuelState.DONE:
- return <DuelOngoing userChallenge={challenge} isFinished={true} />
- case UserDuelState.NO_REF_PERIOD_VALID:
- return (
- <DuelEmptyValueModal
- open={true}
- handleCloseClick={goBackToChallenge}
- />
- )
- default:
- return <DuelError />
- }
- }
-
- return (
- <>
- <CozyBar titleKey={'common.title_duel'} displayBackArrow={true} />
- <Header
- setHeaderHeight={defineHeaderHeight}
- desktopTitleKey={'common.title_duel'}
- displayBackArrow={true}
- />
- <Content height={headerHeight}>
- <div>
- {challengeToDisplay &&
- (challengeToDisplay.state === UserChallengeState.DUEL ||
- challengeToDisplay.state === UserChallengeState.DONE) ? (
- renderDuel(challengeToDisplay)
- ) : (
- <DuelError />
- )}
- </div>
- </Content>
- </>
- )
-}
-
-export default DuelView
+import Content from 'components/Content/Content'
+import DuelError from 'components/Duel/DuelError'
+import DuelUnlocked from 'components/Duel/DuelUnlocked'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import { UserChallengeState } from 'enum/userChallenge.enum'
+import { UserDuelState } from 'enum/userDuel.enum'
+import { UserChallenge } from 'models'
+import React, { useCallback, useState } from 'react'
+import { useSelector } from 'react-redux'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { AppStore } from 'store'
+import DuelEmptyValueModal from './DuelEmptyValueModal'
+import DuelOngoing from './DuelOngoing'
+
+const DuelView = () => {
+ const [headerHeight, setHeaderHeight] = useState<number>(0)
+ const { userChallengeList } = useSelector(
+ (state: AppStore) => state.ecolyo.challenge
+ )
+ const id = new URLSearchParams(useLocation().search).get('id')
+ const challengeToDisplay: UserChallenge | undefined = userChallengeList.find(
+ challenge => challenge.id === id
+ )
+
+ const navigate = useNavigate()
+ const defineHeaderHeight = useCallback((height: number) => {
+ setHeaderHeight(height)
+ }, [])
+ const goBackToChallenge = () => {
+ navigate('/challenges')
+ }
+ const renderDuel = (challenge: UserChallenge) => {
+ switch (challenge.duel.state) {
+ case UserDuelState.UNLOCKED:
+ return <DuelUnlocked userChallenge={challenge} />
+ case UserDuelState.ONGOING:
+ return <DuelOngoing userChallenge={challenge} />
+ case UserDuelState.DONE:
+ return <DuelOngoing userChallenge={challenge} isFinished={true} />
+ case UserDuelState.NO_REF_PERIOD_VALID:
+ return (
+ <DuelEmptyValueModal
+ open={true}
+ handleCloseClick={goBackToChallenge}
+ />
+ )
+ default:
+ return <DuelError />
+ }
+ }
+
+ return (
+ <>
+ <CozyBar titleKey={'common.title_duel'} displayBackArrow={true} />
+ <Header
+ setHeaderHeight={defineHeaderHeight}
+ desktopTitleKey={'common.title_duel'}
+ displayBackArrow={true}
+ />
+ <Content height={headerHeight}>
+ <div>
+ {challengeToDisplay &&
+ (challengeToDisplay.state === UserChallengeState.DUEL ||
+ challengeToDisplay.state === UserChallengeState.DONE) ? (
+ renderDuel(challengeToDisplay)
+ ) : (
+ <DuelError />
+ )}
+ </div>
+ </Content>
+ </>
+ )
+}
+
+export default DuelView
diff --git a/src/components/Duel/__snapshots__/DuelResultModal.spec.tsx.snap b/src/components/Duel/__snapshots__/DuelResultModal.spec.tsx.snap
index 7ed7b2d545ef97f0851b6ecb27fe786bcc7f96a1..bbffacde1a57ab55f3afd6bc6b30be2ffc60281d 100644
--- a/src/components/Duel/__snapshots__/DuelResultModal.spec.tsx.snap
+++ b/src/components/Duel/__snapshots__/DuelResultModal.spec.tsx.snap
@@ -1,3 +1,1062 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`DuelResultModal component should render correctly 1`] = `ReactWrapper {}`;
+exports[`DuelResultModal component should render correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <DuelResultModal
+ handleCloseClick={[MockFunction]}
+ open={true}
+ userChallenge={
+ Object {
+ "action": Object {
+ "ecogesture": null,
+ "startDate": null,
+ "state": 0,
+ },
+ "description": "Description challenge 2",
+ "duel": Object {
+ "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
+ "duration": "P30D",
+ "fluidTypes": Array [],
+ "id": "DUEL001",
+ "startDate": null,
+ "state": 0,
+ "threshold": 0,
+ "title": "Title DUEL001",
+ "userConsumption": 0,
+ },
+ "endingDate": null,
+ "exploration": Object {
+ "complementary_description": "Refaire un tour dans son profil si déjà fait",
+ "date": null,
+ "description": "Avoir complété son profil",
+ "ecogesture_id": "",
+ "fluid_condition": Array [],
+ "id": "EXPLORATION001",
+ "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
+ "progress": 0,
+ "state": 0,
+ "target": 1,
+ "type": 1,
+ },
+ "id": "CHALLENGE0002",
+ "progress": Object {
+ "actionProgress": 0,
+ "explorationProgress": 0,
+ "quizProgress": 0,
+ },
+ "quiz": Object {
+ "customQuestion": Object {
+ "interval": 20,
+ "period": Object {},
+ "questionLabel": "Custom1",
+ "result": 0,
+ "singleFluid": false,
+ "timeStep": 20,
+ "type": 0,
+ },
+ "id": "QUIZ001",
+ "questions": Array [
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "86 km",
+ "isTrue": true,
+ },
+ Object {
+ "answerLabel": "78 km",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "56 km",
+ "isTrue": false,
+ },
+ ],
+ "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
+ "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
+ "result": 0,
+ "source": "string",
+ },
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "1 point d’eau public pour 800 habitants.",
+ "isTrue": true,
+ },
+ Object {
+ "answerLabel": "1 point d’eau public pour 400 habitants.",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "1 point d’eau public pour 200 habitants.",
+ "isTrue": false,
+ },
+ ],
+ "explanation": "string",
+ "questionLabel": "En 1800 Ã Lyon, combien de points d'eau y avait-il par habitants ?",
+ "result": 0,
+ "source": "string",
+ },
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "François Mitterrand",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "Napoléon Ier",
+ "isTrue": true,
+ },
+ Object {
+ "answerLabel": "Napoléon III",
+ "isTrue": false,
+ },
+ ],
+ "explanation": "string",
+ "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
+ "result": 0,
+ "source": "string",
+ },
+ Object {
+ "answers": Array [
+ Object {
+ "answerLabel": "string",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "string",
+ "isTrue": false,
+ },
+ Object {
+ "answerLabel": "Aristide Dumont",
+ "isTrue": true,
+ },
+ ],
+ "explanation": "string",
+ "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
+ "result": 0,
+ "source": "string",
+ },
+ ],
+ "result": 0,
+ "startDate": null,
+ "state": 0,
+ },
+ "startDate": null,
+ "state": 4,
+ "success": 1,
+ "target": 15,
+ "title": "Challenge 2",
+ }
+ }
+ win={true}
+ >
+ <WithStyles(ForwardRef(Dialog))
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "paper": "modal-paper blue-border",
+ "root": "modal-root",
+ }
+ }
+ onClose={[MockFunction]}
+ open={true}
+ >
+ <ForwardRef(Dialog)
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "container": "MuiDialog-container",
+ "paper": "MuiDialog-paper modal-paper blue-border",
+ "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 {
+ "activatedOpacity": 0.12,
+ "active": "rgba(0, 0, 0, 0.54)",
+ "disabled": "rgba(0, 0, 0, 0.26)",
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
+ "disabledOpacity": 0.38,
+ "focus": "rgba(0, 0, 0, 0.12)",
+ "focusOpacity": 0.12,
+ "hover": "rgba(0, 0, 0, 0.04)",
+ "hoverOpacity": 0.04,
+ "selected": "rgba(0, 0, 0, 0.08)",
+ "selectedOpacity": 0.08,
+ },
+ "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}
+ 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 blue-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
+ >
+ <div
+ id="accessibility-title"
+ >
+ duel_result_modal.accessibility.window_title
+ </div>
+ <div
+ class="duel-result-modal-root "
+ >
+ <div
+ class="imgResultContainer"
+ >
+ <svg
+ class="challengeWon styles__icon___23x3R"
+ height="300"
+ width="300"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <svg
+ class="imgResult styles__icon___23x3R"
+ height="180"
+ width="180"
+ >
+ <use
+ xlink:href="#"
+ />
+ </svg>
+ </div>
+ <div
+ class="text-28-normal-uppercase title"
+ >
+ duel_result_modal.sucess.title
+ </div>
+ <div
+ class="text-18-normal"
+ >
+ duel_result_modal.sucess.message1function () {
+ return fn.apply(this, arguments);
+ } €
+ </div>
+ <div
+ class="text-18-normal"
+ >
+ duel_result_modal.sucess.message2Challenge 2
+ </div>
+ <button
+ aria-label="duel_result_modal.accessibility.button_validate"
+ class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label text-16-normal"
+ >
+ duel_result_modal.sucess.button_validate
+ </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))>
+ <Unstable_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"
+ onMouseDown={[Function]}
+ onMouseUp={[Function]}
+ role="none presentation"
+ style={
+ Object {
+ "opacity": 1,
+ "visibility": undefined,
+ }
+ }
+ tabIndex="-1"
+ >
+ <WithStyles(ForwardRef(Paper))
+ aria-labelledby="accessibility-title"
+ className="MuiDialog-paper modal-paper blue-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+ elevation={24}
+ role="dialog"
+ >
+ <ForwardRef(Paper)
+ aria-labelledby="accessibility-title"
+ className="MuiDialog-paper modal-paper blue-border 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 blue-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
+ >
+ <div
+ id="accessibility-title"
+ >
+ duel_result_modal.accessibility.window_title
+ </div>
+ <div
+ className="duel-result-modal-root "
+ >
+ <div
+ className="imgResultContainer"
+ >
+ <Icon
+ className="challengeWon"
+ icon="test-file-stub"
+ size={300}
+ spin={false}
+ >
+ <Component
+ className="challengeWon styles__icon___23x3R"
+ height={300}
+ style={Object {}}
+ width={300}
+ >
+ <svg
+ className="challengeWon styles__icon___23x3R"
+ height={300}
+ style={Object {}}
+ width={300}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ <Icon
+ className="imgResult"
+ icon=""
+ size={180}
+ spin={false}
+ >
+ <Component
+ className="imgResult styles__icon___23x3R"
+ height={180}
+ style={Object {}}
+ width={180}
+ >
+ <svg
+ className="imgResult styles__icon___23x3R"
+ height={180}
+ style={Object {}}
+ width={180}
+ >
+ <use
+ xlinkHref="#"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </div>
+ <div
+ className="text-28-normal-uppercase title"
+ >
+ duel_result_modal.sucess.title
+ </div>
+ <div
+ className="text-18-normal"
+ >
+ duel_result_modal.sucess.message1function () {
+ return fn.apply(this, arguments);
+ } €
+ </div>
+ <div
+ className="text-18-normal"
+ >
+ duel_result_modal.sucess.message2Challenge 2
+ </div>
+ <WithStyles(ForwardRef(Button))
+ aria-label="duel_result_modal.accessibility.button_validate"
+ className="button"
+ classes={
+ Object {
+ "label": "text-16-normal",
+ "root": "btn-secondary-negative",
+ }
+ }
+ onClick={[MockFunction]}
+ >
+ <ForwardRef(Button)
+ aria-label="duel_result_modal.accessibility.button_validate"
+ className="button"
+ 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-16-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="duel_result_modal.accessibility.button_validate"
+ className="MuiButton-root btn-secondary-negative MuiButton-text button"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[MockFunction]}
+ type="button"
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="duel_result_modal.accessibility.button_validate"
+ className="MuiButton-root btn-secondary-negative MuiButton-text button"
+ 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="duel_result_modal.accessibility.button_validate"
+ className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text button"
+ 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-16-normal"
+ >
+ duel_result_modal.sucess.button_validate
+ </span>
+ <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)>
+ </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}
+ />
+ </Unstable_TrapFocus>
+ </div>
+ </Portal>
+ </ForwardRef(Portal)>
+ </ForwardRef(Modal)>
+ </ForwardRef(Dialog)>
+ </WithStyles(ForwardRef(Dialog))>
+ </DuelResultModal>
+</Provider>
+`;
diff --git a/src/components/Duel/__snapshots__/lastDuelModal.spec.tsx.snap b/src/components/Duel/__snapshots__/lastDuelModal.spec.tsx.snap
index 2b0bc89e8b41e20ba968ff23738915c21538f2ae..14af31e26777e73662c46c65845fac26cffe9ac2 100644
--- a/src/components/Duel/__snapshots__/lastDuelModal.spec.tsx.snap
+++ b/src/components/Duel/__snapshots__/lastDuelModal.spec.tsx.snap
@@ -1,3 +1,781 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`lastDuelModal component should render correctly 1`] = `ReactWrapper {}`;
+exports[`lastDuelModal component should render correctly 1`] = `
+<LastDuelModal
+ handleCloseClick={[MockFunction]}
+ open={true}
+>
+ <WithStyles(ForwardRef(Dialog))
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "paper": "modal-paper blue-light-border",
+ "root": "modal-root",
+ }
+ }
+ onClose={[MockFunction]}
+ open={true}
+ >
+ <ForwardRef(Dialog)
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "container": "MuiDialog-container",
+ "paper": "MuiDialog-paper modal-paper blue-light-border",
+ "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 {
+ "activatedOpacity": 0.12,
+ "active": "rgba(0, 0, 0, 0.54)",
+ "disabled": "rgba(0, 0, 0, 0.26)",
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
+ "disabledOpacity": 0.38,
+ "focus": "rgba(0, 0, 0, 0.12)",
+ "focusOpacity": 0.12,
+ "hover": "rgba(0, 0, 0, 0.04)",
+ "hoverOpacity": 0.04,
+ "selected": "rgba(0, 0, 0, 0.08)",
+ "selectedOpacity": 0.08,
+ },
+ "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}
+ 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 blue-light-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
+ >
+ <div
+ id="accessibility-title"
+ >
+ last_duel_modal.title
+ </div>
+ <div
+ class="duel-last-modal-root"
+ >
+ <div>
+ <svg
+ aria-hidden="true"
+ class="closeIcon styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ <svg
+ aria-hidden="true"
+ class="icon styles__icon___23x3R"
+ height="48"
+ width="48"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="text-28-bold title"
+ >
+ last_duel_modal.title
+ </div>
+ <div
+ class="text-22-bold subtitle"
+ >
+ last_duel_modal.subtitle
+ </div>
+ <div
+ class="text-18-normal content"
+ >
+ last_duel_modal.message1
+ </div>
+ <div
+ class="text-18-normal content"
+ >
+ last_duel_modal.message2
+ </div>
+ </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))>
+ <Unstable_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"
+ onMouseDown={[Function]}
+ onMouseUp={[Function]}
+ role="none presentation"
+ style={
+ Object {
+ "opacity": 1,
+ "visibility": undefined,
+ }
+ }
+ tabIndex="-1"
+ >
+ <WithStyles(ForwardRef(Paper))
+ aria-labelledby="accessibility-title"
+ className="MuiDialog-paper modal-paper blue-light-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+ elevation={24}
+ role="dialog"
+ >
+ <ForwardRef(Paper)
+ aria-labelledby="accessibility-title"
+ className="MuiDialog-paper modal-paper blue-light-border 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 blue-light-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
+ >
+ <div
+ id="accessibility-title"
+ >
+ last_duel_modal.title
+ </div>
+ <div
+ className="duel-last-modal-root"
+ >
+ <div
+ onClick={[MockFunction]}
+ >
+ <StyledIcon
+ className="closeIcon"
+ icon="test-file-stub"
+ size={16}
+ >
+ <Icon
+ aria-hidden={true}
+ className="closeIcon"
+ icon="test-file-stub"
+ size={16}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="closeIcon styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <svg
+ aria-hidden={true}
+ className="closeIcon styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ </div>
+ <StyledIcon
+ className="icon"
+ icon="test-file-stub"
+ size={48}
+ >
+ <Icon
+ aria-hidden={true}
+ className="icon"
+ icon="test-file-stub"
+ size={48}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="icon styles__icon___23x3R"
+ height={48}
+ style={Object {}}
+ width={48}
+ >
+ <svg
+ aria-hidden={true}
+ className="icon styles__icon___23x3R"
+ height={48}
+ style={Object {}}
+ width={48}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <div
+ className="text-28-bold title"
+ >
+ last_duel_modal.title
+ </div>
+ <div
+ className="text-22-bold subtitle"
+ >
+ last_duel_modal.subtitle
+ </div>
+ <div
+ className="text-18-normal content"
+ >
+ last_duel_modal.message1
+ </div>
+ <div
+ className="text-18-normal content"
+ >
+ last_duel_modal.message2
+ </div>
+ </div>
+ </div>
+ </ForwardRef(Paper)>
+ </WithStyles(ForwardRef(Paper))>
+ </div>
+ </Transition>
+ </ForwardRef(Fade)>
+ <div
+ data-test="sentinelEnd"
+ tabIndex={0}
+ />
+ </Unstable_TrapFocus>
+ </div>
+ </Portal>
+ </ForwardRef(Portal)>
+ </ForwardRef(Modal)>
+ </ForwardRef(Dialog)>
+ </WithStyles(ForwardRef(Dialog))>
+</LastDuelModal>
+`;
diff --git a/src/components/Duel/lastDuelModal.spec.tsx b/src/components/Duel/lastDuelModal.spec.tsx
index 4001dd478a7dceb1714d6eefdebf93e65fc42d94..f0b613baf54bda9ad27aeb6d248071f35b1cf210 100644
--- a/src/components/Duel/lastDuelModal.spec.tsx
+++ b/src/components/Duel/lastDuelModal.spec.tsx
@@ -1,6 +1,7 @@
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import React from 'react'
-import { act } from 'react-dom/test-utils'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import LastDuelModal from './lastDuelModal'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -18,10 +19,7 @@ describe('lastDuelModal component', () => {
const wrapper = mount(
<LastDuelModal open={true} handleCloseClick={jest.fn()} />
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
})
diff --git a/src/components/Duel/lastDuelModal.tsx b/src/components/Duel/lastDuelModal.tsx
index 00d2985a6f20387d509ce152555f2685e4e207cf..ad57fd6cb853f422e67146c4b7bbbf787610af81 100644
--- a/src/components/Duel/lastDuelModal.tsx
+++ b/src/components/Duel/lastDuelModal.tsx
@@ -1,51 +1,48 @@
-import Dialog from '@material-ui/core/Dialog'
-import CloseIcon from 'assets/icons/ico/close.svg'
-import star from 'assets/icons/visu/duel/star.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import React from 'react'
-import './lastDuelModal.scss'
-
-interface LastDuelModalProps {
- open: boolean
- handleCloseClick: () => void
-}
-
-const LastDuelModal: React.FC<LastDuelModalProps> = ({
- open,
- handleCloseClick,
-}: LastDuelModalProps) => {
- const { t } = useI18n()
-
- return (
- <Dialog
- open={open}
- onClose={handleCloseClick}
- aria-labelledby={'accessibility-title'}
- classes={{
- root: 'modal-root',
- paper: 'modal-paper blue-light-border',
- }}
- >
- <div id={'accessibility-title'}>{t('last_duel_modal.title')}</div>
- <div className="duel-last-modal-root">
- <div onClick={handleCloseClick}>
- <StyledIcon className="closeIcon" icon={CloseIcon} size={16} />
- </div>
- <StyledIcon className="icon" icon={star} size={48} />
- <div className="text-28-bold title">{t('last_duel_modal.title')}</div>
- <div className="text-22-bold subtitle">
- {t('last_duel_modal.subtitle')}
- </div>
- <div className="text-18-normal content">
- {t('last_duel_modal.message1')}
- </div>
- <div className="text-18-normal content">
- {t('last_duel_modal.message2')}
- </div>
- </div>
- </Dialog>
- )
-}
-
-export default LastDuelModal
+import Dialog from '@material-ui/core/Dialog'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import star from 'assets/icons/visu/duel/star.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React from 'react'
+import './lastDuelModal.scss'
+
+interface LastDuelModalProps {
+ open: boolean
+ handleCloseClick: () => void
+}
+
+const LastDuelModal = ({ open, handleCloseClick }: LastDuelModalProps) => {
+ const { t } = useI18n()
+
+ return (
+ <Dialog
+ open={open}
+ onClose={handleCloseClick}
+ aria-labelledby={'accessibility-title'}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper blue-light-border',
+ }}
+ >
+ <div id={'accessibility-title'}>{t('last_duel_modal.title')}</div>
+ <div className="duel-last-modal-root">
+ <div onClick={handleCloseClick}>
+ <StyledIcon className="closeIcon" icon={CloseIcon} size={16} />
+ </div>
+ <StyledIcon className="icon" icon={star} size={48} />
+ <div className="text-28-bold title">{t('last_duel_modal.title')}</div>
+ <div className="text-22-bold subtitle">
+ {t('last_duel_modal.subtitle')}
+ </div>
+ <div className="text-18-normal content">
+ {t('last_duel_modal.message1')}
+ </div>
+ <div className="text-18-normal content">
+ {t('last_duel_modal.message2')}
+ </div>
+ </div>
+ </Dialog>
+ )
+}
+
+export default LastDuelModal
diff --git a/src/components/Ecogesture/EcogestureCard.tsx b/src/components/Ecogesture/EcogestureCard.tsx
index 650846699ab4e18a6da6eafedfc7b5a8ad945dca..cf8a69b2da5517748e8a22e7188453028965920e 100644
--- a/src/components/Ecogesture/EcogestureCard.tsx
+++ b/src/components/Ecogesture/EcogestureCard.tsx
@@ -6,15 +6,15 @@ import { Ecogesture } from 'models'
import React, { useEffect, useState } from 'react'
import { Link as RouterLink } from 'react-router-dom'
import { importIconById } from 'utils/utils'
-import './ecogestureCard.scss'
import EfficiencyRating from './EfficiencyRating'
+import './ecogestureCard.scss'
interface EcogestureCardProps {
ecogesture: Ecogesture
selectionCompleted?: boolean
}
-const EcogestureCard: React.FC<EcogestureCardProps> = ({
+const EcogestureCard = ({
ecogesture,
selectionCompleted = false,
}: EcogestureCardProps) => {
@@ -43,18 +43,12 @@ const EcogestureCard: React.FC<EcogestureCardProps> = ({
className="ecogesture-list-item"
>
<StyledEcogestureCard>
- <div className="ec">
- <div className={`ec-content `}>
- <div className="ec-content-icon">
- <StyledIcon className="Icon" icon={ecogestureIcon} size={50} />
- </div>
- <div className="ec-content-short-name text-15-bold">
- {ecogesture.shortName}
- </div>
- <div className="ec-content-efficiency">
- <EfficiencyRating result={Math.round(ecogesture.efficiency)} />
- </div>
+ <div className="ec-content">
+ <StyledIcon className="Icon" icon={ecogestureIcon} size={50} />
+ <div className="ec-content-short-name text-15-bold">
+ {ecogesture.shortName}
</div>
+ <EfficiencyRating result={Math.round(ecogesture.efficiency)} />
</div>
</StyledEcogestureCard>
</Link>
diff --git a/src/components/Ecogesture/EcogestureEmptyList.tsx b/src/components/Ecogesture/EcogestureEmptyList.tsx
index 2aad11c27ec0d0b558ecac1c6782d24d4a216a71..1da8419b28ab841651d1716c86ebe3df48f6c3aa 100644
--- a/src/components/Ecogesture/EcogestureEmptyList.tsx
+++ b/src/components/Ecogesture/EcogestureEmptyList.tsx
@@ -1,85 +1,85 @@
-import Button from '@material-ui/core/Button'
-import doingIcon from 'assets/icons/ico/doing-enabled.svg'
-import objectiveIcon from 'assets/icons/ico/objective-enabled.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import React from 'react'
-import { useNavigate } from 'react-router-dom'
-import './ecogestureEmptyList.scss'
-
-interface EcogestureEmptyListProps {
- setTab: React.Dispatch<React.SetStateAction<number>>
- isObjective: boolean
- isSelectionDone: boolean
- handleReinitClick: () => void
-}
-const EcogestureEmptyList: React.FC<EcogestureEmptyListProps> = ({
- setTab,
- isObjective,
- isSelectionDone,
- handleReinitClick,
-}: EcogestureEmptyListProps) => {
- const { t } = useI18n()
- const navigate = useNavigate()
- const objOrDoing = isObjective ? 'obj' : 'doing'
- const isDone = isSelectionDone ? '_done' : ''
- return (
- <div className="ec-empty-container">
- <div className="ec-empty-content">
- <StyledIcon
- className="icon-big"
- icon={isObjective ? objectiveIcon : doingIcon}
- size={150}
- />
- <div className="text-16-normal text">
- {t(`ecogesture.emptyList.${objOrDoing}1${isDone}`)}
- </div>
- <div className="text-16-normal text">
- {t(`ecogesture.emptyList.${objOrDoing}2${isDone}`)}
- </div>
- <div className="btn-container">
- <Button
- aria-label={t('ecogesture.emptyList.btn1')}
- onClick={() => setTab(2)}
- classes={{
- root: 'btn-secondary-negative btn1',
- label: 'text-16-bold',
- }}
- >
- {t('ecogesture.emptyList.btn1')}
- </Button>
-
- {isSelectionDone && (
- <Button
- aria-label={t('ecogesture.reinit')}
- onClick={handleReinitClick}
- classes={{
- root: 'reinit-button btn-profile-next rounded',
- label: 'text-16-bold',
- }}
- >
- {t('ecogesture.reinit')}
- </Button>
- )}
-
- {!isSelectionDone && (
- <Button
- aria-label={t('ecogesture.emptyList.btn2')}
- onClick={() => {
- navigate('/ecogesture-form')
- }}
- classes={{
- root: 'btn-highlight btn2',
- label: 'text-16-bold',
- }}
- >
- {t('ecogesture.emptyList.btn2')}
- </Button>
- )}
- </div>
- </div>
- </div>
- )
-}
-
-export default EcogestureEmptyList
+import Button from '@material-ui/core/Button'
+import doingIcon from 'assets/icons/ico/doing-enabled.svg'
+import objectiveIcon from 'assets/icons/ico/objective-enabled.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React from 'react'
+import { useNavigate } from 'react-router-dom'
+import './ecogestureEmptyList.scss'
+
+interface EcogestureEmptyListProps {
+ setTab: React.Dispatch<React.SetStateAction<number>>
+ isObjective: boolean
+ isSelectionDone: boolean
+ handleReinitClick: () => void
+}
+const EcogestureEmptyList = ({
+ setTab,
+ isObjective,
+ isSelectionDone,
+ handleReinitClick,
+}: EcogestureEmptyListProps) => {
+ const { t } = useI18n()
+ const navigate = useNavigate()
+ const objOrDoing = isObjective ? 'obj' : 'doing'
+ const isDone = isSelectionDone ? '_done' : ''
+ return (
+ <div className="ec-empty-container">
+ <div className="ec-empty-content">
+ <StyledIcon
+ className="icon-big"
+ icon={isObjective ? objectiveIcon : doingIcon}
+ size={150}
+ />
+ <div className="text-16-normal text">
+ {t(`ecogesture.emptyList.${objOrDoing}1${isDone}`)}
+ </div>
+ <div className="text-16-normal text">
+ {t(`ecogesture.emptyList.${objOrDoing}2${isDone}`)}
+ </div>
+ <div className="btn-container">
+ <Button
+ aria-label={t('ecogesture.emptyList.btn1')}
+ onClick={() => setTab(2)}
+ classes={{
+ root: 'btn-secondary-negative btn1',
+ label: 'text-16-bold',
+ }}
+ >
+ {t('ecogesture.emptyList.btn1')}
+ </Button>
+
+ {isSelectionDone && (
+ <Button
+ aria-label={t('ecogesture.reinit')}
+ onClick={handleReinitClick}
+ classes={{
+ root: 'reinit-button btn-profile-next rounded',
+ label: 'text-16-bold',
+ }}
+ >
+ {t('ecogesture.reinit')}
+ </Button>
+ )}
+
+ {!isSelectionDone && (
+ <Button
+ aria-label={t('ecogesture.emptyList.btn2')}
+ onClick={() => {
+ navigate('/ecogesture-form')
+ }}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-16-bold',
+ }}
+ >
+ {t('ecogesture.emptyList.btn2')}
+ </Button>
+ )}
+ </div>
+ </div>
+ </div>
+ )
+}
+
+export default EcogestureEmptyList
diff --git a/src/components/Ecogesture/EcogestureInitModal.tsx b/src/components/Ecogesture/EcogestureInitModal.tsx
index 38c4ab1cf0f93e5e1070d742421559f626ed8851..e20e0a60e9030e4e5365c6c7c2b1e302421560bf 100644
--- a/src/components/Ecogesture/EcogestureInitModal.tsx
+++ b/src/components/Ecogesture/EcogestureInitModal.tsx
@@ -10,7 +10,7 @@ interface EcogestureInitModalProps {
handleCloseClick: () => void
handleLaunchForm: () => void
}
-const EcogestureInitModal: React.FC<EcogestureInitModalProps> = ({
+const EcogestureInitModal = ({
open,
handleCloseClick,
handleLaunchForm,
diff --git a/src/components/Ecogesture/EcogestureList.tsx b/src/components/Ecogesture/EcogestureList.tsx
index 93414138c8a1dab9e9f54198721afcc67fbde1df..1d54a0d67b74f6f750fcad9c8cdcb81af3d38dcf 100644
--- a/src/components/Ecogesture/EcogestureList.tsx
+++ b/src/components/Ecogesture/EcogestureList.tsx
@@ -19,7 +19,7 @@ interface EcogestureListProps {
handleReinitClick?: () => void
}
-const EcogestureList: React.FC<EcogestureListProps> = ({
+const EcogestureList = ({
list,
displaySelection,
selectionTotal,
diff --git a/src/components/Ecogesture/EcogestureModal.spec.tsx b/src/components/Ecogesture/EcogestureModal.spec.tsx
index f05e4a50e5fdff1deb0ab978d8943f962b0a61f4..d54252aaeda2ac388973358e010a749b9777e3d6 100644
--- a/src/components/Ecogesture/EcogestureModal.spec.tsx
+++ b/src/components/Ecogesture/EcogestureModal.spec.tsx
@@ -1,12 +1,12 @@
import EcogestureModal from 'components/Ecogesture/EcogestureModal'
import { mount } from 'enzyme'
import React from 'react'
-import { act } from 'react-dom/test-utils'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock'
import { mockedEcogesturesData } from '../../../tests/__mocks__/ecogesturesData.mock'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -47,10 +47,7 @@ describe('EcogestureModal component', () => {
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find('.em-title').text()).toEqual(
mockedEcogesturesData[0].shortName
)
diff --git a/src/components/Ecogesture/EcogestureModal.tsx b/src/components/Ecogesture/EcogestureModal.tsx
index b5e5a3216623db05f9f39ebe044a988e7fba1919..64f363d9a26ab7bbc6e36a2c2b63aab8b431dfd0 100644
--- a/src/components/Ecogesture/EcogestureModal.tsx
+++ b/src/components/Ecogesture/EcogestureModal.tsx
@@ -14,8 +14,8 @@ import { useSelector } from 'react-redux'
import { AppStore } from 'store'
import { getPicto } from 'utils/picto'
import { importIconById } from 'utils/utils'
-import './ecogestureModal.scss'
import EfficiencyRating from './EfficiencyRating'
+import './ecogestureModal.scss'
interface EcogestureModalProps {
open: boolean
@@ -25,7 +25,7 @@ interface EcogestureModalProps {
selectEcogesture?: () => void
}
-const EcogestureModal: React.FC<EcogestureModalProps> = ({
+const EcogestureModal = ({
open,
ecogesture,
isAction,
diff --git a/src/components/Ecogesture/EcogestureReinitModal.tsx b/src/components/Ecogesture/EcogestureReinitModal.tsx
index 15d9da6e9de373e4106bd2a16985373407851ab9..25f3ea63ebfc1ea31f7a2600331536c168836e60 100644
--- a/src/components/Ecogesture/EcogestureReinitModal.tsx
+++ b/src/components/Ecogesture/EcogestureReinitModal.tsx
@@ -11,7 +11,7 @@ interface EcogestureReinitModalProps {
handleCloseClick: () => void
handleLaunchReinit: () => void
}
-const EcogestureReinitModal: React.FC<EcogestureReinitModalProps> = ({
+const EcogestureReinitModal = ({
open,
handleCloseClick,
handleLaunchReinit,
diff --git a/src/components/Ecogesture/EcogestureView.tsx b/src/components/Ecogesture/EcogestureView.tsx
index 45179a9baba4bb8093c0e25337bbf2d9db20bdb7..afc1e1fe9bddcb1ac9fa0b80273b70bb54950668 100644
--- a/src/components/Ecogesture/EcogestureView.tsx
+++ b/src/components/Ecogesture/EcogestureView.tsx
@@ -1,329 +1,324 @@
-import { Tab, Tabs } from '@material-ui/core'
-import classNames from 'classnames'
-import Content from 'components/Content/Content'
-import EcogestureList from 'components/Ecogesture/EcogestureList'
-import CozyBar from 'components/Header/CozyBar'
-import Header from 'components/Header/Header'
-import Loader from 'components/Loader/Loader'
-import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { EcogestureTab } from 'enum/ecogesture.enum'
-import { Ecogesture } from 'models'
-import React, { Dispatch, useCallback, useEffect, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { useLocation, useNavigate } from 'react-router-dom'
-import EcogestureService from 'services/ecogesture.service'
-import { AppActionsTypes, AppStore } from 'store'
-import { updateProfile } from 'store/profile/profile.actions'
-import EcogestureEmptyList from './EcogestureEmptyList'
-import EcogestureInitModal from './EcogestureInitModal'
-import EcogestureReinitModal from './EcogestureReinitModal'
-import './ecogestureView.scss'
-
-interface TabPanelProps {
- children?: React.ReactNode
- tab: EcogestureTab
- value: number
-}
-const TabPanel: React.FC<TabPanelProps> = ({
- children,
- tab,
- value,
-}: TabPanelProps) => {
- return (
- <div
- role="tabpanel"
- hidden={value !== tab}
- id={`simple-tabpanel-${tab}`}
- aria-labelledby={`simple-tab-${tab}`}
- >
- {children}
- </div>
- )
-}
-
-const EcogestureView: React.FC = () => {
- const [headerHeight, setHeaderHeight] = useState<number>(0)
- const defineHeaderHeight = (height: number) => {
- setHeaderHeight(height)
- }
- const { t } = useI18n()
- const client = useClient()
- const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
- const tab = new URLSearchParams(useLocation().search).get('tab')
-
- const { profile, profileEcogesture, profileType } = useSelector(
- (state: AppStore) => state.ecolyo
- )
-
- const [tabValue, setTabValue] = useState<EcogestureTab>(
- tab ? parseInt(tab) : EcogestureTab.OBJECTIVE
- )
- const navigate = useNavigate()
- const [isLoading, setIsLoading] = useState<boolean>(true)
- const [allEcogestureList, setAllEcogestureList] = useState<Ecogesture[]>([])
- const [doingEcogestureList, setDoingEcogestureList] = useState<Ecogesture[]>(
- []
- )
- const [objectiveEcogestureList, setObjectiveEcogestureList] = useState<
- Ecogesture[]
- >([])
- const [totalViewed, setTotalViewed] = useState<number>(0)
- const [totalAvailable, setTotalAvailable] = useState<number>(0)
- const [openEcogestureInitModal, setOpenEcogestureInitModal] =
- useState<boolean>(!profile.haveSeenEcogestureModal)
- const [openEcogestureReinitModal, setOpenEcogestureReinitModal] =
- useState<boolean>(false)
-
- const handleReinitClick = useCallback(() => {
- setOpenEcogestureReinitModal(true)
- }, [])
-
- const handleLaunchForm = useCallback(async () => {
- dispatch(updateProfile({ haveSeenEcogestureModal: true }))
- setOpenEcogestureInitModal(false)
- navigate('/ecogesture-form?modal=false')
- }, [dispatch, navigate])
-
- const handleCloseEcogestureInitModal = useCallback(async () => {
- dispatch(updateProfile({ haveSeenEcogestureModal: true }))
- setOpenEcogestureInitModal(false)
- }, [dispatch])
-
- const handleLaunchReinit = useCallback(async () => {
- setOpenEcogestureReinitModal(false)
- setIsLoading(true)
- const ecogestureService = new EcogestureService(client)
- const reset = await ecogestureService.reinitAllEcogestures()
- if (reset) {
- setOpenEcogestureReinitModal(false)
- setIsLoading(false)
- navigate('/ecogesture-form?modal=true')
- }
- }, [client, navigate])
-
- const handleCloseEcogestureReinitModal = useCallback(() => {
- setOpenEcogestureReinitModal(false)
- }, [])
-
- const handleChange = useCallback(
- (event: React.ChangeEvent<object>, newValue: number) => {
- event.preventDefault()
- console.log(event)
- const params = new URLSearchParams()
- params.append('tab', newValue.toString())
- navigate({ search: params.toString() })
- setTabValue(newValue)
- },
- [navigate]
- )
-
- const tabProps = useCallback((index: number) => {
- return {
- id: `simple-tab-${index}`,
- 'aria-controls': `simple-tabpanel-${index}`,
- }
- }, [])
-
- const getTabLabel = useCallback(
- (tab: EcogestureTab) => {
- const tabCounts = {
- [EcogestureTab.OBJECTIVE]: objectiveEcogestureList.length,
- [EcogestureTab.DOING]: doingEcogestureList.length,
- [EcogestureTab.ALL]: allEcogestureList.length,
- }
-
- return (
- <>
- {t(`ecogesture.title_tab_${tab}`)}
- <br />
- {`(${tabCounts[tab]})`}
- </>
- )
- },
- [
- allEcogestureList.length,
- doingEcogestureList.length,
- objectiveEcogestureList.length,
- t,
- ]
- )
-
- useEffect(() => {
- let subscribed = true
- async function loadEcogestures() {
- const ecogestureService = new EcogestureService(client)
-
- const { ecogestureList, ecogestureHash } =
- await ecogestureService.initEcogesture(profile.ecogestureHash)
-
- if (ecogestureHash !== profile.ecogestureHash) {
- dispatch(updateProfile({ ecogestureHash }))
- }
-
- const availableList = await ecogestureService.getEcogestureListByProfile(
- profileEcogesture
- )
- const filteredList = availableList.filter(
- ecogesture => ecogesture.viewedInSelection === false
- )
- if (subscribed && ecogestureList) {
- const doing = ecogestureList.filter(
- ecogesture => ecogesture.doing === true
- )
- const objective = ecogestureList.filter(
- ecogesture => ecogesture.objective === true
- )
- setAllEcogestureList(ecogestureList)
- setObjectiveEcogestureList(objective)
- setDoingEcogestureList(doing)
- setTotalAvailable(availableList.length)
- setTotalViewed(availableList.length - filteredList.length)
- }
- setIsLoading(false)
- }
- loadEcogestures()
- return () => {
- subscribed = false
- }
- }, [client, profileEcogesture, profileType, dispatch, profile.ecogestureHash])
-
- return (
- <>
- <CozyBar titleKey={'common.title_ecogestures'} />
- {isLoading && (
- <Content height={headerHeight}>
- <div className="ecogesture-spinner" aria-busy="true">
- <Loader text={t('ecogestures.loading')} />
- </div>
- </Content>
- )}
- {!isLoading && (
- <>
- <Header
- setHeaderHeight={defineHeaderHeight}
- desktopTitleKey={'common.title_ecogestures'}
- >
- <Tabs
- value={tabValue}
- className="ecogestures-tabs"
- aria-label="ecogestures-tabs"
- onChange={handleChange}
- TabIndicatorProps={{ className: 'indicator-tab' }}
- centered={true}
- >
- <Tab
- label={getTabLabel(EcogestureTab.OBJECTIVE)}
- className={classNames('single-tab', {
- ['active']: tabValue === EcogestureTab.OBJECTIVE,
- })}
- {...tabProps(EcogestureTab.OBJECTIVE)}
- />
- <Tab
- label={getTabLabel(EcogestureTab.DOING)}
- className={classNames('single-tab', {
- ['active']: tabValue === EcogestureTab.DOING,
- })}
- {...tabProps(EcogestureTab.DOING)}
- />
- <Tab
- label={getTabLabel(EcogestureTab.ALL)}
- className={classNames('single-tab', {
- ['active']: tabValue === EcogestureTab.ALL,
- })}
- {...tabProps(EcogestureTab.ALL)}
- />
- </Tabs>
- </Header>
-
- <Content height={headerHeight}>
- <TabPanel value={tabValue} tab={EcogestureTab.OBJECTIVE}>
- {profile.isProfileEcogestureCompleted &&
- (totalAvailable === totalViewed &&
- objectiveEcogestureList.length === 0 ? (
- <EcogestureEmptyList
- setTab={setTabValue}
- isObjective={true}
- isSelectionDone={true}
- handleReinitClick={handleReinitClick}
- />
- ) : (
- <EcogestureList
- list={objectiveEcogestureList}
- displaySelection={totalAvailable !== totalViewed}
- selectionTotal={totalAvailable}
- selectionViewed={totalViewed}
- handleReinitClick={handleReinitClick}
- />
- ))}
- {!profile.isProfileEcogestureCompleted && (
- <EcogestureEmptyList
- setTab={setTabValue}
- isObjective={true}
- isSelectionDone={false}
- handleReinitClick={handleReinitClick}
- />
- )}
- </TabPanel>
-
- <TabPanel value={tabValue} tab={EcogestureTab.DOING}>
- {profile.isProfileEcogestureCompleted &&
- (totalAvailable === totalViewed &&
- doingEcogestureList.length === 0 ? (
- <EcogestureEmptyList
- setTab={setTabValue}
- isObjective={false}
- isSelectionDone={true}
- handleReinitClick={handleReinitClick}
- />
- ) : (
- <EcogestureList
- list={doingEcogestureList}
- displaySelection={totalAvailable !== totalViewed}
- selectionTotal={totalAvailable}
- selectionViewed={totalViewed}
- handleReinitClick={handleReinitClick}
- />
- ))}
- {!profile.isProfileEcogestureCompleted && (
- <EcogestureEmptyList
- setTab={setTabValue}
- isObjective={false}
- isSelectionDone={false}
- handleReinitClick={handleReinitClick}
- />
- )}
- </TabPanel>
-
- <TabPanel value={tabValue} tab={EcogestureTab.ALL}>
- {Boolean(allEcogestureList.length) && (
- <EcogestureList
- list={allEcogestureList}
- displaySelection={false}
- selectionTotal={totalAvailable}
- selectionViewed={totalViewed}
- />
- )}
- </TabPanel>
- </Content>
- </>
- )}
- {openEcogestureInitModal && (
- <EcogestureInitModal
- open={openEcogestureInitModal}
- handleCloseClick={handleCloseEcogestureInitModal}
- handleLaunchForm={handleLaunchForm}
- />
- )}
- {openEcogestureReinitModal && (
- <EcogestureReinitModal
- open={openEcogestureReinitModal}
- handleCloseClick={handleCloseEcogestureReinitModal}
- handleLaunchReinit={handleLaunchReinit}
- />
- )}
- </>
- )
-}
-
-export default EcogestureView
+import { Tab, Tabs } from '@material-ui/core'
+import classNames from 'classnames'
+import Content from 'components/Content/Content'
+import EcogestureList from 'components/Ecogesture/EcogestureList'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import Loader from 'components/Loader/Loader'
+import { useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { EcogestureTab } from 'enum/ecogesture.enum'
+import { Ecogesture } from 'models'
+import React, { Dispatch, useCallback, useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { useLocation, useNavigate } from 'react-router-dom'
+import EcogestureService from 'services/ecogesture.service'
+import { AppActionsTypes, AppStore } from 'store'
+import { updateProfile } from 'store/profile/profile.actions'
+import EcogestureEmptyList from './EcogestureEmptyList'
+import EcogestureInitModal from './EcogestureInitModal'
+import EcogestureReinitModal from './EcogestureReinitModal'
+import './ecogestureView.scss'
+
+interface TabPanelProps {
+ children: React.ReactNode
+ tab: EcogestureTab
+ value: number
+}
+const TabPanel = ({ children, tab, value }: TabPanelProps) => {
+ return (
+ <div
+ role="tabpanel"
+ hidden={value !== tab}
+ id={`simple-tabpanel-${tab}`}
+ aria-labelledby={`simple-tab-${tab}`}
+ >
+ {children}
+ </div>
+ )
+}
+
+const EcogestureView = () => {
+ const [headerHeight, setHeaderHeight] = useState<number>(0)
+ const defineHeaderHeight = (height: number) => {
+ setHeaderHeight(height)
+ }
+ const { t } = useI18n()
+ const client = useClient()
+ const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
+ const tab = new URLSearchParams(useLocation().search).get('tab')
+
+ const { profile, profileEcogesture, profileType } = useSelector(
+ (state: AppStore) => state.ecolyo
+ )
+
+ const [tabValue, setTabValue] = useState<EcogestureTab>(
+ tab ? parseInt(tab) : EcogestureTab.OBJECTIVE
+ )
+ const navigate = useNavigate()
+ const [isLoading, setIsLoading] = useState<boolean>(true)
+ const [allEcogestureList, setAllEcogestureList] = useState<Ecogesture[]>([])
+ const [doingEcogestureList, setDoingEcogestureList] = useState<Ecogesture[]>(
+ []
+ )
+ const [objectiveEcogestureList, setObjectiveEcogestureList] = useState<
+ Ecogesture[]
+ >([])
+ const [totalViewed, setTotalViewed] = useState<number>(0)
+ const [totalAvailable, setTotalAvailable] = useState<number>(0)
+ const [openEcogestureInitModal, setOpenEcogestureInitModal] =
+ useState<boolean>(!profile.haveSeenEcogestureModal)
+ const [openEcogestureReinitModal, setOpenEcogestureReinitModal] =
+ useState<boolean>(false)
+
+ const handleReinitClick = useCallback(() => {
+ setOpenEcogestureReinitModal(true)
+ }, [])
+
+ const handleLaunchForm = useCallback(async () => {
+ dispatch(updateProfile({ haveSeenEcogestureModal: true }))
+ setOpenEcogestureInitModal(false)
+ navigate('/ecogesture-form?modal=false')
+ }, [dispatch, navigate])
+
+ const handleCloseEcogestureInitModal = useCallback(async () => {
+ dispatch(updateProfile({ haveSeenEcogestureModal: true }))
+ setOpenEcogestureInitModal(false)
+ }, [dispatch])
+
+ const handleLaunchReinit = useCallback(async () => {
+ setOpenEcogestureReinitModal(false)
+ setIsLoading(true)
+ const ecogestureService = new EcogestureService(client)
+ const reset = await ecogestureService.reinitAllEcogestures()
+ if (reset) {
+ setOpenEcogestureReinitModal(false)
+ setIsLoading(false)
+ navigate('/ecogesture-form?modal=true')
+ }
+ }, [client, navigate])
+
+ const handleCloseEcogestureReinitModal = useCallback(() => {
+ setOpenEcogestureReinitModal(false)
+ }, [])
+
+ const handleChange = useCallback(
+ (event: React.ChangeEvent<object>, newValue: number) => {
+ event.preventDefault()
+ const params = new URLSearchParams()
+ params.append('tab', newValue.toString())
+ navigate({ search: params.toString() })
+ setTabValue(newValue)
+ },
+ [navigate]
+ )
+
+ const tabProps = useCallback((index: number) => {
+ return {
+ id: `simple-tab-${index}`,
+ 'aria-controls': `simple-tabpanel-${index}`,
+ }
+ }, [])
+
+ const getTabLabel = useCallback(
+ (tab: EcogestureTab) => {
+ const tabCounts = {
+ [EcogestureTab.OBJECTIVE]: objectiveEcogestureList.length,
+ [EcogestureTab.DOING]: doingEcogestureList.length,
+ [EcogestureTab.ALL]: allEcogestureList.length,
+ }
+
+ return (
+ <>
+ {t(`ecogesture.title_tab_${tab}`)}
+ <br />
+ {`(${tabCounts[tab]})`}
+ </>
+ )
+ },
+ [
+ allEcogestureList.length,
+ doingEcogestureList.length,
+ objectiveEcogestureList.length,
+ t,
+ ]
+ )
+
+ useEffect(() => {
+ let subscribed = true
+ async function loadEcogestures() {
+ const ecogestureService = new EcogestureService(client)
+
+ const { ecogestureList, ecogestureHash } =
+ await ecogestureService.initEcogesture(profile.ecogestureHash)
+
+ if (ecogestureHash !== profile.ecogestureHash) {
+ dispatch(updateProfile({ ecogestureHash }))
+ }
+
+ const availableList = await ecogestureService.getEcogestureListByProfile(
+ profileEcogesture
+ )
+ const filteredList = availableList.filter(
+ ecogesture => ecogesture.viewedInSelection === false
+ )
+ if (subscribed && ecogestureList) {
+ const doing = ecogestureList.filter(
+ ecogesture => ecogesture.doing === true
+ )
+ const objective = ecogestureList.filter(
+ ecogesture => ecogesture.objective === true
+ )
+ setAllEcogestureList(ecogestureList)
+ setObjectiveEcogestureList(objective)
+ setDoingEcogestureList(doing)
+ setTotalAvailable(availableList.length)
+ setTotalViewed(availableList.length - filteredList.length)
+ }
+ setIsLoading(false)
+ }
+ loadEcogestures()
+ return () => {
+ subscribed = false
+ }
+ }, [client, profileEcogesture, profileType, dispatch, profile.ecogestureHash])
+
+ return (
+ <>
+ <CozyBar titleKey={'common.title_ecogestures'} />
+ {isLoading && (
+ <Content height={headerHeight}>
+ <div className="ecogesture-spinner" aria-busy="true">
+ <Loader text={t('ecogestures.loading')} />
+ </div>
+ </Content>
+ )}
+ {!isLoading && (
+ <>
+ <Header
+ setHeaderHeight={defineHeaderHeight}
+ desktopTitleKey={'common.title_ecogestures'}
+ >
+ <Tabs
+ value={tabValue}
+ className="ecogestures-tabs"
+ aria-label="ecogestures-tabs"
+ onChange={handleChange}
+ TabIndicatorProps={{ className: 'indicator-tab' }}
+ centered={true}
+ >
+ <Tab
+ label={getTabLabel(EcogestureTab.OBJECTIVE)}
+ className={classNames('single-tab', {
+ ['active']: tabValue === EcogestureTab.OBJECTIVE,
+ })}
+ {...tabProps(EcogestureTab.OBJECTIVE)}
+ />
+ <Tab
+ label={getTabLabel(EcogestureTab.DOING)}
+ className={classNames('single-tab', {
+ ['active']: tabValue === EcogestureTab.DOING,
+ })}
+ {...tabProps(EcogestureTab.DOING)}
+ />
+ <Tab
+ label={getTabLabel(EcogestureTab.ALL)}
+ className={classNames('single-tab', {
+ ['active']: tabValue === EcogestureTab.ALL,
+ })}
+ {...tabProps(EcogestureTab.ALL)}
+ />
+ </Tabs>
+ </Header>
+
+ <Content height={headerHeight}>
+ <TabPanel value={tabValue} tab={EcogestureTab.OBJECTIVE}>
+ {profile.isProfileEcogestureCompleted &&
+ (totalAvailable === totalViewed &&
+ objectiveEcogestureList.length === 0 ? (
+ <EcogestureEmptyList
+ setTab={setTabValue}
+ isObjective={true}
+ isSelectionDone={true}
+ handleReinitClick={handleReinitClick}
+ />
+ ) : (
+ <EcogestureList
+ list={objectiveEcogestureList}
+ displaySelection={totalAvailable !== totalViewed}
+ selectionTotal={totalAvailable}
+ selectionViewed={totalViewed}
+ handleReinitClick={handleReinitClick}
+ />
+ ))}
+ {!profile.isProfileEcogestureCompleted && (
+ <EcogestureEmptyList
+ setTab={setTabValue}
+ isObjective={true}
+ isSelectionDone={false}
+ handleReinitClick={handleReinitClick}
+ />
+ )}
+ </TabPanel>
+
+ <TabPanel value={tabValue} tab={EcogestureTab.DOING}>
+ {profile.isProfileEcogestureCompleted &&
+ (totalAvailable === totalViewed &&
+ doingEcogestureList.length === 0 ? (
+ <EcogestureEmptyList
+ setTab={setTabValue}
+ isObjective={false}
+ isSelectionDone={true}
+ handleReinitClick={handleReinitClick}
+ />
+ ) : (
+ <EcogestureList
+ list={doingEcogestureList}
+ displaySelection={totalAvailable !== totalViewed}
+ selectionTotal={totalAvailable}
+ selectionViewed={totalViewed}
+ handleReinitClick={handleReinitClick}
+ />
+ ))}
+ {!profile.isProfileEcogestureCompleted && (
+ <EcogestureEmptyList
+ setTab={setTabValue}
+ isObjective={false}
+ isSelectionDone={false}
+ handleReinitClick={handleReinitClick}
+ />
+ )}
+ </TabPanel>
+
+ <TabPanel value={tabValue} tab={EcogestureTab.ALL}>
+ {Boolean(allEcogestureList.length) && (
+ <EcogestureList
+ list={allEcogestureList}
+ displaySelection={false}
+ selectionTotal={totalAvailable}
+ selectionViewed={totalViewed}
+ />
+ )}
+ </TabPanel>
+ </Content>
+ </>
+ )}
+ {openEcogestureInitModal && (
+ <EcogestureInitModal
+ open={openEcogestureInitModal}
+ handleCloseClick={handleCloseEcogestureInitModal}
+ handleLaunchForm={handleLaunchForm}
+ />
+ )}
+ {openEcogestureReinitModal && (
+ <EcogestureReinitModal
+ open={openEcogestureReinitModal}
+ handleCloseClick={handleCloseEcogestureReinitModal}
+ handleLaunchReinit={handleLaunchReinit}
+ />
+ )}
+ </>
+ )
+}
+
+export default EcogestureView
diff --git a/src/components/Ecogesture/SingleEcogesture.tsx b/src/components/Ecogesture/SingleEcogesture.tsx
index ec5c06c56355dd76471d70663579cf2bfa864e80..2dfef67887c5fbf4dbb76facec4ce16027a29eb2 100644
--- a/src/components/Ecogesture/SingleEcogesture.tsx
+++ b/src/components/Ecogesture/SingleEcogesture.tsx
@@ -31,7 +31,7 @@ interface EcogestureLocation extends Location {
}
}
-const SingleEcogesture: React.FC = () => {
+const SingleEcogesture = () => {
const { t } = useI18n()
const client = useClient()
const navigate = useNavigate()
diff --git a/src/components/Ecogesture/__snapshots__/EcogestureCard.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureCard.spec.tsx.snap
index ff294fcfbbb6576ea20f845c19234af57012df4b..0b7982f2b08cbc50e0630f0f786ca712212234d9 100644
--- a/src/components/Ecogesture/__snapshots__/EcogestureCard.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/EcogestureCard.spec.tsx.snap
@@ -302,92 +302,80 @@ exports[`EcogestureCard component should be rendered correctly 1`] = `
className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
>
<div
- className="ec"
+ className="ec-content"
>
+ <Component
+ className="Icon"
+ icon=""
+ size={50}
+ >
+ <div
+ id="StyledIcon"
+ />
+ </Component>
<div
- className="ec-content "
+ className="ec-content-short-name text-15-bold"
+ >
+ Bonhomme de neige
+ </div>
+ <EfficiencyRating
+ result={4}
>
<div
- className="ec-content-icon"
+ className="thunder"
>
<Component
- className="Icon"
- icon=""
- size={50}
+ className="star"
+ icon="test-file-stub"
+ key="1"
+ size={15}
>
<div
id="StyledIcon"
/>
</Component>
- </div>
- <div
- className="ec-content-short-name text-15-bold"
- >
- Bonhomme de neige
- </div>
- <div
- className="ec-content-efficiency"
- >
- <EfficiencyRating
- result={4}
+ <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
- className="thunder"
- >
- <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>
- <Component
- className="star"
- icon="test-file-stub"
- key="5"
- size={15}
- >
- <div
- id="StyledIcon"
- />
- </Component>
- </div>
- </EfficiencyRating>
+ id="StyledIcon"
+ />
+ </Component>
+ <Component
+ className="star"
+ icon="test-file-stub"
+ key="4"
+ size={15}
+ >
+ <div
+ id="StyledIcon"
+ />
+ </Component>
+ <Component
+ className="star"
+ icon="test-file-stub"
+ key="5"
+ size={15}
+ >
+ <div
+ id="StyledIcon"
+ />
+ </Component>
</div>
- </div>
+ </EfficiencyRating>
</div>
</div>
</ForwardRef(CardContent)>
diff --git a/src/components/Ecogesture/__snapshots__/EcogestureEmptyList.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureEmptyList.spec.tsx.snap
index 80b817f03803af8c47a20a7687266d4f6432ecd9..a97c14eaea5675b7f44b101a8f1dc6b701e1a8e6 100644
--- a/src/components/Ecogesture/__snapshots__/EcogestureEmptyList.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/EcogestureEmptyList.spec.tsx.snap
@@ -207,7 +207,7 @@ exports[`EcogestureEmptyList component should be rendered correctly 1`] = `
classes={
Object {
"label": "text-16-bold",
- "root": "btn-highlight btn2",
+ "root": "btn-highlight",
}
}
onClick={[Function]}
@@ -236,7 +236,7 @@ exports[`EcogestureEmptyList component should be rendered correctly 1`] = `
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight btn2",
+ "root": "MuiButton-root btn-highlight",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -251,7 +251,7 @@ exports[`EcogestureEmptyList component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="ecogesture.emptyList.btn2"
- className="MuiButton-root btn-highlight btn2 MuiButton-text"
+ className="MuiButton-root btn-highlight MuiButton-text"
component="button"
disabled={false}
focusRipple={true}
@@ -261,7 +261,7 @@ exports[`EcogestureEmptyList component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="ecogesture.emptyList.btn2"
- className="MuiButton-root btn-highlight btn2 MuiButton-text"
+ className="MuiButton-root btn-highlight MuiButton-text"
classes={
Object {
"disabled": "Mui-disabled",
@@ -278,7 +278,7 @@ exports[`EcogestureEmptyList component should be rendered correctly 1`] = `
>
<button
aria-label="ecogesture.emptyList.btn2"
- className="MuiButtonBase-root MuiButton-root btn-highlight btn2 MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
diff --git a/src/components/Ecogesture/__snapshots__/EcogestureView.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureView.spec.tsx.snap
index caf3bc141149ed26b0b6c7e13653819fed1febac..50965b8272031fe0d5d756ebda4d77811f41f39c 100644
--- a/src/components/Ecogesture/__snapshots__/EcogestureView.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/EcogestureView.spec.tsx.snap
@@ -765,7 +765,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
classes={
Object {
"label": "text-16-bold",
- "root": "btn-highlight btn2",
+ "root": "btn-highlight",
}
}
onClick={[Function]}
@@ -794,7 +794,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight btn2",
+ "root": "MuiButton-root btn-highlight",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -809,7 +809,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="ecogesture.emptyList.btn2"
- className="MuiButton-root btn-highlight btn2 MuiButton-text"
+ className="MuiButton-root btn-highlight MuiButton-text"
component="button"
disabled={false}
focusRipple={true}
@@ -819,7 +819,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="ecogesture.emptyList.btn2"
- className="MuiButton-root btn-highlight btn2 MuiButton-text"
+ className="MuiButton-root btn-highlight MuiButton-text"
classes={
Object {
"disabled": "Mui-disabled",
@@ -836,7 +836,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
>
<button
aria-label="ecogesture.emptyList.btn2"
- className="MuiButtonBase-root MuiButton-root btn-highlight btn2 MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -1101,7 +1101,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
classes={
Object {
"label": "text-16-bold",
- "root": "btn-highlight btn2",
+ "root": "btn-highlight",
}
}
onClick={[Function]}
@@ -1130,7 +1130,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight btn2",
+ "root": "MuiButton-root btn-highlight",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -1145,7 +1145,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="ecogesture.emptyList.btn2"
- className="MuiButton-root btn-highlight btn2 MuiButton-text"
+ className="MuiButton-root btn-highlight MuiButton-text"
component="button"
disabled={false}
focusRipple={true}
@@ -1155,7 +1155,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="ecogesture.emptyList.btn2"
- className="MuiButton-root btn-highlight btn2 MuiButton-text"
+ className="MuiButton-root btn-highlight MuiButton-text"
classes={
Object {
"disabled": "Mui-disabled",
@@ -1172,7 +1172,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
>
<button
aria-label="ecogesture.emptyList.btn2"
- className="MuiButtonBase-root MuiButton-root btn-highlight btn2 MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
diff --git a/src/components/Ecogesture/ecogestureCard.scss b/src/components/Ecogesture/ecogestureCard.scss
index 2c1f2ef9d328b85301bbe7a242b467dbf9efe73e..9ba0270176634771b20b8b07232411715ec84a3a 100644
--- a/src/components/Ecogesture/ecogestureCard.scss
+++ b/src/components/Ecogesture/ecogestureCard.scss
@@ -1,54 +1,27 @@
@import 'src/styles/base/breakpoint';
@import 'src/styles/base/color';
-.ec {
- display: flex;
- justify-content: center;
- width: 100%;
+.ec-content {
height: 100%;
- .ecogesture-card-notif {
- position: absolute;
- display: flex;
- justify-content: center;
- align-items: center;
- right: 8px;
- top: 8px;
- width: 1.25rem;
- height: 1.25rem;
- color: $dark-light;
- border-radius: 50%;
- border: 1px solid $dark-light;
- z-index: 1;
- background: $blue-radial-gradient;
- font-size: 12px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-around;
+ &.ec-content-unlocked {
+ padding: 0.4rem 0;
+ }
+ &.ec-content-challenge {
+ padding: 0.5rem 0;
}
- .ec-content {
+
+ .ec-content-short-name {
display: flex;
- flex-direction: column;
+ flex: 1;
align-items: center;
- justify-content: space-around;
- &.ec-content-unlocked {
- padding: 0.4rem 0;
- }
- &.ec-content-challenge {
- padding: 0.5rem 0;
- }
- .ec-content-icon {
- min-height: 50px;
- }
- .ec-content-short-name {
- display: flex;
- flex: 1;
- align-items: center;
- text-align: center;
- min-height: 38px;
- }
- .ec-content-efficiency {
- margin-top: 0.5rem;
- color: $soft-grey;
- }
+ text-align: center;
}
}
+
.cp-eg-1 {
height: 8rem;
width: 100%;
diff --git a/src/components/Ecogesture/ecogestureEmptyList.scss b/src/components/Ecogesture/ecogestureEmptyList.scss
index 49974c072391ef74e2f70d34753e48d9ea40ea66..a072890654d9629babe8c4a94abbf687ef71efda 100644
--- a/src/components/Ecogesture/ecogestureEmptyList.scss
+++ b/src/components/Ecogesture/ecogestureEmptyList.scss
@@ -28,9 +28,6 @@
button {
margin: 0;
}
- button.btn2 {
- margin-left: 1rem;
- }
}
.reinit-button {
margin-left: 15px;
diff --git a/src/components/EcogestureForm/EcogestureFormEquipment.spec.tsx b/src/components/EcogestureForm/EcogestureFormEquipment.spec.tsx
index 714c6ee62f1f2d6aaf04dea7fcaaf757dab9ace4..d1e633a61649020325f81e7f25198d55309ddf44 100644
--- a/src/components/EcogestureForm/EcogestureFormEquipment.spec.tsx
+++ b/src/components/EcogestureForm/EcogestureFormEquipment.spec.tsx
@@ -23,6 +23,7 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
})
const mockStore = configureStore([])
const mockSetPreviousStep = jest.fn()
+const mockSetNextStep = jest.fn()
const useSelectorSpy = jest.spyOn(reactRedux, 'useSelector')
const mockHistoryPush = jest.fn()
@@ -33,7 +34,6 @@ jest.mock('react-router-dom', () => ({
}),
}))
jest.mock('./EquipmentIcon', () => 'mock-equipment-icon')
-const mockUseDispatch = jest.spyOn(reactRedux, 'useDispatch')
describe('EcogestureFormEquipment component', () => {
useSelectorSpy.mockReturnValue({
@@ -50,9 +50,9 @@ describe('EcogestureFormEquipment component', () => {
const wrapper = mount(
<Provider store={store}>
<EcogestureFormEquipment
- profileEcogesture={mockProfileEcogesture}
+ currentProfileEcogesture={mockProfileEcogesture}
setPreviousStep={mockSetPreviousStep}
- setNextStep={jest.fn()}
+ setNextStepEcogestureForm={mockSetNextStep}
step={0}
/>
</Provider>
@@ -60,29 +60,7 @@ describe('EcogestureFormEquipment component', () => {
await waitForComponentToPaint(wrapper)
expect(toJson(wrapper)).toMatchSnapshot()
})
- it('should finish the form', async () => {
- const store = mockStore({
- ecolyo: {
- global: globalStateData,
- challenge: challengeStateData,
- },
- })
- mockUseDispatch.mockReturnValue(jest.fn())
- const wrapper = mount(
- <Provider store={store}>
- <EcogestureFormEquipment
- profileEcogesture={mockProfileEcogesture}
- setPreviousStep={mockSetPreviousStep}
- setNextStep={jest.fn()}
- step={0}
- />
- </Provider>
- )
- await waitForComponentToPaint(wrapper)
- wrapper.find(Button).at(1).simulate('click')
- expect(mockUseDispatch).toHaveBeenCalledTimes(2)
- })
it('should select equipment and unselect it', async () => {
const store = mockStore({
ecolyo: {
@@ -94,9 +72,9 @@ describe('EcogestureFormEquipment component', () => {
const wrapper = mount(
<Provider store={store}>
<EcogestureFormEquipment
- profileEcogesture={mockProfileEcogesture}
+ currentProfileEcogesture={mockProfileEcogesture}
setPreviousStep={mockSetPreviousStep}
- setNextStep={jest.fn()}
+ setNextStepEcogestureForm={mockSetNextStep}
step={0}
/>
</Provider>
@@ -121,9 +99,9 @@ describe('EcogestureFormEquipment component', () => {
const wrapper = mount(
<Provider store={store}>
<EcogestureFormEquipment
- profileEcogesture={mockProfileEcogesture}
+ currentProfileEcogesture={mockProfileEcogesture}
setPreviousStep={mockSetPreviousStep}
- setNextStep={jest.fn()}
+ setNextStepEcogestureForm={mockSetNextStep}
step={0}
/>
</Provider>
diff --git a/src/components/EcogestureForm/EcogestureFormEquipment.tsx b/src/components/EcogestureForm/EcogestureFormEquipment.tsx
index 323d4969e2a99263ef24a72a8ef2928c4c372622..b26bd8eec3c018ed818ea19796b30f15ff2f0d6b 100644
--- a/src/components/EcogestureForm/EcogestureFormEquipment.tsx
+++ b/src/components/EcogestureForm/EcogestureFormEquipment.tsx
@@ -4,73 +4,71 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { EquipmentType } from 'enum/ecogesture.enum'
import { EcogestureStepForm } from 'enum/ecogestureForm.enum'
import { ProfileTypeStepForm } from 'enum/profileType.enum'
-import { ProfileEcogesture } from 'models/profileEcogesture.model'
-import React, { Dispatch, useCallback, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { useNavigate } from 'react-router-dom'
-import { AppActionsTypes, AppStore } from 'store'
-import { updateProfile } from 'store/profile/profile.actions'
-import {
- newProfileEcogestureEntry,
- updateProfileEcogesture,
-} from 'store/profileEcogesture/profileEcogesture.actions'
+import { ProfileEcogesture, ProfileType } from 'models'
+import React, { useCallback, useState } from 'react'
+import { useSelector } from 'react-redux'
+import { AppStore } from 'store'
import EquipmentIcon from './EquipmentIcon'
import './ecogestureFormEquipment.scss'
interface EcogestureFormEquipmentProps {
- profileEcogesture: ProfileEcogesture
- setPreviousStep: (_profileEcogesture: ProfileEcogesture) => void
- setNextStep?: (_profileEcogesture: ProfileEcogesture) => void
+ currentProfileEcogesture?: ProfileEcogesture
+ currentProfileType?: ProfileType
+ setPreviousStep: () => void
+ setNextStepEcogestureForm?: (_profileEcogesture: ProfileEcogesture) => void
+ setNextStepProfileForm?: (_profileType: ProfileType) => void
step: ProfileTypeStepForm | EcogestureStepForm
}
-const EcogestureFormEquipment: React.FC<EcogestureFormEquipmentProps> = ({
- profileEcogesture,
+const EcogestureFormEquipment = ({
+ currentProfileEcogesture,
+ currentProfileType,
setPreviousStep,
- setNextStep,
+ setNextStepEcogestureForm,
+ setNextStepProfileForm,
step,
}: EcogestureFormEquipmentProps) => {
const { t } = useI18n()
- const dispatch: Dispatch<AppActionsTypes> = useDispatch()
- const navigate = useNavigate()
const { isProfileEcogestureCompleted } = useSelector(
(state: AppStore) => state.ecolyo.profile
)
- const [answer, setAnswer] = useState<string[]>(
- isProfileEcogestureCompleted ? profileEcogesture.equipments : []
+ const previousEquipments =
+ currentProfileType?.equipments || currentProfileEcogesture?.equipments || []
+ const [answer, setAnswer] = useState<EquipmentType[]>(
+ isProfileEcogestureCompleted ? previousEquipments : []
)
const handlePrevious = useCallback(() => {
- setPreviousStep(profileEcogesture)
- }, [profileEcogesture, setPreviousStep])
+ setPreviousStep()
+ }, [setPreviousStep])
const handleNext = useCallback(() => {
- profileEcogesture.equipments = answer as EquipmentType[]
- // Check if gestureForm is used from Big profile or small profile
- if (setNextStep) {
- setNextStep()
- dispatch(updateProfileEcogesture(profileEcogesture))
- } else {
- dispatch(newProfileEcogestureEntry(profileEcogesture))
- dispatch(updateProfile({ isProfileEcogestureCompleted: true }))
- navigate('/ecogesture-selection')
+ if (setNextStepProfileForm && currentProfileType) {
+ setNextStepProfileForm({
+ ...currentProfileType,
+ equipments: answer,
+ })
+ } else if (setNextStepEcogestureForm && currentProfileEcogesture) {
+ setNextStepEcogestureForm({
+ ...currentProfileEcogesture,
+ equipments: answer,
+ })
}
- }, [profileEcogesture, setNextStep, answer, dispatch, navigate])
+ }, [
+ setNextStepProfileForm,
+ currentProfileType,
+ setNextStepEcogestureForm,
+ currentProfileEcogesture,
+ answer,
+ ])
- const isChecked = useCallback(
- (value: string): boolean => {
- if (answer.includes(value)) {
- return true
- } else {
- return false
- }
- },
- [answer]
- )
+ const isChecked = (value: EquipmentType): boolean => {
+ return answer.includes(value)
+ }
const handleChange = useCallback(
- (value: string) => {
- const tempAnswer: string[] = [...answer]
+ (value: EquipmentType) => {
+ const tempAnswer = [...answer]
if (tempAnswer.includes(value)) {
const index = tempAnswer.indexOf(value)
if (index > -1) tempAnswer.splice(index, 1)
diff --git a/src/components/EcogestureForm/EcogestureFormSingleChoice.spec.tsx b/src/components/EcogestureForm/EcogestureFormSingleChoice.spec.tsx
index 1f961c4a03fcb1dbd74113a1d55ba8b9c1c8f734..1b6515c429eb7c8dbf22cd7520635df02720b308 100644
--- a/src/components/EcogestureForm/EcogestureFormSingleChoice.spec.tsx
+++ b/src/components/EcogestureForm/EcogestureFormSingleChoice.spec.tsx
@@ -3,6 +3,7 @@ import { Button } from '@material-ui/core'
import { mount } from 'enzyme'
import toJson from 'enzyme-to-json'
import React from 'react'
+import * as reactRedux from 'react-redux'
import { Provider } from 'react-redux'
import {
mockEcogestureAnswer,
@@ -12,6 +13,8 @@ import { createMockEcolyoStore } from '../../../tests/__mocks__/store'
import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import EcogestureFormSingleChoice from './EcogestureFormSingleChoice'
+const useSelectorSpy = jest.spyOn(reactRedux, 'useSelector')
+
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
useI18n: jest.fn(() => {
@@ -48,7 +51,7 @@ describe('EcogestureFormSingleChoice component', () => {
viewedStep={1}
setNextStep={mockHandleNextStep}
setPreviousStep={mockHandlePreviousStep}
- profileEcogesture={mockProfileEcogesture}
+ currentProfileEcogesture={mockProfileEcogesture}
answerType={mockEcogestureAnswer}
/>
</Provider>
@@ -64,7 +67,7 @@ describe('EcogestureFormSingleChoice component', () => {
viewedStep={1}
setNextStep={mockHandleNextStep}
setPreviousStep={mockHandlePreviousStep}
- profileEcogesture={mockProfileEcogesture}
+ currentProfileEcogesture={mockProfileEcogesture}
answerType={mockEcogestureAnswer}
/>
</Provider>
@@ -82,7 +85,7 @@ describe('EcogestureFormSingleChoice component', () => {
viewedStep={1}
setNextStep={mockHandleNextStep}
setPreviousStep={mockHandlePreviousStep}
- profileEcogesture={mockProfileEcogesture}
+ currentProfileEcogesture={mockProfileEcogesture}
answerType={mockEcogestureAnswer}
/>
</Provider>
@@ -102,7 +105,7 @@ describe('EcogestureFormSingleChoice component', () => {
viewedStep={0}
setNextStep={mockHandleNextStep}
setPreviousStep={mockHandlePreviousStep}
- profileEcogesture={mockProfileEcogesture}
+ currentProfileEcogesture={mockProfileEcogesture}
answerType={mockEcogestureAnswer}
/>
</Provider>
@@ -112,6 +115,11 @@ describe('EcogestureFormSingleChoice component', () => {
expect(mockHandlePreviousStep).toHaveBeenCalledTimes(1)
})
it('should keep previous answer', async () => {
+ useSelectorSpy.mockReturnValue({
+ profile: {
+ isProfileEcogestureCompleted: true,
+ },
+ })
const wrapper = mount(
<Provider store={store}>
<EcogestureFormSingleChoice
@@ -119,7 +127,7 @@ describe('EcogestureFormSingleChoice component', () => {
viewedStep={1}
setNextStep={mockHandleNextStep}
setPreviousStep={mockHandlePreviousStep}
- profileEcogesture={mockProfileEcogesture}
+ currentProfileEcogesture={mockProfileEcogesture}
answerType={mockEcogestureAnswer}
/>
</Provider>
diff --git a/src/components/EcogestureForm/EcogestureFormSingleChoice.tsx b/src/components/EcogestureForm/EcogestureFormSingleChoice.tsx
index be00ef2afd0dcb148cdc2bbe0bc3cbcd106c7550..5f1299666e89f4e2b82397ed0952840ec4922d03 100644
--- a/src/components/EcogestureForm/EcogestureFormSingleChoice.tsx
+++ b/src/components/EcogestureForm/EcogestureFormSingleChoice.tsx
@@ -6,25 +6,25 @@ import { EcogestureStepForm } from 'enum/ecogestureForm.enum'
import {
ProfileEcogesture,
ProfileEcogestureAnswer,
- ProfileEcogestureAnswerChoices,
+ ProfileEcogestureValues,
} from 'models/profileEcogesture.model'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useState } from 'react'
import { useSelector } from 'react-redux'
import { AppStore } from 'store'
import './ecogestureFormSingleChoice.scss'
interface EcogestureFormSingleChoiceProps {
step: EcogestureStepForm
viewedStep: EcogestureStepForm
- profileEcogesture: ProfileEcogesture
+ currentProfileEcogesture: ProfileEcogesture
answerType: ProfileEcogestureAnswer
setNextStep: (_profileEcogesture: ProfileEcogesture) => void
- setPreviousStep: (_profileEcogesture: ProfileEcogesture) => void
+ setPreviousStep: () => void
}
-const EcogestureFormSingleChoice: React.FC<EcogestureFormSingleChoiceProps> = ({
+const EcogestureFormSingleChoice = ({
step,
viewedStep,
- profileEcogesture,
+ currentProfileEcogesture,
answerType,
setNextStep,
setPreviousStep,
@@ -33,28 +33,19 @@ const EcogestureFormSingleChoice: React.FC<EcogestureFormSingleChoiceProps> = ({
const { isProfileEcogestureCompleted } = useSelector(
(state: AppStore) => state.ecolyo.profile
)
- const [answer, setAnswer] = useState<ProfileEcogestureAnswerChoices>(
- isProfileEcogestureCompleted ? profileEcogesture[answerType.attribute] : ''
+ const [answer, setAnswer] = useState<ProfileEcogestureValues>(
+ isProfileEcogestureCompleted || step < viewedStep
+ ? currentProfileEcogesture[answerType.attribute]
+ : null
)
const handlePrevious = useCallback(() => {
- setPreviousStep(profileEcogesture)
- }, [profileEcogesture, setPreviousStep])
-
- const handleAnswer = useCallback((value: ProfileEcogestureAnswerChoices) => {
- setAnswer(value)
- }, [])
+ setPreviousStep()
+ }, [setPreviousStep])
const handleNext = useCallback(() => {
- profileEcogesture[answerType.attribute] = answer
- setNextStep(profileEcogesture)
- }, [profileEcogesture, setNextStep, answer, answerType.attribute])
-
- useEffect(() => {
- if (step < viewedStep) {
- setAnswer(profileEcogesture[answerType.attribute])
- }
- }, [step, viewedStep, profileEcogesture, answerType])
+ setNextStep({ ...currentProfileEcogesture, [answerType.attribute]: answer })
+ }, [currentProfileEcogesture, setNextStep, answer, answerType.attribute])
return (
<div className="ecogesture-profile-container">
@@ -64,40 +55,39 @@ const EcogestureFormSingleChoice: React.FC<EcogestureFormSingleChoiceProps> = ({
`ecogesture_form.${EcogestureStepForm[step].toLowerCase()}.question`
)}
</div>
- {answerType.choices.map(
- (value: ProfileEcogestureAnswerChoices, index: number) => {
- return value || value === 0 ? (
- <label
- key={index}
- className={classNames({
- ['radio_short']: answerType.choices.length < 5,
- ['radio_long']: answerType.choices.length > 4,
- ['answer-checked']: answer === value,
- })}
- >
- <input
- type={'radio'}
- value={value}
- name={value.toString()}
- onChange={() => handleAnswer(value)}
- checked={answer === value ? true : false}
- className={answer === value ? 'checked-input' : ''}
- />
- {t(
- `ecogesture_form.${EcogestureStepForm[
- step
- ].toLowerCase()}.${value}`
- )}
- </label>
- ) : null
- }
- )}
+ {answerType.choices.map(value => {
+ if (!value) return null
+ return (
+ <label
+ key={value.toString()}
+ className={classNames({
+ ['radio_short']: answerType.choices.length < 5,
+ ['radio_long']: answerType.choices.length > 4,
+ ['answer-checked']: answer === value,
+ })}
+ >
+ <input
+ type={'radio'}
+ value={value}
+ name={value.toString()}
+ onChange={() => setAnswer(value)}
+ checked={answer === value}
+ className={answer === value ? 'checked-input' : ''}
+ />
+ {t(
+ `ecogesture_form.${EcogestureStepForm[
+ step
+ ].toLowerCase()}.${value}`
+ )}
+ </label>
+ )
+ })}
</div>
<FormNavigation
step={step}
handlePrevious={handlePrevious}
handleNext={handleNext}
- disableNextButton={answer === ''}
+ disableNextButton={answer === null}
isEcogesture={true}
/>
</div>
diff --git a/src/components/EcogestureForm/EcogestureFormView.spec.tsx b/src/components/EcogestureForm/EcogestureFormView.spec.tsx
index d8588e3e67171fccb5620bbee49c33052cacb65d..78474a832ea8baadda173e0f28f88adbf309b580 100644
--- a/src/components/EcogestureForm/EcogestureFormView.spec.tsx
+++ b/src/components/EcogestureForm/EcogestureFormView.spec.tsx
@@ -4,6 +4,7 @@ import { mount } from 'enzyme'
import toJson from 'enzyme-to-json'
import { Profile } from 'models'
import React from 'react'
+import * as reactRedux from 'react-redux'
import { Provider } from 'react-redux'
import {
createMockEcolyoStore,
@@ -28,6 +29,7 @@ jest.mock(
'components/EcogestureForm/EcogestureLaunchFormModal',
() => 'mock-ecogesturelaunchmodal'
)
+const mockUseDispatch = jest.spyOn(reactRedux, 'useDispatch')
jest.mock('components/Content/Content', () => 'mock-content')
const mockedNavigate = jest.fn()
jest.mock('react-router-dom', () => ({
@@ -44,6 +46,7 @@ describe('EcogestureFormView component', () => {
const store = createMockEcolyoStore()
beforeEach(() => {
store.clearActions()
+ mockUseDispatch.mockClear()
})
it('should be rendered correctly', async () => {
@@ -107,4 +110,19 @@ describe('EcogestureFormView component', () => {
wrapper.find(Button).first().simulate('click')
expect(wrapper.find('.ecogesture-form-single').exists()).toBeTruthy()
})
+
+ it('should handle form end', async () => {
+ mockUseDispatch.mockReturnValue(jest.fn())
+ jest
+ .spyOn(React, 'useState')
+ .mockImplementationOnce(() => [0, () => null])
+ .mockImplementationOnce(() => [4, () => null])
+ const wrapper = mount(
+ <Provider store={store}>
+ <EcogestureFormView />
+ </Provider>
+ )
+ await waitForComponentToPaint(wrapper)
+ expect(mockUseDispatch).toHaveBeenCalledTimes(2)
+ })
})
diff --git a/src/components/EcogestureForm/EcogestureFormView.tsx b/src/components/EcogestureForm/EcogestureFormView.tsx
index b2fbe1779d04ecc9f6135e2fa64572d20df9dc0a..b3faea70e482efb173af8a7949874f4c563d5f09 100644
--- a/src/components/EcogestureForm/EcogestureFormView.tsx
+++ b/src/components/EcogestureForm/EcogestureFormView.tsx
@@ -14,21 +14,25 @@ import {
ProfileEcogesture,
ProfileEcogestureAnswer,
} from 'models/profileEcogesture.model'
-import React, { useCallback, useEffect, useState } from 'react'
-import { useSelector } from 'react-redux'
-import { useLocation } from 'react-router-dom'
+import React, { Dispatch, useCallback, useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { useLocation, useNavigate } from 'react-router-dom'
import ProfileEcogestureFormService from 'services/profileEcogestureForm.service'
-import { AppStore } from 'store'
+import { AppActionsTypes, AppStore } from 'store'
+import { updateProfile } from 'store/profile/profile.actions'
+import { newProfileEcogestureEntry } from 'store/profileEcogesture/profileEcogesture.actions'
-const EcogestureFormView: React.FC = () => {
+const EcogestureFormView = () => {
+ const dispatch: Dispatch<AppActionsTypes> = useDispatch()
+ const {
+ profile: { isProfileTypeCompleted },
+ profileEcogesture,
+ } = useSelector((state: AppStore) => state.ecolyo)
+ const navigate = useNavigate()
const [headerHeight, setHeaderHeight] = useState<number>(0)
const defineHeaderHeight = (height: number) => {
setHeaderHeight(height)
}
- const {
- profile: { isProfileTypeCompleted },
- profileEcogesture: curProfileEcogesture,
- } = useSelector((state: AppStore) => state.ecolyo)
const shouldOpenModal = new URLSearchParams(useLocation().search).get('modal')
const [step, setStep] = useState<EcogestureStepForm>(
@@ -36,7 +40,7 @@ const EcogestureFormView: React.FC = () => {
)
const [answerType, setAnswerType] = useState<ProfileEcogestureAnswer>({
type: ProfileEcogestureAnswerType.SINGLE_CHOICE,
- attribute: '',
+ attribute: 'heating',
choices: [],
})
@@ -45,44 +49,50 @@ const EcogestureFormView: React.FC = () => {
shouldOpenModal !== 'false' ? true : false
)
const [viewedStep, setViewedStep] = useState<number>(-1)
- const [profileEcogesture, setProfileEcogesture] =
- useState<ProfileEcogesture>(curProfileEcogesture)
+ const [currentProfileEcogesture, setCurrentProfileEcogesture] =
+ useState<ProfileEcogesture>(profileEcogesture)
const setNextStep = useCallback(
(_profileEcogesture: ProfileEcogesture) => {
- setProfileEcogesture(_profileEcogesture)
+ setCurrentProfileEcogesture(_profileEcogesture)
const pefs = new ProfileEcogestureFormService(_profileEcogesture)
- const nextStep: EcogestureStepForm = pefs.getNextFormStep(step)
+ const nextStep = pefs.getNextFormStep(step)
setIsLoading(true)
if (nextStep > viewedStep) {
setViewedStep(nextStep)
}
- const _answerType: ProfileEcogestureAnswer =
+ const _answerType =
ProfileEcogestureFormService.getAnswerForStep(nextStep)
setAnswerType(_answerType)
setStep(nextStep)
},
[step, viewedStep]
)
- const setPreviousStep = useCallback(
- (_profileEcogesture: ProfileEcogesture) => {
- setProfileEcogesture(_profileEcogesture)
- const pefs = new ProfileEcogestureFormService(_profileEcogesture)
- const previousStep: EcogestureStepForm = pefs.getPreviousFormStep(step)
- setIsLoading(true)
- const _answerType: ProfileEcogestureAnswer =
- ProfileEcogestureFormService.getAnswerForStep(previousStep)
- setAnswerType(_answerType)
- setStep(previousStep)
- },
- [step]
- )
+ const setPreviousStep = useCallback(() => {
+ const pefs = new ProfileEcogestureFormService(currentProfileEcogesture)
+ const previousStep = pefs.getPreviousFormStep(step)
+ setIsLoading(true)
+ const _answerType =
+ ProfileEcogestureFormService.getAnswerForStep(previousStep)
+ setAnswerType(_answerType)
+ setStep(previousStep)
+ }, [currentProfileEcogesture, step])
+
+ const handleEndForm = useCallback(() => {
+ dispatch(newProfileEcogestureEntry(currentProfileEcogesture))
+ dispatch(updateProfile({ isProfileEcogestureCompleted: true }))
+ navigate('/ecogesture-selection')
+ }, [currentProfileEcogesture, dispatch, navigate])
useEffect(() => {
- const _answerType: ProfileEcogestureAnswer =
- ProfileEcogestureFormService.getAnswerForStep(step)
+ const _answerType = ProfileEcogestureFormService.getAnswerForStep(step)
setAnswerType(_answerType)
setIsLoading(false)
- }, [step])
+
+ // handle end of form
+ if (step === EcogestureStepForm.END) {
+ handleEndForm()
+ }
+ }, [handleEndForm, step])
if (isLoading) {
return (
@@ -106,7 +116,8 @@ const EcogestureFormView: React.FC = () => {
{step === EcogestureStepForm.EQUIPMENTS && (
<EcogestureFormEquipment
step={EcogestureStepForm.EQUIPMENTS}
- profileEcogesture={profileEcogesture}
+ currentProfileEcogesture={currentProfileEcogesture}
+ setNextStepEcogestureForm={setNextStep}
setPreviousStep={setPreviousStep}
/>
)}
@@ -114,7 +125,7 @@ const EcogestureFormView: React.FC = () => {
<EcogestureFormSingleChoice
step={step}
viewedStep={viewedStep}
- profileEcogesture={profileEcogesture}
+ currentProfileEcogesture={currentProfileEcogesture}
answerType={answerType}
setNextStep={setNextStep}
setPreviousStep={setPreviousStep}
diff --git a/src/components/EcogestureForm/EcogestureLaunchFormModal.tsx b/src/components/EcogestureForm/EcogestureLaunchFormModal.tsx
index 8e93c619c5f4f2e1ed050702aa534340bb9aaba0..43d41314757b94143c5bd35bef7739e62dcf90c4 100644
--- a/src/components/EcogestureForm/EcogestureLaunchFormModal.tsx
+++ b/src/components/EcogestureForm/EcogestureLaunchFormModal.tsx
@@ -10,7 +10,7 @@ interface EcogestureLaunchFormModalProps {
open: boolean
handleCloseClick: () => void
}
-const EcogestureLaunchFormModal: React.FC<EcogestureLaunchFormModalProps> = ({
+const EcogestureLaunchFormModal = ({
open,
handleCloseClick,
}: EcogestureLaunchFormModalProps) => {
diff --git a/src/components/EcogestureForm/EquipmentIcon.tsx b/src/components/EcogestureForm/EquipmentIcon.tsx
index 64d3407a8749263f6b09deec1101a8ec990d0bfb..46b1b09c79752261cc6e1bbb91c4c757878a9664 100644
--- a/src/components/EcogestureForm/EquipmentIcon.tsx
+++ b/src/components/EcogestureForm/EquipmentIcon.tsx
@@ -9,10 +9,7 @@ interface EquipmentIconProps {
isChecked: boolean
}
-const EquipmentIcon: React.FC<EquipmentIconProps> = ({
- equipment,
- isChecked,
-}: EquipmentIconProps) => {
+const EquipmentIcon = ({ equipment, isChecked }: EquipmentIconProps) => {
const { t } = useI18n()
const [icon, setIcon] = useState<string>('')
useEffect(() => {
diff --git a/src/components/EcogestureForm/__snapshots__/EcogestureFormEquipment.spec.tsx.snap b/src/components/EcogestureForm/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
index 3d438e9efa10df387fc2ea4872131b93bc90c85a..541a06390317a40266289902a1be72a383bcfa3b 100644
--- a/src/components/EcogestureForm/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
+++ b/src/components/EcogestureForm/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
@@ -14,7 +14,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
}
>
<EcogestureFormEquipment
- profileEcogesture={
+ currentProfileEcogesture={
Object {
"equipments": Array [],
"heating": "individual",
@@ -22,7 +22,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
"warmingFluid": 0,
}
}
- setNextStep={[MockFunction]}
+ setNextStepEcogestureForm={[MockFunction]}
setPreviousStep={[MockFunction]}
step={0}
>
diff --git a/src/components/EcogestureForm/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap b/src/components/EcogestureForm/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap
index 8dfe3731ddfe10627e288544994e65b4ae2fdd5a..3fc0bc2066d0d83a06be85c5e7e8d8c7b2c3154d 100644
--- a/src/components/EcogestureForm/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap
+++ b/src/components/EcogestureForm/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap
@@ -24,7 +24,7 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
"type": 0,
}
}
- profileEcogesture={
+ currentProfileEcogesture={
Object {
"equipments": Array [],
"heating": "individual",
@@ -50,7 +50,7 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
</div>
<label
className="radio_short answer-checked"
- key="0"
+ key="individual"
>
<input
checked={true}
@@ -64,7 +64,7 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
</label>
<label
className="radio_short"
- key="1"
+ key="collective"
>
<input
checked={false}
diff --git a/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap b/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
index 05718102ded39cce7cef10b601ffc5083d50b91f..304c1fdddbaa8721f125a341cc1ab6837f54a958 100644
--- a/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
+++ b/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
@@ -35,7 +35,7 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
"type": 0,
}
}
- profileEcogesture={
+ currentProfileEcogesture={
Object {
"equipments": Array [],
"heating": "individual",
@@ -61,7 +61,7 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
</div>
<label
className="radio_short"
- key="0"
+ key="individual"
>
<input
checked={false}
@@ -75,7 +75,7 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
</label>
<label
className="radio_short"
- key="1"
+ key="collective"
>
<input
checked={false}
diff --git a/src/components/EcogestureSelection/EcogestureSelection.tsx b/src/components/EcogestureSelection/EcogestureSelection.tsx
index 090a33ffd5914d14452262acd03a9ff43630d6fc..a04d394156641b336a7a52541a33bb22663e438a 100644
--- a/src/components/EcogestureSelection/EcogestureSelection.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelection.tsx
@@ -16,7 +16,7 @@ import EcogestureService from 'services/ecogesture.service'
import { AppStore } from 'store'
import './ecogestureSelection.scss'
-const EcogestureSelection: React.FC = () => {
+const EcogestureSelection = () => {
const { t } = useI18n()
const client = useClient()
const navigate = useNavigate()
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail.tsx b/src/components/EcogestureSelection/EcogestureSelectionDetail.tsx
index 9e6133e4d13f05c56341623c818664888a9d6f4b..1c58e184a47635ddf11c142bf709f44bef95810c 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail.tsx
@@ -16,7 +16,7 @@ interface EcogestureSelectionDetailProps {
title: string
}
-const EcogestureSelectionDetail: React.FC<EcogestureSelectionDetailProps> = ({
+const EcogestureSelectionDetail = ({
ecogesture,
validate,
title,
diff --git a/src/components/EcogestureSelection/EcogestureSelectionEnd.tsx b/src/components/EcogestureSelection/EcogestureSelectionEnd.tsx
index 3e35b4ef1a3fc0fdc55f475c6ab3c7498493a04d..5742708e628210bb7da4a06b1722d91068c76b96 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionEnd.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionEnd.tsx
@@ -6,7 +6,7 @@ import React, { useCallback } from 'react'
import { useNavigate } from 'react-router-dom'
import './ecogestureSelectionEnd.scss'
-const EcogestureSelectionEnd: React.FC = () => {
+const EcogestureSelectionEnd = () => {
const { t } = useI18n()
const navigate = useNavigate()
diff --git a/src/components/EcogestureSelection/EcogestureSelectionModal.tsx b/src/components/EcogestureSelection/EcogestureSelectionModal.tsx
index 644d448fd590e1bea521abc5b0f196c226e663ba..48d2db7aad55c4aad19af5538365e8e5d472be12 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionModal.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionModal.tsx
@@ -11,7 +11,7 @@ interface EcogestureSelectionModalProps {
handleCloseClick: () => void
}
-const EcogestureSelectionModal: React.FC<EcogestureSelectionModalProps> = ({
+const EcogestureSelectionModal = ({
open,
handleCloseClick,
}: EcogestureSelectionModalProps) => {
diff --git a/src/components/EcogestureSelection/EcogestureSelectionRestart.tsx b/src/components/EcogestureSelection/EcogestureSelectionRestart.tsx
index d871c0927aa898232373271d18b4d57915c39f57..33a68a477c8096ced33c5fd8c2f1eb5ca96e1d11 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionRestart.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionRestart.tsx
@@ -11,7 +11,7 @@ interface EcogestureSelectionRestartProps {
restart: () => void
}
-const EcogestureSelectionRestart: React.FC<EcogestureSelectionRestartProps> = ({
+const EcogestureSelectionRestart = ({
listLength,
restart,
}: EcogestureSelectionRestartProps) => {
diff --git a/src/components/Exploration/ExplorationError.tsx b/src/components/Exploration/ExplorationError.tsx
index f1300a16c095cd28bfa0a77fe3132d96a4d4a5e5..efd22f0f0d8e0d33f211531c73bada580a55ac1c 100644
--- a/src/components/Exploration/ExplorationError.tsx
+++ b/src/components/Exploration/ExplorationError.tsx
@@ -1,36 +1,36 @@
-import Button from '@material-ui/core/Button'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import React, { useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
-import './explorationError.scss'
-
-const ExplorationError: React.FC = () => {
- const { t } = useI18n()
- const navigate = useNavigate()
-
- const goBack = useCallback(() => {
- navigate(-1)
- }, [navigate])
-
- return (
- <div className="exploration-error-container">
- <div className="exploration-error-message">
- {t('exploration.global_error')}
- </div>
- <div className="exploration-error-button">
- <Button
- aria-label={t('exploration.accessibility.button_go_back')}
- onClick={goBack}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('exploration.button_go_back')}
- </Button>
- </div>
- </div>
- )
-}
-
-export default ExplorationError
+import Button from '@material-ui/core/Button'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React, { useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+import './explorationError.scss'
+
+const ExplorationError = () => {
+ const { t } = useI18n()
+ const navigate = useNavigate()
+
+ const goBack = useCallback(() => {
+ navigate(-1)
+ }, [navigate])
+
+ return (
+ <div className="exploration-error-container">
+ <div className="exploration-error-message">
+ {t('exploration.global_error')}
+ </div>
+ <div className="exploration-error-button">
+ <Button
+ aria-label={t('exploration.accessibility.button_go_back')}
+ onClick={goBack}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('exploration.button_go_back')}
+ </Button>
+ </div>
+ </div>
+ )
+}
+
+export default ExplorationError
diff --git a/src/components/Exploration/ExplorationFinished.tsx b/src/components/Exploration/ExplorationFinished.tsx
index 09b753bf24cef157536e9c76d17214255ca62a4e..bbc2d5365db2528cd646f224d497c56ba32c63b8 100644
--- a/src/components/Exploration/ExplorationFinished.tsx
+++ b/src/components/Exploration/ExplorationFinished.tsx
@@ -13,7 +13,7 @@ import { useNavigate } from 'react-router-dom'
import ChallengeService from 'services/challenge.service'
import UsageEventService from 'services/usageEvent.service'
import { AppActionsTypes } from 'store'
-import { updateUserChallengeList } from 'store/challenge/challenge.actions'
+import { updateUserChallengeList } from 'store/challenge/challenge.slice'
import { toggleChallengeExplorationNotification } from 'store/global/global.actions'
import './explorationFinished.scss'
@@ -21,9 +21,7 @@ interface ExplorationFinishedProps {
userChallenge: UserChallenge
}
-const ExplorationFinished: React.FC<ExplorationFinishedProps> = ({
- userChallenge,
-}: ExplorationFinishedProps) => {
+const ExplorationFinished = ({ userChallenge }: ExplorationFinishedProps) => {
const client: Client = useClient()
const { t } = useI18n()
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
diff --git a/src/components/Exploration/ExplorationOngoing.tsx b/src/components/Exploration/ExplorationOngoing.tsx
index 29eadebfcb8d76af3356bd02dc736665d02c8412..68bec1b732511e1a9d143647131db987522b0771 100644
--- a/src/components/Exploration/ExplorationOngoing.tsx
+++ b/src/components/Exploration/ExplorationOngoing.tsx
@@ -17,16 +17,14 @@ import { useNavigate } from 'react-router-dom'
import ChallengeService from 'services/challenge.service'
import UsageEventService from 'services/usageEvent.service'
import { AppActionsTypes } from 'store'
-import { updateUserChallengeList } from 'store/challenge/challenge.actions'
+import { updateUserChallengeList } from 'store/challenge/challenge.slice'
import './explorationOngoing.scss'
interface ExplorationOngoingProps {
userChallenge: UserChallenge
}
-const ExplorationOngoing: React.FC<ExplorationOngoingProps> = ({
- userChallenge,
-}: ExplorationOngoingProps) => {
+const ExplorationOngoing = ({ userChallenge }: ExplorationOngoingProps) => {
const client: Client = useClient()
const { t } = useI18n()
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
diff --git a/src/components/Exploration/ExplorationView.tsx b/src/components/Exploration/ExplorationView.tsx
index 34b39786e36aeb7aa18c4b2246f108cfa892b889..b08315fbbd9eb35b9b71449ea4342fb515bb102d 100644
--- a/src/components/Exploration/ExplorationView.tsx
+++ b/src/components/Exploration/ExplorationView.tsx
@@ -1,51 +1,51 @@
-import Content from 'components/Content/Content'
-import CozyBar from 'components/Header/CozyBar'
-import Header from 'components/Header/Header'
-import { UserExplorationState } from 'enum/userExploration.enum'
-import { UserChallenge } from 'models'
-import React, { useCallback, useState } from 'react'
-import { useSelector } from 'react-redux'
-import { AppStore } from 'store'
-import ExplorationError from './ExplorationError'
-import ExplorationFinished from './ExplorationFinished'
-import ExplorationOngoing from './ExplorationOngoing'
-
-const ExplorationView: React.FC = () => {
- const [headerHeight, setHeaderHeight] = useState<number>(0)
- const { currentChallenge } = useSelector(
- (state: AppStore) => state.ecolyo.challenge
- )
-
- const defineHeaderHeight = useCallback((height: number) => {
- setHeaderHeight(height)
- }, [])
-
- const renderExploration = (challenge: UserChallenge) => {
- switch (challenge.exploration.state) {
- case UserExplorationState.UNLOCKED:
- case UserExplorationState.ONGOING:
- return <ExplorationOngoing userChallenge={challenge} />
- case UserExplorationState.NOTIFICATION:
- case UserExplorationState.DONE:
- return <ExplorationFinished userChallenge={challenge} />
- default:
- return <ExplorationError />
- }
- }
-
- return (
- <>
- <CozyBar titleKey={'common.title_exploration'} displayBackArrow={true} />
- <Header
- setHeaderHeight={defineHeaderHeight}
- desktopTitleKey={'common.title_exploration'}
- displayBackArrow={true}
- />
- <Content height={headerHeight}>
- {currentChallenge && renderExploration(currentChallenge)}
- </Content>
- </>
- )
-}
-
-export default ExplorationView
+import Content from 'components/Content/Content'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import { UserExplorationState } from 'enum/userExploration.enum'
+import { UserChallenge } from 'models'
+import React, { useCallback, useState } from 'react'
+import { useSelector } from 'react-redux'
+import { AppStore } from 'store'
+import ExplorationError from './ExplorationError'
+import ExplorationFinished from './ExplorationFinished'
+import ExplorationOngoing from './ExplorationOngoing'
+
+const ExplorationView = () => {
+ const [headerHeight, setHeaderHeight] = useState<number>(0)
+ const { currentChallenge } = useSelector(
+ (state: AppStore) => state.ecolyo.challenge
+ )
+
+ const defineHeaderHeight = useCallback((height: number) => {
+ setHeaderHeight(height)
+ }, [])
+
+ const renderExploration = (challenge: UserChallenge) => {
+ switch (challenge.exploration.state) {
+ case UserExplorationState.UNLOCKED:
+ case UserExplorationState.ONGOING:
+ return <ExplorationOngoing userChallenge={challenge} />
+ case UserExplorationState.NOTIFICATION:
+ case UserExplorationState.DONE:
+ return <ExplorationFinished userChallenge={challenge} />
+ default:
+ return <ExplorationError />
+ }
+ }
+
+ return (
+ <>
+ <CozyBar titleKey={'common.title_exploration'} displayBackArrow={true} />
+ <Header
+ setHeaderHeight={defineHeaderHeight}
+ desktopTitleKey={'common.title_exploration'}
+ displayBackArrow={true}
+ />
+ <Content height={headerHeight}>
+ {currentChallenge && renderExploration(currentChallenge)}
+ </Content>
+ </>
+ )
+}
+
+export default ExplorationView
diff --git a/src/components/Export/__snapshots__/exportLoadingModal.spec.tsx.snap b/src/components/Export/__snapshots__/exportLoadingModal.spec.tsx.snap
index 06a7f7c28cb0105bf9f7a5c4b82b63db25a1e8da..75eccb7dc838b92cb8613f13aca93de306ceaf9e 100644
--- a/src/components/Export/__snapshots__/exportLoadingModal.spec.tsx.snap
+++ b/src/components/Export/__snapshots__/exportLoadingModal.spec.tsx.snap
@@ -903,7 +903,7 @@ exports[`ExportLoadingModal component should be rendered correctly 1`] = `
"root": "btn-secondary-negative",
}
}
- onClick={[Function]}
+ onClick={[MockFunction]}
type="submit"
>
<ForwardRef(Button)
@@ -941,7 +941,7 @@ exports[`ExportLoadingModal component should be rendered correctly 1`] = `
"textSizeSmall": "MuiButton-textSizeSmall",
}
}
- onClick={[Function]}
+ onClick={[MockFunction]}
type="submit"
>
<WithStyles(ForwardRef(ButtonBase))
@@ -951,7 +951,7 @@ exports[`ExportLoadingModal component should be rendered correctly 1`] = `
disabled={false}
focusRipple={true}
focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
+ onClick={[MockFunction]}
type="submit"
>
<ForwardRef(ButtonBase)
@@ -968,7 +968,7 @@ exports[`ExportLoadingModal component should be rendered correctly 1`] = `
disabled={false}
focusRipple={true}
focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
+ onClick={[MockFunction]}
type="submit"
>
<button
@@ -976,7 +976,7 @@ exports[`ExportLoadingModal component should be rendered correctly 1`] = `
className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
disabled={false}
onBlur={[Function]}
- onClick={[Function]}
+ onClick={[MockFunction]}
onDragLeave={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
diff --git a/src/components/Export/exportDoneModal.tsx b/src/components/Export/exportDoneModal.tsx
index ea3bd2bf25c5fd32e270987bae2b015704c89421..4ad5cc4015c3bf8283da9f482da4aec2457220f4 100644
--- a/src/components/Export/exportDoneModal.tsx
+++ b/src/components/Export/exportDoneModal.tsx
@@ -1,93 +1,93 @@
-import { Button, IconButton } from '@material-ui/core'
-import Dialog from '@material-ui/core/Dialog'
-import CloseIcon from 'assets/icons/ico/close.svg'
-import exportDone from 'assets/icons/ico/exportDone.svg'
-import warnCross from 'assets/icons/ico/warn-cross.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import React from 'react'
-import './exportDoneModal.scss'
-
-interface ExportDoneModalProps {
- open: boolean
- error: boolean
- handleCloseClick: () => void
-}
-
-const ExportDoneModal: React.FC<ExportDoneModalProps> = ({
- open,
- error,
- handleCloseClick,
-}: ExportDoneModalProps) => {
- const { t } = useI18n()
-
- return (
- <Dialog
- open={open}
- onClose={handleCloseClick}
- aria-labelledby={'accessibility-title'}
- classes={{
- root: 'modal-root',
- paper: 'modal-paper',
- }}
- >
- <div id={'accessibility-title'}>
- {t('export.modal_done.accessibility_title')}
- </div>
-
- <div className="modal-done-root">
- <div onClick={handleCloseClick}>
- <IconButton
- aria-label={t('export.button_close')}
- className="modal-paper-close-button"
- onClick={handleCloseClick}
- >
- <Icon icon={CloseIcon} size={18} />
- </IconButton>
- </div>
-
- <div className="content">
- <div className="icon-main">
- <Icon icon={error ? warnCross : exportDone} size={44} />
- </div>
- {!error && (
- <>
- <div className="text-16-bold text text1">
- {t('export.modal_done.text1')}
- </div>
- <div className="text-16-normal text">
- {t('export.modal_done.text2')}
- </div>
- </>
- )}
- {error && (
- <>
- <div className="text-20-bold text error1">
- {t('export.modal_done.error1')}
- </div>
- <div className="text-16-bold text">
- {t('export.modal_done.error2')}
- </div>
- </>
- )}
-
- <Button
- aria-label={t('export.modal_done.button_close')}
- onClick={handleCloseClick}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- type="submit"
- >
- {error
- ? t('export.modal_done.button_close_error')
- : t('export.modal_done.button_close')}
- </Button>
- </div>
- </div>
- </Dialog>
- )
-}
-
-export default ExportDoneModal
+import { Button, IconButton } from '@material-ui/core'
+import Dialog from '@material-ui/core/Dialog'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import exportDone from 'assets/icons/ico/exportDone.svg'
+import warnCross from 'assets/icons/ico/warn-cross.svg'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import React from 'react'
+import './exportDoneModal.scss'
+
+interface ExportDoneModalProps {
+ open: boolean
+ error: boolean
+ handleCloseClick: () => void
+}
+
+const ExportDoneModal = ({
+ open,
+ error,
+ handleCloseClick,
+}: ExportDoneModalProps) => {
+ const { t } = useI18n()
+
+ return (
+ <Dialog
+ open={open}
+ onClose={handleCloseClick}
+ aria-labelledby={'accessibility-title'}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper',
+ }}
+ >
+ <div id={'accessibility-title'}>
+ {t('export.modal_done.accessibility_title')}
+ </div>
+
+ <div className="modal-done-root">
+ <div onClick={handleCloseClick}>
+ <IconButton
+ aria-label={t('export.button_close')}
+ className="modal-paper-close-button"
+ onClick={handleCloseClick}
+ >
+ <Icon icon={CloseIcon} size={18} />
+ </IconButton>
+ </div>
+
+ <div className="content">
+ <div className="icon-main">
+ <Icon icon={error ? warnCross : exportDone} size={44} />
+ </div>
+ {!error && (
+ <>
+ <div className="text-16-bold text text1">
+ {t('export.modal_done.text1')}
+ </div>
+ <div className="text-16-normal text">
+ {t('export.modal_done.text2')}
+ </div>
+ </>
+ )}
+ {error && (
+ <>
+ <div className="text-20-bold text error1">
+ {t('export.modal_done.error1')}
+ </div>
+ <div className="text-16-bold text">
+ {t('export.modal_done.error2')}
+ </div>
+ </>
+ )}
+
+ <Button
+ aria-label={t('export.modal_done.button_close')}
+ onClick={handleCloseClick}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-16-bold',
+ }}
+ type="submit"
+ >
+ {error
+ ? t('export.modal_done.button_close_error')
+ : t('export.modal_done.button_close')}
+ </Button>
+ </div>
+ </div>
+ </Dialog>
+ )
+}
+
+export default ExportDoneModal
diff --git a/src/components/Export/exportLoadingModal.tsx b/src/components/Export/exportLoadingModal.tsx
index 516a4a590111256fee86ad08c51baa7b67fc7492..dfce4d8676e4c0a3abee26784e20da6033ba2b2b 100644
--- a/src/components/Export/exportLoadingModal.tsx
+++ b/src/components/Export/exportLoadingModal.tsx
@@ -1,19 +1,30 @@
import { Button, IconButton } from '@material-ui/core'
import Dialog from '@material-ui/core/Dialog'
-import CloseIcon from 'assets/icons/ico/close.svg'
-import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
+import FileSaver from 'file-saver'
+import React, { useCallback, useEffect } from 'react'
+import * as XLSX from 'xlsx'
+
+import CloseIcon from 'assets/icons/ico/close.svg'
+import Loader from 'components/Loader/Loader'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
-import * as FileSaver from 'file-saver'
-import { Datachart, TimePeriod } from 'models'
-import React, { useCallback, useEffect } from 'react'
+import { Datachart, Dataload, TimePeriod } from 'models'
import ConsumptionDataManager from 'services/consumption.service'
-import * as XLSX from 'xlsx'
+import EnedisMonthlyAnalysisDataService from 'services/enedisMonthlyAnalysisData.service'
import './exportLoadingModal.scss'
+interface ExportDataRow {
+ [key: string]: string | number
+}
+
+interface ExportDataSheet {
+ fluidName: string
+ data: ExportDataRow[]
+}
+
interface ExportLoadingModalProps {
open: boolean
handleCloseClick: () => void
@@ -21,7 +32,7 @@ interface ExportLoadingModalProps {
selectedFluids: FluidType[]
}
-const ExportLoadingModal: React.FC<ExportLoadingModalProps> = ({
+const ExportLoadingModal = ({
open,
handleCloseClick,
handleDone,
@@ -34,7 +45,10 @@ const ExportLoadingModal: React.FC<ExportLoadingModalProps> = ({
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
const fileExtension = '.xlsx'
- const exportToXlsx = (exportDataSheets: any, fileName: string) => {
+ const exportToXlsx = (
+ exportDataSheets: ExportDataSheet[],
+ fileName: string
+ ) => {
const wb = XLSX.utils.book_new()
for (const dataSheet of exportDataSheets) {
const ws = XLSX.utils.json_to_sheet(dataSheet.data)
@@ -45,8 +59,44 @@ const ExportLoadingModal: React.FC<ExportLoadingModalProps> = ({
FileSaver.saveAs(data, fileName + fileExtension)
}
- const getExportDataFluid = useCallback(
- async (fluidType: FluidType): Promise<any> => {
+ const buildDataRow = useCallback(
+ async (
+ dataload: Dataload,
+ fluidType: FluidType
+ ): Promise<ExportDataRow> => {
+ const dataRow: ExportDataRow = {}
+ dataRow[t('export.month')] = dataload.date.month
+ .toString()
+ .padStart(2, '0')
+ dataRow[t('export.year')] = dataload.date.year
+ dataRow[
+ `${t('export.consumption')} (${t(
+ 'FLUID.' + FluidType[fluidType] + '.UNIT'
+ )})`
+ ] = dataload.value
+ if (fluidType === FluidType.ELECTRICITY) {
+ const emas = new EnedisMonthlyAnalysisDataService(client)
+ const maxPowerEntities = await emas.getMaxPowerByDate(
+ dataload.date.year,
+ dataload.date.month
+ )
+ if (maxPowerEntities) {
+ const maxLoad = maxPowerEntities.reduce((max, entity) => {
+ if (entity.load > max) {
+ return entity.load
+ }
+ return max
+ }, 0)
+ dataRow[t('export.maxpower')] = maxLoad
+ }
+ }
+ return dataRow
+ },
+ [client, t]
+ )
+
+ const getExportDataSheet = useCallback(
+ async (fluidType: FluidType): Promise<ExportDataSheet | null> => {
const consumptionService = new ConsumptionDataManager(client)
const firstDataDate = await consumptionService.fetchAllFirstDateData(
[fluidType],
@@ -73,45 +123,35 @@ const ExportLoadingModal: React.FC<ExportLoadingModalProps> = ({
true
)
- if (dataLoad?.actualData) {
- const exportDataFluid: any = {}
- exportDataFluid.fluidName = t(
- 'FLUID.' + FluidType[fluidType] + '.LABEL'
- )
- exportDataFluid.data = []
-
- for (const data of dataLoad.actualData) {
- if (data.value != -1) {
- const dataRow: any = {}
- dataRow[t('export.month')] = data.date.month
- .toString()
- .padStart(2, '0')
- dataRow[t('export.year')] = data.date.year
- dataRow[
- `${t('export.consumption')} (${t(
- 'FLUID.' + FluidType[fluidType] + '.UNIT'
- )})`
- ] = data.value
- exportDataFluid.data.push(dataRow)
- }
- }
- return exportDataFluid
+ if (!dataLoad?.actualData) return null
+
+ const exportDataSheet: ExportDataSheet = {
+ fluidName: t('FLUID.' + FluidType[fluidType] + '.LABEL'),
+ data: [],
+ }
+
+ for (const data of dataLoad.actualData) {
+ if (data.value === -1) continue
+ const dataRow = await buildDataRow(data, fluidType)
+ exportDataSheet.data.push(dataRow)
}
- return null
+ return exportDataSheet
},
- [client, t]
+ [buildDataRow, client, t]
)
useEffect(() => {
let subscribed = true
const date = new Date()
- async function exportData(): Promise<void> {
+ const exportData = async (): Promise<void> => {
try {
- const exportDataSheets: any[] = []
+ const exportDataSheets: ExportDataSheet[] = []
for (const fluidType of selectedFluids) {
- const exportDataFluid = await getExportDataFluid(fluidType)
- if (exportDataFluid) exportDataSheets.push(exportDataFluid)
+ const exportDataFluid = await getExportDataSheet(fluidType)
+ if (exportDataFluid) {
+ exportDataSheets.push(exportDataFluid)
+ }
}
await new Promise(r => setTimeout(r, 2000))
if (subscribed) {
@@ -132,7 +172,7 @@ const ExportLoadingModal: React.FC<ExportLoadingModalProps> = ({
return () => {
subscribed = false
}
- }, [client, getExportDataFluid, handleDone, selectedFluids, t])
+ }, [getExportDataSheet, handleDone, selectedFluids])
return (
<Dialog
@@ -142,13 +182,13 @@ const ExportLoadingModal: React.FC<ExportLoadingModalProps> = ({
handleCloseClick()
}
}}
- aria-labelledby={'accessibility-title'}
+ aria-labelledby="accessibility-title"
classes={{
root: 'modal-root',
paper: 'modal-paper',
}}
>
- <div id={'accessibility-title'}>
+ <div id="accessibility-title">
{t('export.modal_loading.accessibility_title')}
</div>
@@ -174,9 +214,7 @@ const ExportLoadingModal: React.FC<ExportLoadingModalProps> = ({
</div>
<Button
aria-label={t('export.modal_loading.button_cancel')}
- onClick={() => {
- handleCloseClick()
- }}
+ onClick={handleCloseClick}
classes={{
root: 'btn-secondary-negative',
label: 'text-16-bold',
diff --git a/src/components/Export/exportStartModal.tsx b/src/components/Export/exportStartModal.tsx
index ef7784cf8855bb95b5d48cc980c474f30ed77abe..f6c87e0beb6acf01a423d540ed0310d26182639b 100644
--- a/src/components/Export/exportStartModal.tsx
+++ b/src/components/Export/exportStartModal.tsx
@@ -1,88 +1,88 @@
-import { Button, IconButton } from '@material-ui/core'
-import Dialog from '@material-ui/core/Dialog'
-import CloseIcon from 'assets/icons/ico/close.svg'
-import download from 'assets/icons/ico/download.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import React from 'react'
-import './exportStartModal.scss'
-
-interface ExportStartModalProps {
- open: boolean
- handleCloseClick: () => void
- handleDownloadClick: () => void
-}
-
-const ExportStartModal: React.FC<ExportStartModalProps> = ({
- open,
- handleCloseClick,
- handleDownloadClick,
-}: ExportStartModalProps) => {
- const { t } = useI18n()
-
- return (
- <Dialog
- open={open}
- onClose={handleCloseClick}
- aria-labelledby={'accessibility_title'}
- classes={{
- root: 'modal-root',
- paper: 'modal-paper',
- }}
- >
- <div id={'accessibility-title'}>
- {t('export.modal_start.accessibility_title')}
- </div>
- <div className="modal-start-root">
- <div onClick={handleCloseClick}>
- <IconButton
- aria-label={t('export.button_close')}
- className="modal-paper-close-button"
- onClick={handleCloseClick}
- >
- <Icon icon={CloseIcon} size={18} />
- </IconButton>
- </div>
- <div className="content">
- <div className="icon-main">
- <Icon icon={download} size={48} />
- </div>
- <div className="text-16-bold text text1">
- {t('export.modal_start.text1')}
- </div>
- <div className="text-16-normal text">
- {t('export.modal_start.text2')}
- <br />
- {t('export.modal_start.text3')}
- </div>
- <div className="buttons">
- <Button
- aria-label={t('export.modal_start.button_cancel')}
- onClick={handleCloseClick}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-bold',
- }}
- type="submit"
- >
- {t('export.modal_start.button_cancel')}
- </Button>
- <Button
- aria-label={t('export.button_download')}
- onClick={handleDownloadClick}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- type="submit"
- >
- {t('export.button_download')}
- </Button>
- </div>
- </div>
- </div>
- </Dialog>
- )
-}
-
-export default ExportStartModal
+import { Button, IconButton } from '@material-ui/core'
+import Dialog from '@material-ui/core/Dialog'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import download from 'assets/icons/ico/download.svg'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import React from 'react'
+import './exportStartModal.scss'
+
+interface ExportStartModalProps {
+ open: boolean
+ handleCloseClick: () => void
+ handleDownloadClick: () => void
+}
+
+const ExportStartModal = ({
+ open,
+ handleCloseClick,
+ handleDownloadClick,
+}: ExportStartModalProps) => {
+ const { t } = useI18n()
+
+ return (
+ <Dialog
+ open={open}
+ onClose={handleCloseClick}
+ aria-labelledby={'accessibility_title'}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper',
+ }}
+ >
+ <div id={'accessibility-title'}>
+ {t('export.modal_start.accessibility_title')}
+ </div>
+ <div className="modal-start-root">
+ <div onClick={handleCloseClick}>
+ <IconButton
+ aria-label={t('export.button_close')}
+ className="modal-paper-close-button"
+ onClick={handleCloseClick}
+ >
+ <Icon icon={CloseIcon} size={18} />
+ </IconButton>
+ </div>
+ <div className="content">
+ <div className="icon-main">
+ <Icon icon={download} size={48} />
+ </div>
+ <div className="text-16-bold text text1">
+ {t('export.modal_start.text1')}
+ </div>
+ <div className="text-16-normal text">
+ {t('export.modal_start.text2')}
+ <br />
+ {t('export.modal_start.text3')}
+ </div>
+ <div className="buttons">
+ <Button
+ aria-label={t('export.modal_start.button_cancel')}
+ onClick={handleCloseClick}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-bold',
+ }}
+ type="submit"
+ >
+ {t('export.modal_start.button_cancel')}
+ </Button>
+ <Button
+ aria-label={t('export.button_download')}
+ onClick={handleDownloadClick}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-16-bold',
+ }}
+ type="submit"
+ >
+ {t('export.button_download')}
+ </Button>
+ </div>
+ </div>
+ </div>
+ </Dialog>
+ )
+}
+
+export default ExportStartModal
diff --git a/src/components/Feedback/FeedbackModal.spec.tsx b/src/components/Feedback/FeedbackModal.spec.tsx
index 9b51acb66e2c99983e009d128924f86d8d4b6041..5f3afdd466a9dd5add00245557cbd75e9e07b5bf 100644
--- a/src/components/Feedback/FeedbackModal.spec.tsx
+++ b/src/components/Feedback/FeedbackModal.spec.tsx
@@ -1,11 +1,11 @@
import FeedbackModal from 'components/Feedback/FeedbackModal'
import { mount } from 'enzyme'
import React from 'react'
-import { act } from 'react-dom/test-utils'
import * as reactRedux from 'react-redux'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'
import { createMockEcolyoStore } from '../../../tests/__mocks__/store'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import { userChallengeExplo1OnGoing } from '../../../tests/__mocks__/userChallengeData.mock'
// Value coming from jest.config
@@ -73,10 +73,7 @@ describe('FeedbackModal functionalities', () => {
</BrowserRouter>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
wrapper.find('.modal-paper-close-button').first().simulate('click')
expect(handleFeedbackModalClose).toHaveBeenCalledTimes(1)
diff --git a/src/components/Feedback/FeedbackModal.tsx b/src/components/Feedback/FeedbackModal.tsx
index fef7c2595fb456e5b048826084672ba0e5d366ba..e3858f129f868e2fd709e2dc1204071768ebd897 100644
--- a/src/components/Feedback/FeedbackModal.tsx
+++ b/src/components/Feedback/FeedbackModal.tsx
@@ -19,10 +19,7 @@ interface FeedbackModalProps {
handleCloseClick: () => void
}
-const FeedbackModal: React.FC<FeedbackModalProps> = ({
- open,
- handleCloseClick,
-}: FeedbackModalProps) => {
+const FeedbackModal = ({ open, handleCloseClick }: FeedbackModalProps) => {
const { t }: IuseI18n = useI18n()
const client: Client = useClient()
const [, setValidExploration] = useExploration()
diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx
index 07e1410146986120f7a6024b7cc3081fdd5eaed1..158f05147fa75b80d0ee524d3fa1d24be833e13a 100644
--- a/src/components/FluidChart/FluidChart.tsx
+++ b/src/components/FluidChart/FluidChart.tsx
@@ -25,7 +25,7 @@ import {
setShowOfflineData,
} from 'store/chart/chart.slice'
import { openConnectionModal } from 'store/modal/modal.slice'
-import { getKonnectorSlug, isKonnectorActive } from 'utils/utils'
+import { getFluidName, getKonnectorSlug, isKonnectorActive } from 'utils/utils'
import FluidChartSwipe from './FluidChartSwipe'
import './fluidChart.scss'
@@ -34,10 +34,7 @@ interface FluidChartProps {
setActive: React.Dispatch<React.SetStateAction<boolean>>
}
-const FluidChart: React.FC<FluidChartProps> = ({
- fluidType,
- setActive,
-}: FluidChartProps) => {
+const FluidChart = ({ fluidType, setActive }: FluidChartProps) => {
const { t } = useI18n()
const client = useClient()
const {
@@ -50,20 +47,18 @@ const FluidChart: React.FC<FluidChartProps> = ({
const currentFluidStatus = fluidStatus[fluidType]
const isFluidConnected = isKonnectorActive(fluidStatus, fluidType)
const [, setValidExploration] = useExploration()
- // TODO use chart.loading ?
- const [isLoaded, setIsLoaded] = useState<boolean>(false)
const [containsHalfHourData, setContainsHalfHourData] =
useState<boolean>(false)
const lowercaseTimeStep = TimeStep[currentTimeStep].toLowerCase()
- const lowercaseFluidType = FluidType[fluidType].toLowerCase()
+ const lowercaseFluidType = getFluidName(fluidType)
const handleChangeSwitch = async () => {
if (!showCompare) {
await UsageEventService.addEvent(client, {
type: UsageEventType.CONSUMPTION_COMPARE_EVENT,
target: TimeStep[currentTimeStep].toLowerCase(),
- context: FluidType[fluidType].toLowerCase(),
+ context: lowercaseFluidType,
})
}
dispatch(setShowCompare(!showCompare))
@@ -72,8 +67,8 @@ const FluidChart: React.FC<FluidChartProps> = ({
useEffect(() => {
let subscribed = true
async function loadData() {
- const consumptionService = new ConsumptionService(client)
if (fluidType === FluidType.ELECTRICITY) {
+ const consumptionService = new ConsumptionService(client)
const halfHourData = await consumptionService.checkDoctypeEntries(
FluidType.ELECTRICITY,
TimeStep.HALF_AN_HOUR
@@ -82,12 +77,8 @@ const FluidChart: React.FC<FluidChartProps> = ({
setContainsHalfHourData(true)
}
}
- if (subscribed) {
- setIsLoaded(true)
- }
}
-
- loadData()
+ subscribed && loadData()
return () => {
subscribed = false
@@ -175,45 +166,38 @@ const FluidChart: React.FC<FluidChartProps> = ({
)
return (
- <>
- {isLoaded && (
- <div className="fluidchart-root">
- {!isFluidConnected && <LastDataValid />}
- {currentTimeStep === TimeStep.HALF_AN_HOUR &&
- !containsHalfHourData ? (
- <HalfHourNoData />
- ) : (
- <>
- <div className="fluidchart-content">
- <FluidChartSwipe fluidType={fluidType} setActive={setActive} />
- </div>
- {showCompare && currentTimeStep !== TimeStep.YEAR && (
- <DisplayLegend />
- )}
- </>
- )}
- <TimeStepSelector fluidType={fluidType} />
- {currentTimeStep !== TimeStep.YEAR && (
- <div className="fluidchart-footer" onClick={handleChangeSwitch}>
- <div className="fluidchart-footer-compare text-15-normal">
- <StyledSwitch
- fluidType={fluidType}
- checked={showCompare}
- inputProps={{
- 'aria-label': t(
- 'consumption.accessibility.checkbox_compare'
- ),
- }}
- />
- <span className="fluidchart-footer-label graph-switch-text">
- {t(`timestep.${lowercaseTimeStep}.comparelabel`)}
- </span>
- </div>
- </div>
+ <div className="fluidchart-root">
+ {!isFluidConnected && <LastDataValid />}
+ {currentTimeStep === TimeStep.HALF_AN_HOUR && !containsHalfHourData ? (
+ <HalfHourNoData />
+ ) : (
+ <>
+ <div className="fluidchart-content">
+ <FluidChartSwipe fluidType={fluidType} setActive={setActive} />
+ </div>
+ {showCompare && currentTimeStep !== TimeStep.YEAR && (
+ <DisplayLegend />
)}
+ </>
+ )}
+ <TimeStepSelector fluidType={fluidType} />
+ {currentTimeStep !== TimeStep.YEAR && (
+ <div className="fluidchart-footer" onClick={handleChangeSwitch}>
+ <div className="fluidchart-footer-compare text-15-normal">
+ <StyledSwitch
+ fluidType={fluidType}
+ checked={showCompare}
+ inputProps={{
+ 'aria-label': t('consumption.accessibility.checkbox_compare'),
+ }}
+ />
+ <span className="fluidchart-footer-label graph-switch-text">
+ {t(`timestep.${lowercaseTimeStep}.comparelabel`)}
+ </span>
+ </div>
</div>
)}
- </>
+ </div>
)
}
diff --git a/src/components/FluidChart/FluidChartSlide.tsx b/src/components/FluidChart/FluidChartSlide.tsx
index 071210de4126f43f2795b199ca5d5b1114ab70d4..3218478982d6992111d99ad95b292aa6ccfb8634 100644
--- a/src/components/FluidChart/FluidChartSlide.tsx
+++ b/src/components/FluidChart/FluidChartSlide.tsx
@@ -23,7 +23,7 @@ interface FluidChartSlideProps {
setActive: React.Dispatch<React.SetStateAction<boolean>>
}
-const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
+const FluidChartSlide = ({
index,
fluidType,
width,
diff --git a/src/components/FluidChart/FluidChartSwipe.tsx b/src/components/FluidChart/FluidChartSwipe.tsx
index 53d927fe18e36717419bffa5a24f6ec0dbf19cc8..403d914b9de79fbe1cd75fbc1e6f86951a41d147 100644
--- a/src/components/FluidChart/FluidChartSwipe.tsx
+++ b/src/components/FluidChart/FluidChartSwipe.tsx
@@ -18,10 +18,7 @@ interface FluidChartSwipeProps {
setActive: React.Dispatch<React.SetStateAction<boolean>>
}
-const FluidChartSwipe: React.FC<FluidChartSwipeProps> = ({
- fluidType,
- setActive,
-}: FluidChartSwipeProps) => {
+const FluidChartSwipe = ({ fluidType, setActive }: FluidChartSwipeProps) => {
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
const { currentIndex, currentTimeStep, selectedDate, loading } = useSelector(
(state: AppStore) => state.ecolyo.chart
@@ -45,7 +42,7 @@ const FluidChartSwipe: React.FC<FluidChartSwipeProps> = ({
currentIndex
)
}
- const updatedDate: DateTime = dateChartService.incrementeDate(
+ const updatedDate: DateTime = dateChartService.incrementDate(
currentTimeStep,
selectedDate,
increment
@@ -58,7 +55,7 @@ const FluidChartSwipe: React.FC<FluidChartSwipeProps> = ({
dispatch(setCurrentIndex(updatedIndex))
}
- const { height, width } = useChartResize(swipe, 300, 940, loading)
+ const { height, width } = useChartResize(swipe, loading)
useEffect(() => {
function initIndex() {
diff --git a/src/components/FormGlobal/FormNavigation.tsx b/src/components/FormGlobal/FormNavigation.tsx
index 00bdd37a0eddc3f13dd6ef1d8873c6b0273f16a3..7fab173bf4a8ba170aa9aca3d90ececc45fb8f71 100644
--- a/src/components/FormGlobal/FormNavigation.tsx
+++ b/src/components/FormGlobal/FormNavigation.tsx
@@ -1,98 +1,98 @@
-import Button from '@material-ui/core/Button'
-import classNames from 'classnames'
-import 'components/FormGlobal/formNavigation.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { EcogestureStepForm } from 'enum/ecogestureForm.enum'
-import { ProfileTypeStepForm } from 'enum/profileType.enum'
-import { SgeStep } from 'enum/sgeStep.enum'
-import React, { useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
-
-interface FormNavigationProps {
- step: ProfileTypeStepForm | EcogestureStepForm | SgeStep
- handlePrevious: () => void
- handleNext: () => void
- disableNextButton: boolean
- disablePrevButton?: boolean
- isEcogesture?: boolean
- isLastConnectStep?: boolean
- isLoading?: boolean
-}
-
-const FormNavigation: React.FC<FormNavigationProps> = ({
- step,
- handlePrevious,
- handleNext,
- disableNextButton,
- disablePrevButton,
- isEcogesture,
- isLastConnectStep,
- isLoading,
-}: FormNavigationProps) => {
- const { t } = useI18n()
- const navigate = useNavigate()
- const handlePreviousClick = () => {
- handlePrevious()
- }
- const handleNextClick = () => {
- handleNext()
- // handle go back to connect for SGE
- if (isLastConnectStep) {
- navigate('/consumption/electricity')
- }
- }
-
- const getSecondButtonLabel = useCallback(() => {
- if (isLoading) {
- return t('profile_type.form.button_loading')
- } else if (
- isLastConnectStep ||
- step === ProfileTypeStepForm.UPDATE_DATE ||
- (step === EcogestureStepForm.EQUIPMENTS && isEcogesture)
- ) {
- return t('profile_type.form.button_end')
- } else {
- return `${t('profile_type.form.button_next')} >`
- }
- }, [isEcogesture, isLastConnectStep, isLoading, step, t])
-
- return (
- <div className="profile-navigation">
- <Button
- aria-label={t('profile_type.accessibility.button_previous')}
- onClick={handlePreviousClick}
- className={'profile-navigation-button'}
- disabled={
- disablePrevButton || step === ProfileTypeStepForm.HOUSING_TYPE
- }
- classes={{
- root: 'btn-profile-back',
- label: 'text-16-bold',
- }}
- >
- {`< ${t('profile_type.form.button_previous')}`}
- </Button>
- <Button
- aria-label={
- step === ProfileTypeStepForm.UPDATE_DATE ||
- (step === EcogestureStepForm.EQUIPMENTS && isEcogesture)
- ? t('profile_type.accessibility.button_end')
- : t('profile_type.accessibility.button_next')
- }
- onClick={handleNextClick}
- className={classNames('profile-navigation-button', {
- ['disabled']: disableNextButton,
- })}
- disabled={disableNextButton}
- classes={{
- root: 'btn-profile-next',
- label: 'text-16-bold',
- }}
- >
- {getSecondButtonLabel()}
- </Button>
- </div>
- )
-}
-
-export default FormNavigation
+import Button from '@material-ui/core/Button'
+import classNames from 'classnames'
+import 'components/FormGlobal/formNavigation.scss'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { EcogestureStepForm } from 'enum/ecogestureForm.enum'
+import { ProfileTypeStepForm } from 'enum/profileType.enum'
+import { SgeStep } from 'enum/sgeStep.enum'
+import React, { useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+interface FormNavigationProps {
+ step: ProfileTypeStepForm | EcogestureStepForm | SgeStep
+ handlePrevious: () => void
+ handleNext: () => void
+ disableNextButton: boolean
+ disablePrevButton?: boolean
+ isEcogesture?: boolean
+ isLastConnectStep?: boolean
+ isLoading?: boolean
+}
+
+const FormNavigation = ({
+ step,
+ handlePrevious,
+ handleNext,
+ disableNextButton,
+ disablePrevButton,
+ isEcogesture,
+ isLastConnectStep,
+ isLoading,
+}: FormNavigationProps) => {
+ const { t } = useI18n()
+ const navigate = useNavigate()
+ const handlePreviousClick = () => {
+ handlePrevious()
+ }
+ const handleNextClick = () => {
+ handleNext()
+ // handle go back to connect for SGE
+ if (isLastConnectStep) {
+ navigate('/consumption/electricity')
+ }
+ }
+
+ const getSecondButtonLabel = useCallback(() => {
+ if (isLoading) {
+ return t('profile_type.form.button_loading')
+ } else if (
+ isLastConnectStep ||
+ step === ProfileTypeStepForm.UPDATE_DATE ||
+ (step === EcogestureStepForm.EQUIPMENTS && isEcogesture)
+ ) {
+ return t('profile_type.form.button_end')
+ } else {
+ return `${t('profile_type.form.button_next')} >`
+ }
+ }, [isEcogesture, isLastConnectStep, isLoading, step, t])
+
+ return (
+ <div className="profile-navigation">
+ <Button
+ aria-label={t('profile_type.accessibility.button_previous')}
+ onClick={handlePreviousClick}
+ className={'profile-navigation-button'}
+ disabled={
+ disablePrevButton || step === ProfileTypeStepForm.HOUSING_TYPE
+ }
+ classes={{
+ root: 'btn-profile-back',
+ label: 'text-16-bold',
+ }}
+ >
+ {`< ${t('profile_type.form.button_previous')}`}
+ </Button>
+ <Button
+ aria-label={
+ step === ProfileTypeStepForm.UPDATE_DATE ||
+ (step === EcogestureStepForm.EQUIPMENTS && isEcogesture)
+ ? t('profile_type.accessibility.button_end')
+ : t('profile_type.accessibility.button_next')
+ }
+ onClick={handleNextClick}
+ className={classNames('profile-navigation-button', {
+ ['disabled']: disableNextButton,
+ })}
+ disabled={disableNextButton}
+ classes={{
+ root: 'btn-profile-next',
+ label: 'text-16-bold',
+ }}
+ >
+ {getSecondButtonLabel()}
+ </Button>
+ </div>
+ )
+}
+
+export default FormNavigation
diff --git a/src/components/FormGlobal/FormProgress.tsx b/src/components/FormGlobal/FormProgress.tsx
index 0d3944d01c49f36ae917199b33d702c3a7524655..5971e430756d9f4cc4addd159d6a0b6685b4c652 100644
--- a/src/components/FormGlobal/FormProgress.tsx
+++ b/src/components/FormGlobal/FormProgress.tsx
@@ -8,10 +8,7 @@ interface FormProgressProps {
formType: 'sge' | 'profile'
}
-const FormProgress: React.FC<FormProgressProps> = ({
- step,
- formType,
-}: FormProgressProps) => {
+const FormProgress = ({ step, formType }: FormProgressProps) => {
const getProgress = () => {
const total: number =
Object.values(formType === 'sge' ? SgeStep : ProfileTypeStepForm).length /
diff --git a/src/components/Header/CozyBar.spec.tsx b/src/components/Header/CozyBar.spec.tsx
index aa2e081dd9d2a6b4a4e93048cd88cb63393167e9..ab4141b207c6db69ee6bb5faa4d3d95e7ea2ff99 100644
--- a/src/components/Header/CozyBar.spec.tsx
+++ b/src/components/Header/CozyBar.spec.tsx
@@ -1,85 +1,108 @@
-// jest.mock('cozy-ui/transpiled/react/I18n', () => {
-// return {
-// useI18n: jest.fn(() => {
-// return {
-// t: (str: string) => str,
-// }
-// }),
-// }
-// })
+import CozyBar from 'components/Header/CozyBar'
+import { ScreenType } from 'enum/screen.enum'
+import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
+import React from 'react'
+import { Provider } from 'react-redux'
+import configureStore from 'redux-mock-store'
+import * as ModalAction from 'store/modal/modal.slice'
+import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
-// const mockedNavigate = jest.fn()
-// jest.mock('react-router-dom', () => ({
-// ...jest.requireActual('react-router-dom'),
-// useNavigate: () => mockedNavigate,
-// }))
+interface BarProps {
+ children: React.ReactNode
+}
-// const mockStore = configureStore([])
+jest.mock('utils/cozyBar', () => {
+ return {
+ BarLeft: ({ children }: BarProps) => children,
+ BarCenter: ({ children }: BarProps) => children,
+ BarRight: ({ children }: BarProps) => children,
+ }
+})
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+
+const mockedNavigate = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+}))
+
+const mockStore = configureStore([])
describe('CozyBar component', () => {
- // TODO: fix CozyBar tests
- it('should be tested correctly later', () => {
- expect(true).toBe(true)
+ const store = mockStore({
+ ecolyo: {
+ global: globalStateData,
+ },
+ })
+ it('should be rendered correctly without without left arrow', () => {
+ const wrapper = mount(
+ <Provider store={store}>
+ <CozyBar />
+ </Provider>
+ )
+ expect(toJson(wrapper)).toMatchSnapshot()
})
- // it('should be rendered correctly', () => {
- // const store = mockStore({
- // ecolyo: {
- // global: globalStateData,
- // },
- // })
- // const wrapper = mount(
- // <Provider store={store}>
- // <CozyBar />
- // </Provider>
- // )
- // expect(wrapper.find('BarCenter')).toHaveLength(1)
- // expect(wrapper.find('BarRight')).toHaveLength(1)
- // })
- // it('should call handleClickBack when back button is clicked', () => {
- // const store = mockStore({
- // ecolyo: {
- // global: globalStateData,
- // },
- // })
- // const wrapper = mount(
- // <Provider store={store}>
- // <CozyBar displayBackArrow={true} />
- // </Provider>
- // )
- // expect(wrapper.find('BarLeft')).toHaveLength(1)
- // wrapper.find('BarLeft').find('.cv-button').first().simulate('click')
- // expect(mockedNavigate).toHaveBeenCalled()
- // })
+ describe('should test displayBackArrow', () => {
+ it('should call navigate(-1) when back button is clicked and no function is provided', () => {
+ const wrapper = mount(
+ <Provider store={store}>
+ <CozyBar displayBackArrow={true} />
+ </Provider>
+ )
+ expect(toJson(wrapper)).toMatchSnapshot()
+ expect(wrapper.find('BarLeft')).toHaveLength(1)
+ wrapper.find('BarLeft').find('.cv-button').first().simulate('click')
+ expect(mockedNavigate).toHaveBeenCalled()
+ })
- // it('should call handleClickFeedbacks when feedback button is clicked', () => {
- // const store = mockStore({
- // ecolyo: {
- // global: globalStateData,
- // modal: modalStateData,
- // },
- // })
- // const wrapper = mount(
- // <Provider store={store}>
- // <CozyBar />
- // </Provider>
- // )
- // const updateModalSpy = jest.spyOn(ModalAction, 'openFeedbackModal')
- // wrapper.find('BarRight').find('.cv-button').first().simulate('click')
- // expect(updateModalSpy).toHaveBeenCalledWith(true)
- // })
+ it('should call backFunction() when back button is clicked and function is provided', () => {
+ const mockBackFunction = jest.fn()
+ const wrapper = mount(
+ <Provider store={store}>
+ <CozyBar displayBackArrow={true} backFunction={mockBackFunction} />
+ </Provider>
+ )
+ expect(toJson(wrapper)).toMatchSnapshot()
+ expect(wrapper.find('BarLeft')).toHaveLength(1)
+ wrapper.find('BarLeft').find('.cv-button').first().simulate('click')
+ expect(mockBackFunction).toHaveBeenCalled()
+ })
+ })
- // it('should not be rendered with screen type different from mobile', () => {
- // const store = mockStore({
- // ecolyo: {
- // global: { ...globalStateData, screenType: ScreenType.DESKTOP },
- // },
- // })
- // const wrapper = mount(
- // <Provider store={store}>
- // <CozyBar />
- // </Provider>
- // )
- // expect(wrapper).toEqual({})
- // })
+ it('should call handleClickFeedbacks when feedback button is clicked', () => {
+ const wrapper = mount(
+ <Provider store={store}>
+ <CozyBar />
+ </Provider>
+ )
+ const updateModalSpy = jest.spyOn(ModalAction, 'openFeedbackModal')
+ wrapper.find('BarRight').find('.cv-button').first().simulate('click')
+ expect(updateModalSpy).toHaveBeenCalledWith(true)
+ })
+
+ it('should not be rendered with screen type different from mobile', () => {
+ const store = mockStore({
+ ecolyo: {
+ global: { ...globalStateData, screenType: ScreenType.DESKTOP },
+ },
+ })
+ const wrapper = mount(
+ <Provider store={store}>
+ <CozyBar />
+ </Provider>
+ )
+ // Snapshot should be empty
+ expect(toJson(wrapper)).toMatchSnapshot()
+ })
})
diff --git a/src/components/Header/CozyBar.tsx b/src/components/Header/CozyBar.tsx
index c6343450b6ccff03eddd56ea253ee64bff00307a..0c0ca007800e0706f7ab72ee5cfa920daa857694 100644
--- a/src/components/Header/CozyBar.tsx
+++ b/src/components/Header/CozyBar.tsx
@@ -40,41 +40,38 @@ const CozyBar = ({
dispatch(openFeedbackModal(true))
}
- const cozyBarCustom = (screen?: ScreenType) => {
- if (screen === ScreenType.MOBILE) {
- return (
- <>
- {displayBackArrow && (
- <BarLeft>
- <StyledIconButton
- aria-label={t('header.accessibility.button_back')}
- className="cv-button"
- icon={BackArrowIcon}
- onClick={handleClickBack}
- />
- </BarLeft>
- )}
- <BarCenter>
- <div className="cozy-bar">
- <span className="app-title">{t(titleKey)}</span>
- </div>
- </BarCenter>
- <BarRight>
+ if (screenType === ScreenType.MOBILE) {
+ return (
+ <>
+ {displayBackArrow && (
+ <BarLeft>
<StyledIconButton
- aria-label={t('header.accessibility.button_open_feedbacks')}
+ aria-label={t('header.accessibility.button_back')}
className="cv-button"
- icon={FeedbackIcon}
- sized={22}
- onClick={handleClickFeedbacks}
+ icon={BackArrowIcon}
+ onClick={handleClickBack}
/>
- </BarRight>
- </>
- )
- }
+ </BarLeft>
+ )}
+ <BarCenter>
+ <div className="cozy-bar">
+ <span className="app-title">{t(titleKey)}</span>
+ </div>
+ </BarCenter>
+ <BarRight>
+ <StyledIconButton
+ aria-label={t('header.accessibility.button_open_feedbacks')}
+ className="cv-button"
+ icon={FeedbackIcon}
+ sized={22}
+ onClick={handleClickFeedbacks}
+ />
+ </BarRight>
+ </>
+ )
+ } else {
return null
}
-
- return cozyBarCustom(screenType)
}
export default CozyBar
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index d2e574b89b3f42c68a538f9d406921bd757ed06a..428868001f84e7c0efb8d60e5c46008e4e4c73b8 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -15,19 +15,20 @@ interface HeaderProps {
/** translation key used as t('key.value') */
desktopTitleKey: string
displayBackArrow?: boolean
+ /** additional information to put below the main header */
children?: React.ReactNode
setHeaderHeight(height: number): void
backFunction?: () => void
}
/** Header for desktop view */
-const Header: React.FC<HeaderProps> = ({
+const Header = ({
desktopTitleKey,
displayBackArrow,
children,
setHeaderHeight,
backFunction,
-}) => {
+}: HeaderProps) => {
const { t } = useI18n()
const navigate = useNavigate()
const header = useRef<HTMLDivElement>(null)
diff --git a/src/components/Header/__snapshots__/CozyBar.spec.tsx.snap b/src/components/Header/__snapshots__/CozyBar.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..203c46d610d5c449180df735cdf3d35d193f911e
--- /dev/null
+++ b/src/components/Header/__snapshots__/CozyBar.spec.tsx.snap
@@ -0,0 +1,878 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CozyBar component should be rendered correctly without without left arrow 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <CozyBar>
+ <BarCenter>
+ <div
+ className="cozy-bar"
+ >
+ <span
+ className="app-title"
+ >
+ common.title_app
+ </span>
+ </div>
+ </BarCenter>
+ <BarRight>
+ <StyledIconButton
+ aria-label="header.accessibility.button_open_feedbacks"
+ className="cv-button"
+ icon="test-file-stub"
+ onClick={[Function]}
+ sized={22}
+ >
+ <WithStyles(WithStyles(ForwardRef(IconButton)))
+ aria-label="header.accessibility.button_open_feedbacks"
+ className="cv-button"
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(IconButton))
+ aria-label="header.accessibility.button_open_feedbacks"
+ className="cv-button"
+ classes={
+ Object {
+ "root": "WithStyles(ForwardRef(IconButton))-root-1",
+ }
+ }
+ onClick={[Function]}
+ >
+ <ForwardRef(IconButton)
+ aria-label="header.accessibility.button_open_feedbacks"
+ className="cv-button"
+ classes={
+ Object {
+ "colorInherit": "MuiIconButton-colorInherit",
+ "colorPrimary": "MuiIconButton-colorPrimary",
+ "colorSecondary": "MuiIconButton-colorSecondary",
+ "disabled": "Mui-disabled",
+ "edgeEnd": "MuiIconButton-edgeEnd",
+ "edgeStart": "MuiIconButton-edgeStart",
+ "label": "MuiIconButton-label",
+ "root": "MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="header.accessibility.button_open_feedbacks"
+ centerRipple={true}
+ className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="header.accessibility.button_open_feedbacks"
+ centerRipple={true}
+ className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <button
+ aria-label="header.accessibility.button_open_feedbacks"
+ className="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
+ 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"
+ >
+ <StyledIcon
+ icon="test-file-stub"
+ size={22}
+ >
+ <Icon
+ aria-hidden={true}
+ icon="test-file-stub"
+ size={22}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={22}
+ style={Object {}}
+ width={22}
+ >
+ <svg
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={22}
+ style={Object {}}
+ width={22}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ </span>
+ <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)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(IconButton)>
+ </WithStyles(ForwardRef(IconButton))>
+ </WithStyles(WithStyles(ForwardRef(IconButton)))>
+ </StyledIconButton>
+ </BarRight>
+ </CozyBar>
+</Provider>
+`;
+
+exports[`CozyBar component should not be rendered with screen type different from mobile 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <CozyBar />
+</Provider>
+`;
+
+exports[`CozyBar component should test displayBackArrow should call backFunction() when back button is clicked and function is provided 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <CozyBar
+ backFunction={[MockFunction]}
+ displayBackArrow={true}
+ >
+ <BarLeft>
+ <StyledIconButton
+ aria-label="header.accessibility.button_back"
+ className="cv-button"
+ icon="test-file-stub"
+ onClick={[Function]}
+ >
+ <WithStyles(WithStyles(ForwardRef(IconButton)))
+ aria-label="header.accessibility.button_back"
+ className="cv-button"
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(IconButton))
+ aria-label="header.accessibility.button_back"
+ className="cv-button"
+ classes={
+ Object {
+ "root": "WithStyles(ForwardRef(IconButton))-root-1",
+ }
+ }
+ onClick={[Function]}
+ >
+ <ForwardRef(IconButton)
+ aria-label="header.accessibility.button_back"
+ className="cv-button"
+ classes={
+ Object {
+ "colorInherit": "MuiIconButton-colorInherit",
+ "colorPrimary": "MuiIconButton-colorPrimary",
+ "colorSecondary": "MuiIconButton-colorSecondary",
+ "disabled": "Mui-disabled",
+ "edgeEnd": "MuiIconButton-edgeEnd",
+ "edgeStart": "MuiIconButton-edgeStart",
+ "label": "MuiIconButton-label",
+ "root": "MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="header.accessibility.button_back"
+ centerRipple={true}
+ className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="header.accessibility.button_back"
+ centerRipple={true}
+ className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <button
+ aria-label="header.accessibility.button_back"
+ className="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
+ 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"
+ >
+ <StyledIcon
+ icon="test-file-stub"
+ size={16}
+ >
+ <Icon
+ aria-hidden={true}
+ icon="test-file-stub"
+ size={16}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <svg
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ </span>
+ <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)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(IconButton)>
+ </WithStyles(ForwardRef(IconButton))>
+ </WithStyles(WithStyles(ForwardRef(IconButton)))>
+ </StyledIconButton>
+ </BarLeft>
+ <BarCenter>
+ <div
+ className="cozy-bar"
+ >
+ <span
+ className="app-title"
+ >
+ common.title_app
+ </span>
+ </div>
+ </BarCenter>
+ <BarRight>
+ <StyledIconButton
+ aria-label="header.accessibility.button_open_feedbacks"
+ className="cv-button"
+ icon="test-file-stub"
+ onClick={[Function]}
+ sized={22}
+ >
+ <WithStyles(WithStyles(ForwardRef(IconButton)))
+ aria-label="header.accessibility.button_open_feedbacks"
+ className="cv-button"
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(IconButton))
+ aria-label="header.accessibility.button_open_feedbacks"
+ className="cv-button"
+ classes={
+ Object {
+ "root": "WithStyles(ForwardRef(IconButton))-root-1",
+ }
+ }
+ onClick={[Function]}
+ >
+ <ForwardRef(IconButton)
+ aria-label="header.accessibility.button_open_feedbacks"
+ className="cv-button"
+ classes={
+ Object {
+ "colorInherit": "MuiIconButton-colorInherit",
+ "colorPrimary": "MuiIconButton-colorPrimary",
+ "colorSecondary": "MuiIconButton-colorSecondary",
+ "disabled": "Mui-disabled",
+ "edgeEnd": "MuiIconButton-edgeEnd",
+ "edgeStart": "MuiIconButton-edgeStart",
+ "label": "MuiIconButton-label",
+ "root": "MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="header.accessibility.button_open_feedbacks"
+ centerRipple={true}
+ className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="header.accessibility.button_open_feedbacks"
+ centerRipple={true}
+ className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <button
+ aria-label="header.accessibility.button_open_feedbacks"
+ className="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
+ 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"
+ >
+ <StyledIcon
+ icon="test-file-stub"
+ size={22}
+ >
+ <Icon
+ aria-hidden={true}
+ icon="test-file-stub"
+ size={22}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={22}
+ style={Object {}}
+ width={22}
+ >
+ <svg
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={22}
+ style={Object {}}
+ width={22}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ </span>
+ <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)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(IconButton)>
+ </WithStyles(ForwardRef(IconButton))>
+ </WithStyles(WithStyles(ForwardRef(IconButton)))>
+ </StyledIconButton>
+ </BarRight>
+ </CozyBar>
+</Provider>
+`;
+
+exports[`CozyBar component should test displayBackArrow should call navigate(-1) when back button is clicked and no function is provided 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <CozyBar
+ displayBackArrow={true}
+ >
+ <BarLeft>
+ <StyledIconButton
+ aria-label="header.accessibility.button_back"
+ className="cv-button"
+ icon="test-file-stub"
+ onClick={[Function]}
+ >
+ <WithStyles(WithStyles(ForwardRef(IconButton)))
+ aria-label="header.accessibility.button_back"
+ className="cv-button"
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(IconButton))
+ aria-label="header.accessibility.button_back"
+ className="cv-button"
+ classes={
+ Object {
+ "root": "WithStyles(ForwardRef(IconButton))-root-1",
+ }
+ }
+ onClick={[Function]}
+ >
+ <ForwardRef(IconButton)
+ aria-label="header.accessibility.button_back"
+ className="cv-button"
+ classes={
+ Object {
+ "colorInherit": "MuiIconButton-colorInherit",
+ "colorPrimary": "MuiIconButton-colorPrimary",
+ "colorSecondary": "MuiIconButton-colorSecondary",
+ "disabled": "Mui-disabled",
+ "edgeEnd": "MuiIconButton-edgeEnd",
+ "edgeStart": "MuiIconButton-edgeStart",
+ "label": "MuiIconButton-label",
+ "root": "MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="header.accessibility.button_back"
+ centerRipple={true}
+ className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="header.accessibility.button_back"
+ centerRipple={true}
+ className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <button
+ aria-label="header.accessibility.button_back"
+ className="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
+ 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"
+ >
+ <StyledIcon
+ icon="test-file-stub"
+ size={16}
+ >
+ <Icon
+ aria-hidden={true}
+ icon="test-file-stub"
+ size={16}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <svg
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ </span>
+ <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)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(IconButton)>
+ </WithStyles(ForwardRef(IconButton))>
+ </WithStyles(WithStyles(ForwardRef(IconButton)))>
+ </StyledIconButton>
+ </BarLeft>
+ <BarCenter>
+ <div
+ className="cozy-bar"
+ >
+ <span
+ className="app-title"
+ >
+ common.title_app
+ </span>
+ </div>
+ </BarCenter>
+ <BarRight>
+ <StyledIconButton
+ aria-label="header.accessibility.button_open_feedbacks"
+ className="cv-button"
+ icon="test-file-stub"
+ onClick={[Function]}
+ sized={22}
+ >
+ <WithStyles(WithStyles(ForwardRef(IconButton)))
+ aria-label="header.accessibility.button_open_feedbacks"
+ className="cv-button"
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(IconButton))
+ aria-label="header.accessibility.button_open_feedbacks"
+ className="cv-button"
+ classes={
+ Object {
+ "root": "WithStyles(ForwardRef(IconButton))-root-1",
+ }
+ }
+ onClick={[Function]}
+ >
+ <ForwardRef(IconButton)
+ aria-label="header.accessibility.button_open_feedbacks"
+ className="cv-button"
+ classes={
+ Object {
+ "colorInherit": "MuiIconButton-colorInherit",
+ "colorPrimary": "MuiIconButton-colorPrimary",
+ "colorSecondary": "MuiIconButton-colorSecondary",
+ "disabled": "Mui-disabled",
+ "edgeEnd": "MuiIconButton-edgeEnd",
+ "edgeStart": "MuiIconButton-edgeStart",
+ "label": "MuiIconButton-label",
+ "root": "MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="header.accessibility.button_open_feedbacks"
+ centerRipple={true}
+ className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="header.accessibility.button_open_feedbacks"
+ centerRipple={true}
+ className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <button
+ aria-label="header.accessibility.button_open_feedbacks"
+ className="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
+ 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"
+ >
+ <StyledIcon
+ icon="test-file-stub"
+ size={22}
+ >
+ <Icon
+ aria-hidden={true}
+ icon="test-file-stub"
+ size={22}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={22}
+ style={Object {}}
+ width={22}
+ >
+ <svg
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={22}
+ style={Object {}}
+ width={22}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ </span>
+ <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)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(IconButton)>
+ </WithStyles(ForwardRef(IconButton))>
+ </WithStyles(WithStyles(ForwardRef(IconButton)))>
+ </StyledIconButton>
+ </BarRight>
+ </CozyBar>
+</Provider>
+`;
diff --git a/src/components/Home/ConsumptionDetails.spec.tsx b/src/components/Home/ConsumptionDetails.spec.tsx
index 93fcb20809868df503fbf9ebe155ff98829c95d3..6bb3fe42dff707eda976b5354c4f257c947f673a 100644
--- a/src/components/Home/ConsumptionDetails.spec.tsx
+++ b/src/components/Home/ConsumptionDetails.spec.tsx
@@ -1,6 +1,7 @@
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import React from 'react'
import * as reactRedux from 'react-redux'
import { Provider } from 'react-redux'
@@ -10,6 +11,7 @@ import {
mockInitialChartState,
mockInitialGlobalState,
} from '../../../tests/__mocks__/store'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import ConsumptionDetails from './ConsumptionDetails'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -30,7 +32,7 @@ describe('ConsumptionDetails component', () => {
store.clearActions()
mockUseSelector.mockClear()
})
- it('should be rendered correctly', () => {
+ it('should be rendered correctly', async () => {
mockUseSelector.mockReturnValue({
fluidStatus: mockInitialGlobalState.fluidStatus,
fluidTypes: [FluidType.ELECTRICITY],
@@ -46,7 +48,8 @@ describe('ConsumptionDetails component', () => {
</BrowserRouter>
</Provider>
)
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should not render connection card ', () => {
diff --git a/src/components/Home/ConsumptionDetails.tsx b/src/components/Home/ConsumptionDetails.tsx
index b02482996131393096a0aff336fca83963ad7125..3d17fc62059044c64b543d436f9da187b4dc75b5 100644
--- a/src/components/Home/ConsumptionDetails.tsx
+++ b/src/components/Home/ConsumptionDetails.tsx
@@ -1,50 +1,45 @@
-import TotalConsumption from 'components/TotalConsumption/TotalConsumption'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { FluidType } from 'enum/fluid.enum'
-import { TimeStep } from 'enum/timeStep.enum'
-import React from 'react'
-import { useSelector } from 'react-redux'
-import { AppStore } from 'store'
-import { convertDateToShortDateString } from 'utils/date'
-import './consumptionDetails.scss'
-interface ConsumptionDetailsProps {
- fluidType: FluidType
-}
-
-const ConsumptionDetails: React.FC<ConsumptionDetailsProps> = ({
- fluidType,
-}: ConsumptionDetailsProps) => {
- const { t } = useI18n()
- const { currentTimeStep, currentDatachart, showCompare } = useSelector(
- (state: AppStore) => state.ecolyo.chart
- )
-
- return (
- <>
- <div className="consumption-details-root">
- <div className="consumption-details-content">
- <div className="consumption-details-header text-16-normal-uppercase details-title">
- {convertDateToShortDateString(
- currentDatachart.actualData,
- currentTimeStep
- )}
- {showCompare && (
- <div className="consumption-details-header compare">
- {t('consumption.compared')}
- {currentTimeStep === TimeStep.DAY && ' '}
- {currentTimeStep !== TimeStep.DAY && ' AU '}
- {convertDateToShortDateString(
- currentDatachart.comparisonData,
- currentTimeStep
- )}
- </div>
- )}
- </div>
- <TotalConsumption fluidType={fluidType} />
- </div>
- </div>
- </>
- )
-}
-
-export default ConsumptionDetails
+import TotalConsumption from 'components/TotalConsumption/TotalConsumption'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { FluidType } from 'enum/fluid.enum'
+import { TimeStep } from 'enum/timeStep.enum'
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { AppStore } from 'store'
+import { convertDateToShortDateString } from 'utils/date'
+import './consumptionDetails.scss'
+
+const ConsumptionDetails = ({ fluidType }: { fluidType: FluidType }) => {
+ const { t } = useI18n()
+ const { currentTimeStep, currentDatachart, showCompare } = useSelector(
+ (state: AppStore) => state.ecolyo.chart
+ )
+
+ return (
+ <>
+ <div className="consumption-details-root">
+ <div className="consumption-details-content">
+ <div className="consumption-details-header text-16-normal-uppercase details-title">
+ {convertDateToShortDateString(
+ currentDatachart.actualData,
+ currentTimeStep
+ )}
+ {showCompare && (
+ <div className="consumption-details-header compare">
+ {t('consumption.compared')}
+ {currentTimeStep === TimeStep.DAY && ' '}
+ {currentTimeStep !== TimeStep.DAY && ' AU '}
+ {convertDateToShortDateString(
+ currentDatachart.comparisonData,
+ currentTimeStep
+ )}
+ </div>
+ )}
+ </div>
+ <TotalConsumption fluidType={fluidType} />
+ </div>
+ </div>
+ </>
+ )
+}
+
+export default ConsumptionDetails
diff --git a/src/components/Home/ConsumptionView.tsx b/src/components/Home/ConsumptionView.tsx
index 133e524a8df89357478c3c191de0eda89781ce94..d6d6373561ad2b59f0bf53ef7f4bbbca26d398bd 100644
--- a/src/components/Home/ConsumptionView.tsx
+++ b/src/components/Home/ConsumptionView.tsx
@@ -31,12 +31,7 @@ import {
import ReleaseNotesModal from './ReleaseNotesModal'
import './consumptionView.scss'
-interface ConsumptionViewProps {
- fluidType: FluidType
-}
-const ConsumptionView: React.FC<ConsumptionViewProps> = ({
- fluidType,
-}: ConsumptionViewProps) => {
+const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => {
const navigate = useNavigate()
const client = useClient()
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
diff --git a/src/components/Home/FluidButton.spec.tsx b/src/components/Home/FluidButton.spec.tsx
index e58745f9c33aa4fbc16d89bc695bc3d621d939cc..9799a3d51470408cfc6047466283aaee891797d3 100644
--- a/src/components/Home/FluidButton.spec.tsx
+++ b/src/components/Home/FluidButton.spec.tsx
@@ -1,5 +1,6 @@
import { FluidState, FluidType } from 'enum/fluid.enum'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import { GlobalState } from 'models'
import React from 'react'
import { Provider } from 'react-redux'
@@ -9,6 +10,7 @@ import {
createMockEcolyoStore,
mockInitialGlobalState,
} from '../../../tests/__mocks__/store'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import FluidButton from './FluidButton'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -32,13 +34,14 @@ describe('FluidButton component', () => {
store.clearActions()
})
- it('should be rendered correctly', () => {
+ it('should be rendered correctly', async () => {
const wrapper = mount(
<Provider store={store}>
<FluidButton fluidType={FluidType.ELECTRICITY} isActive={false} />
</Provider>
- ).getElement()
- expect(wrapper).toMatchSnapshot()
+ )
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should render multifluidButton', () => {
diff --git a/src/components/Home/FluidButton.tsx b/src/components/Home/FluidButton.tsx
index a9ba2c020dda0c745ca857f037fbe9d0b35a44c6..dcc93f5344cb85a26f2b9f95753b5e68ed24e731 100644
--- a/src/components/Home/FluidButton.tsx
+++ b/src/components/Home/FluidButton.tsx
@@ -12,17 +12,14 @@ import DateChartService from 'services/dateChart.service'
import UsageEventService from 'services/usageEvent.service'
import { AppStore } from 'store'
import { getNavPicto } from 'utils/picto'
-import { isKonnectorActive } from 'utils/utils'
+import { getFluidName, isKonnectorActive } from 'utils/utils'
interface FluidButtonProps {
fluidType: FluidType
isActive: boolean
}
-const FluidButton: React.FC<FluidButtonProps> = ({
- fluidType,
- isActive,
-}: FluidButtonProps) => {
+const FluidButton = ({ fluidType, isActive }: FluidButtonProps) => {
const { t } = useI18n()
const navigate = useNavigate()
const { fluidStatus } = useSelector((state: AppStore) => state.ecolyo.global)
@@ -61,19 +58,19 @@ const FluidButton: React.FC<FluidButtonProps> = ({
const goToFluid = useCallback(async () => {
await UsageEventService.addEvent(client, {
type: UsageEventType.NAVIGATION_EVENT,
- target: FluidType[fluidType].toLowerCase(),
+ target: getFluidName(fluidType),
})
navigate(
fluidType === FluidType.MULTIFLUID
? '/consumption'
- : `/consumption/${FluidType[fluidType].toLowerCase()}`
+ : `/consumption/${getFluidName(fluidType)}`
)
}, [navigate, fluidType, client])
const isFluidMaintenance = () => fluidStatus[fluidType]?.maintenance
useEffect(() => {
- // Show errors only on konnected konnectors that are in error, outdated, with no data (specific case), and not in multifluid
+ // Show errors only on connected konnectors that are in error, outdated, with no data (specific case), and not in multifluid
if (
(fluidType !== FluidType.MULTIFLUID && isConnected() && isErrored()) ||
(fluidType !== FluidType.MULTIFLUID && isConnected() && isOutdated())
@@ -105,7 +102,7 @@ const FluidButton: React.FC<FluidButtonProps> = ({
)
)}
<div
- className={`fluid-title ${FluidType[fluidType].toLowerCase()} ${
+ className={`fluid-title ${getFluidName(fluidType)} ${
isActive && 'active'
} text-14-normal`}
>
diff --git a/src/components/Home/FluidButtons.spec.tsx b/src/components/Home/FluidButtons.spec.tsx
index 34a90e11de944fa87e075a0642394513149b9979..08e569ac59e4178e5fac2974993d89990544a194 100644
--- a/src/components/Home/FluidButtons.spec.tsx
+++ b/src/components/Home/FluidButtons.spec.tsx
@@ -1,8 +1,10 @@
import { FluidType } from 'enum/fluid.enum'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import React from 'react'
import { Provider } from 'react-redux'
import { createMockEcolyoStore } from '../../../tests/__mocks__/store'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import FluidButtons from './FluidButtons'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -26,12 +28,13 @@ describe('FluidButtons component', () => {
store.clearActions()
})
- it('should be rendered correctly', () => {
+ it('should be rendered correctly', async () => {
const wrapper = mount(
<Provider store={store}>
<FluidButtons activeFluid={FluidType.ELECTRICITY} />
</Provider>
- ).getElement()
- expect(wrapper).toMatchSnapshot()
+ )
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
})
diff --git a/src/components/Home/FluidButtons.tsx b/src/components/Home/FluidButtons.tsx
index 6a4d6ce5b7edd1990de94d594a09b21015f54bdc..62bcae8bfdbf25a7467e19f466f215151dca1b90 100644
--- a/src/components/Home/FluidButtons.tsx
+++ b/src/components/Home/FluidButtons.tsx
@@ -3,12 +3,7 @@ import React from 'react'
import FluidButton from './FluidButton'
import './fluidButtons.scss'
-interface FluidButtonsProps {
- activeFluid: FluidType
-}
-const FluidButtons: React.FC<FluidButtonsProps> = ({
- activeFluid,
-}: FluidButtonsProps) => {
+const FluidButtons = ({ activeFluid }: { activeFluid: FluidType }) => {
const orderedFluids = [
FluidType.MULTIFLUID,
FluidType.ELECTRICITY,
diff --git a/src/components/Home/ReleaseNotesModal.tsx b/src/components/Home/ReleaseNotesModal.tsx
index cc64fcf1bba2febeb47af4402a72d558e54943f9..13dac570ae33003d448fcaaaf5e2376182bfd6af 100644
--- a/src/components/Home/ReleaseNotesModal.tsx
+++ b/src/components/Home/ReleaseNotesModal.tsx
@@ -12,7 +12,7 @@ interface ReleaseNotesModalProps {
handleCloseClick: () => void
}
-const ReleaseNotesModal: React.FC<ReleaseNotesModalProps> = ({
+const ReleaseNotesModal = ({
open,
handleCloseClick,
}: ReleaseNotesModalProps) => {
diff --git a/src/components/Home/__snapshots__/ConsumptionDetails.spec.tsx.snap b/src/components/Home/__snapshots__/ConsumptionDetails.spec.tsx.snap
index b419df1dbe9acf8bf737c0194c47855854f814be..6dd5c4b177614d50aab12ba4c37a821a090073f1 100644
--- a/src/components/Home/__snapshots__/ConsumptionDetails.spec.tsx.snap
+++ b/src/components/Home/__snapshots__/ConsumptionDetails.spec.tsx.snap
@@ -1,3 +1,118 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`ConsumptionDetails component should be rendered correctly 1`] = `ReactWrapper {}`;
+exports[`ConsumptionDetails component should be rendered correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <BrowserRouter>
+ <Router
+ location={
+ Object {
+ "hash": "",
+ "key": "default",
+ "pathname": "/",
+ "search": "",
+ "state": null,
+ }
+ }
+ navigationType="POP"
+ navigator={
+ Object {
+ "action": "POP",
+ "createHref": [Function],
+ "encodeLocation": [Function],
+ "go": [Function],
+ "listen": [Function],
+ "location": Object {
+ "hash": "",
+ "key": "default",
+ "pathname": "/",
+ "search": "",
+ "state": null,
+ },
+ "push": [Function],
+ "replace": [Function],
+ }
+ }
+ >
+ <ConsumptionDetails
+ fluidType={0}
+ >
+ <div
+ className="consumption-details-root"
+ >
+ <div
+ className="consumption-details-content"
+ >
+ <div
+ className="consumption-details-header text-16-normal-uppercase details-title"
+ />
+ <TotalConsumption
+ fluidType={0}
+ >
+ <div
+ className="icon-line "
+ >
+ <StyledIcon
+ className="pile-icon"
+ icon="test-file-stub"
+ size={36}
+ >
+ <Icon
+ aria-hidden={true}
+ className="pile-icon"
+ icon="test-file-stub"
+ size={36}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="pile-icon styles__icon___23x3R"
+ height={36}
+ style={Object {}}
+ width={36}
+ >
+ <svg
+ aria-hidden={true}
+ className="pile-icon styles__icon___23x3R"
+ height={36}
+ style={Object {}}
+ width={36}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <div>
+ <span
+ className="euro-value"
+ >
+ -----
+ </span>
+ <span
+ className="euro-symbol"
+ >
+ €
+ </span>
+ </div>
+ </div>
+ </TotalConsumption>
+ </div>
+ </div>
+ </ConsumptionDetails>
+ </Router>
+ </BrowserRouter>
+</Provider>
+`;
diff --git a/src/components/Home/__snapshots__/FluidButton.spec.tsx.snap b/src/components/Home/__snapshots__/FluidButton.spec.tsx.snap
index 062bfb67a4efb775037d3dd976dad6a8913b0c7c..bc20bd2d993c50ea082e2e9273a3cde505707457 100644
--- a/src/components/Home/__snapshots__/FluidButton.spec.tsx.snap
+++ b/src/components/Home/__snapshots__/FluidButton.spec.tsx.snap
@@ -16,6 +16,50 @@ exports[`FluidButton component should be rendered correctly 1`] = `
<FluidButton
fluidType={0}
isActive={false}
- />
+ >
+ <div
+ className="fluid-title electricity fluid-button"
+ onClick={[Function]}
+ >
+ <StyledIcon
+ className="fluid-icon"
+ icon="test-file-stub"
+ size={32}
+ >
+ <Icon
+ aria-hidden={true}
+ className="fluid-icon"
+ icon="test-file-stub"
+ size={32}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="fluid-icon styles__icon___23x3R"
+ height={32}
+ style={Object {}}
+ width={32}
+ >
+ <svg
+ aria-hidden={true}
+ className="fluid-icon styles__icon___23x3R"
+ height={32}
+ style={Object {}}
+ width={32}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <div
+ className="fluid-title electricity false text-14-normal"
+ >
+ FLUID.ELECTRICITY.LABEL
+ </div>
+ </div>
+ </FluidButton>
</Provider>
`;
diff --git a/src/components/Home/__snapshots__/FluidButtons.spec.tsx.snap b/src/components/Home/__snapshots__/FluidButtons.spec.tsx.snap
index 62953c6cfcb2c2b772eb3f11badb4e6f97e5dc57..3925c6abe1b2547a032e4a5584952504432ed89e 100644
--- a/src/components/Home/__snapshots__/FluidButtons.spec.tsx.snap
+++ b/src/components/Home/__snapshots__/FluidButtons.spec.tsx.snap
@@ -15,6 +15,211 @@ exports[`FluidButtons component should be rendered correctly 1`] = `
>
<FluidButtons
activeFluid={0}
- />
+ >
+ <div
+ className="fluid-buttons"
+ >
+ <div
+ className="content"
+ >
+ <FluidButton
+ fluidType={3}
+ isActive={false}
+ key="3"
+ >
+ <div
+ className="fluid-title multifluid fluid-button"
+ onClick={[Function]}
+ >
+ <StyledIcon
+ className="fluid-icon"
+ icon="test-file-stub"
+ size={36}
+ >
+ <Icon
+ aria-hidden={true}
+ className="fluid-icon"
+ icon="test-file-stub"
+ size={36}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="fluid-icon styles__icon___23x3R"
+ height={36}
+ style={Object {}}
+ width={36}
+ >
+ <svg
+ aria-hidden={true}
+ className="fluid-icon styles__icon___23x3R"
+ height={36}
+ style={Object {}}
+ width={36}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <div
+ className="fluid-title multifluid false text-14-normal"
+ >
+ FLUID.MULTIFLUID.LABEL
+ </div>
+ </div>
+ </FluidButton>
+ <FluidButton
+ fluidType={0}
+ isActive={true}
+ key="0"
+ >
+ <div
+ className="fluid-title electricity fluid-button"
+ onClick={[Function]}
+ >
+ <StyledIcon
+ className="fluid-icon"
+ icon="test-file-stub"
+ size={32}
+ >
+ <Icon
+ aria-hidden={true}
+ className="fluid-icon"
+ icon="test-file-stub"
+ size={32}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="fluid-icon styles__icon___23x3R"
+ height={32}
+ style={Object {}}
+ width={32}
+ >
+ <svg
+ aria-hidden={true}
+ className="fluid-icon styles__icon___23x3R"
+ height={32}
+ style={Object {}}
+ width={32}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <div
+ className="fluid-title electricity active text-14-normal"
+ >
+ FLUID.ELECTRICITY.LABEL
+ </div>
+ </div>
+ </FluidButton>
+ <FluidButton
+ fluidType={1}
+ isActive={false}
+ key="1"
+ >
+ <div
+ className="fluid-title water fluid-button"
+ onClick={[Function]}
+ >
+ <StyledIcon
+ className="fluid-icon"
+ icon="test-file-stub"
+ size={32}
+ >
+ <Icon
+ aria-hidden={true}
+ className="fluid-icon"
+ icon="test-file-stub"
+ size={32}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="fluid-icon styles__icon___23x3R"
+ height={32}
+ style={Object {}}
+ width={32}
+ >
+ <svg
+ aria-hidden={true}
+ className="fluid-icon styles__icon___23x3R"
+ height={32}
+ style={Object {}}
+ width={32}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <div
+ className="fluid-title water false text-14-normal"
+ >
+ FLUID.WATER.LABEL
+ </div>
+ </div>
+ </FluidButton>
+ <FluidButton
+ fluidType={2}
+ isActive={false}
+ key="2"
+ >
+ <div
+ className="fluid-title gas fluid-button"
+ onClick={[Function]}
+ >
+ <StyledIcon
+ className="fluid-icon"
+ icon="test-file-stub"
+ size={32}
+ >
+ <Icon
+ aria-hidden={true}
+ className="fluid-icon"
+ icon="test-file-stub"
+ size={32}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="fluid-icon styles__icon___23x3R"
+ height={32}
+ style={Object {}}
+ width={32}
+ >
+ <svg
+ aria-hidden={true}
+ className="fluid-icon styles__icon___23x3R"
+ height={32}
+ style={Object {}}
+ width={32}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <div
+ className="fluid-title gas false text-14-normal"
+ >
+ FLUID.GAS.LABEL
+ </div>
+ </div>
+ </FluidButton>
+ </div>
+ </div>
+ </FluidButtons>
</Provider>
`;
diff --git a/src/components/Home/consumptionView.scss b/src/components/Home/consumptionView.scss
index f06c407a5913320cf0e2444356ad729786c7545a..174d986a8c3b601c82e2a35243727d1f0843b622 100644
--- a/src/components/Home/consumptionView.scss
+++ b/src/components/Home/consumptionView.scss
@@ -20,8 +20,10 @@
margin: 0 auto;
width: 45.75rem;
box-sizing: border-box;
+ padding-bottom: 1rem;
@media #{$large-phone} {
width: 100%;
- padding: 0rem 1rem 3rem 1rem;
+ padding-left: 1rem;
+ padding-right: 1rem;
}
}
diff --git a/src/components/Hooks/useChartResize.tsx b/src/components/Hooks/useChartResize.tsx
index 74176aa12ba9d8d8760a34906b2b17423507a8d3..aeb5784223a76dee8f28a2cd74ea3caee79a94c2 100644
--- a/src/components/Hooks/useChartResize.tsx
+++ b/src/components/Hooks/useChartResize.tsx
@@ -1,21 +1,24 @@
import { useEffect, useState } from 'react'
+/**
+ * Update the width and height of the chart when the window is resized or the chart is loaded
+ */
export const useChartResize = (
ref: React.RefObject<HTMLDivElement>,
+ loading: boolean,
maxHeight = 300,
- maxWidth = 940,
- loading = false
+ maxWidth = 940
) => {
- const [width, setWidth] = useState(0)
- const [height, setHeight] = useState(0)
+ const [height, setHeight] = useState(maxHeight)
+ const [width, setWidth] = useState(maxWidth)
useEffect(() => {
function handleResize() {
if (!loading) {
- const chartContainerWidth = ref?.current?.offsetWidth ?? 400
- const chartContainerHeight = ref?.current?.offsetHeight ?? 200
- const width = Math.min(chartContainerWidth, maxWidth)
+ const chartContainerHeight = ref.current?.offsetHeight || maxHeight
+ const chartContainerWidth = ref.current?.offsetWidth || maxWidth
const height = Math.min(chartContainerHeight, maxHeight)
+ const width = Math.min(chartContainerWidth, maxWidth)
setWidth(width)
setHeight(height)
}
@@ -24,7 +27,7 @@ export const useChartResize = (
handleResize()
window.addEventListener('resize', handleResize)
return () => window.removeEventListener('resize', handleResize)
- }, [loading])
+ }, [loading, maxHeight, maxWidth, ref])
return { width, height }
}
diff --git a/src/components/Hooks/useExploration.tsx b/src/components/Hooks/useExploration.tsx
index 0858343b897348ec9bd9b2fa2edf505721423634..a42e644f23f0b7807f8badc83361f100124988d2 100644
--- a/src/components/Hooks/useExploration.tsx
+++ b/src/components/Hooks/useExploration.tsx
@@ -5,7 +5,7 @@ import { Dispatch, SetStateAction, useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import ExplorationService from 'services/exploration.service'
import { AppActionsTypes, AppStore } from 'store'
-import { updateUserChallengeList } from 'store/challenge/challenge.actions'
+import { updateUserChallengeList } from 'store/challenge/challenge.slice'
import { toggleChallengeExplorationNotification } from 'store/global/global.actions'
const useExploration = (): [string, Dispatch<SetStateAction<string>>] => {
diff --git a/src/components/Konnector/KonnectorModal.tsx b/src/components/Konnector/KonnectorModal.tsx
index ec1294a18137b6332cb63b40e5c2c8751a44c17e..f02c94ea6c13400fb9eb708714694d287d0b280f 100644
--- a/src/components/Konnector/KonnectorModal.tsx
+++ b/src/components/Konnector/KonnectorModal.tsx
@@ -17,8 +17,8 @@ import { KonnectorError } from 'enum/konnectorError.enum'
import { shuffle } from 'lodash'
import { Account } from 'models'
import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import './konnectorModal.scss'
import KonnectorModalFooter from './KonnectorModalFooter'
+import './konnectorModal.scss'
interface KonnectorModalProps {
open: boolean
@@ -32,7 +32,7 @@ interface KonnectorModalProps {
account: Account | null
}
-const KonnectorModal: React.FC<KonnectorModalProps> = ({
+const KonnectorModal = ({
open,
isUpdating,
isLogging,
diff --git a/src/components/Konnector/KonnectorModalFooter.tsx b/src/components/Konnector/KonnectorModalFooter.tsx
index 7ebc8434aa6c45f056c3a0649e1a710c0e95f307..7ce01b20503760e4d795c5dd0c7d0cb6de35c594 100644
--- a/src/components/Konnector/KonnectorModalFooter.tsx
+++ b/src/components/Konnector/KonnectorModalFooter.tsx
@@ -21,7 +21,7 @@ interface KonnectorModalFooterProps {
isUpdating: boolean
}
-const KonnectorModalFooter: React.FC<KonnectorModalFooterProps> = ({
+const KonnectorModalFooter = ({
state,
error,
handleCloseClick,
diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx
index f1f613b0236e10717c1976db947c67be6c4a8d9b..e5249c3d07572d46e7a8cb09ca4ab93b427bc76f 100644
--- a/src/components/Konnector/KonnectorViewerCard.tsx
+++ b/src/components/Konnector/KonnectorViewerCard.tsx
@@ -57,7 +57,7 @@ import FluidService from 'services/fluid.service'
import PartnersInfoService from 'services/partnersInfo.service'
import UsageEventService from 'services/usageEvent.service'
import { AppActionsTypes, AppStore } from 'store'
-import { setChallengeConsumption } from 'store/challenge/challenge.actions'
+import { setChallengeConsumption } from 'store/challenge/challenge.slice'
import { setSelectedDate, setShowOfflineData } from 'store/chart/chart.slice'
import {
setFluidStatus,
@@ -79,7 +79,7 @@ interface KonnectorViewerCardProps {
setActive: React.Dispatch<React.SetStateAction<boolean>>
}
-const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
+const KonnectorViewerCard = ({
fluidStatus,
isParam,
isDisconnected,
@@ -163,7 +163,12 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
const challengeService = new ChallengeService(client)
const { updatedUserChallenge, dataloads } =
await challengeService.initChallengeDuelProgress(currentChallenge)
- dispatch(setChallengeConsumption(updatedUserChallenge, dataloads))
+ dispatch(
+ setChallengeConsumption({
+ userChallenge: updatedUserChallenge,
+ currentDataload: dataloads,
+ })
+ )
// Check is duel is done and display notification
const { isDone } = await challengeService.isChallengeDone(
updatedUserChallenge,
diff --git a/src/components/Konnector/KonnectorViewerList.spec.tsx b/src/components/Konnector/KonnectorViewerList.spec.tsx
index 638e43f17784e764184ca06f05ccdaeb4a69afd4..9394ed2ca3a75f7a2c50e10c451befe0fc1574bc 100644
--- a/src/components/Konnector/KonnectorViewerList.spec.tsx
+++ b/src/components/Konnector/KonnectorViewerList.spec.tsx
@@ -1,4 +1,5 @@
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import React from 'react'
import * as reactRedux from 'react-redux'
import { Provider } from 'react-redux'
@@ -6,6 +7,7 @@ import {
createMockEcolyoStore,
mockInitialGlobalState,
} from '../../../tests/__mocks__/store'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import KonnectorViewerList from './KonnectorViewerList'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -29,13 +31,14 @@ describe('KonnectorViewerList component', () => {
store.clearActions()
})
- it('should be rendered correctly', () => {
+ it('should be rendered correctly', async () => {
const wrapper = mount(
<Provider store={store}>
<KonnectorViewerList />
</Provider>
- ).getElement()
- expect(wrapper).toMatchSnapshot()
+ )
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should click on card and nav to fluid', async () => {
const mockUseSelector = jest.spyOn(reactRedux, 'useSelector')
diff --git a/src/components/Konnector/KonnectorViewerList.tsx b/src/components/Konnector/KonnectorViewerList.tsx
index 9f6022b292346eacad015ff06a72a5a92bc99633..e4c0c6190ead10314feb40b986357b73821e3537 100644
--- a/src/components/Konnector/KonnectorViewerList.tsx
+++ b/src/components/Konnector/KonnectorViewerList.tsx
@@ -8,6 +8,7 @@ import { useSelector } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import { AppStore } from 'store'
import { getAddPicto } from 'utils/picto'
+import { getFluidName } from 'utils/utils'
import './konnectorViewerList.scss'
const KonnectorViewerList = () => {
@@ -16,30 +17,35 @@ const KonnectorViewerList = () => {
const navigate = useNavigate()
const goToFluid = useCallback(
fluidType => {
- navigate(`/consumption/${FluidType[fluidType].toLowerCase()}`)
+ navigate(`/consumption/${getFluidName(fluidType)}`)
},
[navigate]
)
- return fluidStatus.map((fluidStatusItem: FluidStatus, key: number) => (
- <StyledCard
- key={key}
- className="connection-card"
- onClick={() => goToFluid(fluidStatusItem.fluidType)}
- >
- <Icon icon={getAddPicto(fluidStatusItem.fluidType)} size={36} />
- <div
- className={`konnector-title text-18-bold ${FluidType[
- fluidStatusItem.fluidType
- ].toLowerCase()}`}
- >
- {t(
- `konnector_options.label_connect_to_${FluidType[
- fluidStatusItem.fluidType
- ].toLowerCase()}`
- )}
- </div>
- </StyledCard>
- ))
+ return (
+ <>
+ {fluidStatus.map((fluidStatusItem: FluidStatus, key: number) => (
+ <StyledCard
+ key={key}
+ className="connection-card"
+ onClick={() => goToFluid(fluidStatusItem.fluidType)}
+ fluidType={fluidStatusItem.fluidType}
+ >
+ <Icon icon={getAddPicto(fluidStatusItem.fluidType)} size={36} />
+ <div
+ className={`konnector-title text-18-bold ${FluidType[
+ fluidStatusItem.fluidType
+ ].toLowerCase()}`}
+ >
+ {t(
+ `konnector_options.label_connect_to_${FluidType[
+ fluidStatusItem.fluidType
+ ].toLowerCase()}`
+ )}
+ </div>
+ </StyledCard>
+ ))}
+ </>
+ )
}
export default KonnectorViewerList
diff --git a/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
index e4db320e76a8acd30aefd8c2704087d13d69b6ed..6a487b21e1ed33a10a1e4786cac1c50a0fb4eadd 100644
--- a/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
+++ b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
@@ -13,6 +13,466 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
}
}
>
- <KonnectorViewerList />
+ <KonnectorViewerList>
+ <StyledCard
+ className="connection-card"
+ fluidType={0}
+ key="0"
+ onClick={[Function]}
+ >
+ <WithStyles(WithStyles(ForwardRef(CardActionArea)))
+ className="connection-card electricity"
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(CardActionArea))
+ className="connection-card electricity"
+ classes={
+ Object {
+ "root": "WithStyles(ForwardRef(CardActionArea))-root-1",
+ }
+ }
+ onClick={[Function]}
+ >
+ <ForwardRef(CardActionArea)
+ className="connection-card electricity"
+ classes={
+ Object {
+ "focusHighlight": "MuiCardActionArea-focusHighlight",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1",
+ }
+ }
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity"
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ >
+ <ForwardRef(ButtonBase)
+ className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ >
+ <button
+ className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity"
+ 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"
+ >
+ <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"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={36}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={36}
+ style={Object {}}
+ width={36}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={36}
+ style={Object {}}
+ width={36}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ <div
+ className="konnector-title text-18-bold electricity"
+ >
+ konnector_options.label_connect_to_electricity
+ </div>
+ </div>
+ </ForwardRef(CardContent)>
+ </WithStyles(ForwardRef(CardContent))>
+ </WithStyles(WithStyles(ForwardRef(CardContent)))>
+ <span
+ className="MuiCardActionArea-focusHighlight"
+ />
+ <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)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(CardActionArea)>
+ </WithStyles(ForwardRef(CardActionArea))>
+ </WithStyles(WithStyles(ForwardRef(CardActionArea)))>
+ </StyledCard>
+ <StyledCard
+ className="connection-card"
+ fluidType={1}
+ key="1"
+ onClick={[Function]}
+ >
+ <WithStyles(WithStyles(ForwardRef(CardActionArea)))
+ className="connection-card water"
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(CardActionArea))
+ className="connection-card water"
+ classes={
+ Object {
+ "root": "WithStyles(ForwardRef(CardActionArea))-root-1",
+ }
+ }
+ onClick={[Function]}
+ >
+ <ForwardRef(CardActionArea)
+ className="connection-card water"
+ classes={
+ Object {
+ "focusHighlight": "MuiCardActionArea-focusHighlight",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1",
+ }
+ }
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water"
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ >
+ <ForwardRef(ButtonBase)
+ className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ >
+ <button
+ className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water"
+ 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"
+ >
+ <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"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={36}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={36}
+ style={Object {}}
+ width={36}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={36}
+ style={Object {}}
+ width={36}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ <div
+ className="konnector-title text-18-bold water"
+ >
+ konnector_options.label_connect_to_water
+ </div>
+ </div>
+ </ForwardRef(CardContent)>
+ </WithStyles(ForwardRef(CardContent))>
+ </WithStyles(WithStyles(ForwardRef(CardContent)))>
+ <span
+ className="MuiCardActionArea-focusHighlight"
+ />
+ <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)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(CardActionArea)>
+ </WithStyles(ForwardRef(CardActionArea))>
+ </WithStyles(WithStyles(ForwardRef(CardActionArea)))>
+ </StyledCard>
+ <StyledCard
+ className="connection-card"
+ fluidType={2}
+ key="2"
+ onClick={[Function]}
+ >
+ <WithStyles(WithStyles(ForwardRef(CardActionArea)))
+ className="connection-card gas"
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(CardActionArea))
+ className="connection-card gas"
+ classes={
+ Object {
+ "root": "WithStyles(ForwardRef(CardActionArea))-root-1",
+ }
+ }
+ onClick={[Function]}
+ >
+ <ForwardRef(CardActionArea)
+ className="connection-card gas"
+ classes={
+ Object {
+ "focusHighlight": "MuiCardActionArea-focusHighlight",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1",
+ }
+ }
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas"
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ >
+ <ForwardRef(ButtonBase)
+ className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ >
+ <button
+ className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas"
+ 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"
+ >
+ <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"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={36}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={36}
+ style={Object {}}
+ width={36}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={36}
+ style={Object {}}
+ width={36}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ <div
+ className="konnector-title text-18-bold gas"
+ >
+ konnector_options.label_connect_to_gas
+ </div>
+ </div>
+ </ForwardRef(CardContent)>
+ </WithStyles(ForwardRef(CardContent))>
+ </WithStyles(WithStyles(ForwardRef(CardContent)))>
+ <span
+ className="MuiCardActionArea-focusHighlight"
+ />
+ <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)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(CardActionArea)>
+ </WithStyles(ForwardRef(CardActionArea))>
+ </WithStyles(WithStyles(ForwardRef(CardActionArea)))>
+ </StyledCard>
+ </KonnectorViewerList>
</Provider>
`;
diff --git a/src/components/Konnector/konnectorViewerList.scss b/src/components/Konnector/konnectorViewerList.scss
index 38e239582c1daec3ab65df0dab38f4152a2d3113..4005432f3ca26f473d1689fdc87837cbcd3cb251 100644
--- a/src/components/Konnector/konnectorViewerList.scss
+++ b/src/components/Konnector/konnectorViewerList.scss
@@ -1,14 +1,16 @@
@import 'src/styles/base/color';
@import 'src/styles/base/breakpoint';
-button.connection-card div {
- display: flex;
- align-items: center;
- justify-content: start;
+button.connection-card {
height: 80px;
- font-weight: normal;
- box-sizing: border-box;
- svg {
- margin-right: 1.5rem;
+ margin-bottom: 1rem;
+ &.electricity {
+ border: 1px solid var(--elecColor40);
+ }
+ &.gas {
+ border: 1px solid var(--gasColor40);
+ }
+ &.water {
+ border: 1px solid var(--waterColor40);
}
}
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index 338d13f6ed7c2c728535c90154b7091fb3d972ac..8a67ad38cee09c38990f77aee618d032d6e77919 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -21,7 +21,7 @@ import UsageEventService from 'services/usageEvent.service'
import { AppStore } from 'store'
import './navBar.scss'
-export const Navbar: React.FC = () => {
+export const Navbar = () => {
const { t } = useI18n()
const {
challengeExplorationNotification,
diff --git a/src/components/Options/Accessibility/Accessibility.tsx b/src/components/Options/Accessibility/Accessibility.tsx
index 6bbb4be6c1cee42bb04b59bc5548190d9b833aef..9fe279c519ccd97586d99d965c15de73b5144d68 100644
--- a/src/components/Options/Accessibility/Accessibility.tsx
+++ b/src/components/Options/Accessibility/Accessibility.tsx
@@ -5,7 +5,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import React from 'react'
import '../GCU/gcuLink.scss'
-const Accessibility: React.FC = () => {
+const Accessibility = () => {
const { t } = useI18n()
return (
<div className="gcu-link-root">
diff --git a/src/components/Options/ExportData/ExportData.tsx b/src/components/Options/ExportData/ExportData.tsx
index 1e9df7f5b87b0d8ecab95efd714cdc04c99a3fae..253a24355d001e2aa329fcd96bb618c83037a714 100644
--- a/src/components/Options/ExportData/ExportData.tsx
+++ b/src/components/Options/ExportData/ExportData.tsx
@@ -1,193 +1,193 @@
-import {
- Accordion,
- AccordionDetails,
- AccordionSummary,
- Button,
-} from '@material-ui/core'
-import chevronDown from 'assets/icons/ico/chevron-down.svg'
-import exportIcon from 'assets/icons/ico/export.svg'
-import classNames from 'classnames'
-import ExportDoneModal from 'components/Export/exportDoneModal'
-import ExportLoadingModal from 'components/Export/exportLoadingModal'
-import ExportStartModal from 'components/Export/exportStartModal'
-import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import { FluidType } from 'enum/fluid.enum'
-import { TimeStep } from 'enum/timeStep.enum'
-import { remove } from 'lodash'
-import React, { useEffect, useMemo, useState } from 'react'
-import ConsumptionDataManager from 'services/consumption.service'
-import './exportData.scss'
-
-const ExportData: React.FC = () => {
- const { t } = useI18n()
- const client = useClient()
- const consumptionService = useMemo(
- () => new ConsumptionDataManager(client),
- [client]
- )
-
- const [isExportStartModal, setIsExportStartModal] = useState<boolean>(false)
- const [isExportLoadingModal, setIsExportLoadingModal] =
- useState<boolean>(false)
- const [isExportDoneModal, setIsExportDoneModal] = useState<boolean>(false)
- const [hasError, setHasError] = useState<boolean>(false)
- const [exportableFluids, setExportableFluids] = useState<FluidType[]>([])
- const [answer, setAnswer] = useState<FluidType[]>([])
-
- const [active, setActive] = useState<boolean>(false)
-
- const toggleAccordion = () => {
- setActive(prev => !prev)
- }
-
- const handleChange = (value: FluidType) => {
- const tempAnswer = [...answer]
- if (tempAnswer.includes(value)) {
- remove(tempAnswer, answer => answer === value)
- } else {
- tempAnswer.push(value)
- }
- setAnswer(tempAnswer)
- }
-
- useEffect(() => {
- let subscribed = true
- const getExportableFluids = async () => {
- const exportableFluidsData: FluidType[] =
- await consumptionService.getExportableFluids(
- [FluidType.ELECTRICITY, FluidType.WATER, FluidType.GAS],
- TimeStep.MONTH
- )
- setExportableFluids(exportableFluidsData)
- setAnswer(exportableFluidsData)
- subscribed = false
- }
-
- if (subscribed) {
- getExportableFluids()
- }
- return () => {
- subscribed = false
- }
- }, [consumptionService])
-
- const fluidCheckbox = () =>
- exportableFluids.map((fluidType, key) => (
- <label
- key={key}
- className={classNames('checkbox', {
- ['answer-checked']: answer.includes(fluidType),
- })}
- >
- <input
- type={'checkbox'}
- value={fluidType}
- name={t('FLUID.' + FluidType[fluidType] + '.LABEL')}
- onChange={() => handleChange(fluidType)}
- checked={answer.includes(fluidType)}
- />
- {t('FLUID.' + FluidType[fluidType] + '.LABEL')}
- </label>
- ))
-
- const handleDone = (e?: any) => {
- if (e) {
- setHasError(true)
- }
- setIsExportDoneModal(true)
- setIsExportLoadingModal(false)
- }
-
- return (
- <>
- <div className="export-option-root">
- <div className="export-option-content">
- <Accordion
- expanded={active}
- onChange={toggleAccordion}
- classes={{
- root: 'expansion-panel-root',
- }}
- >
- <AccordionSummary
- aria-label={t('profile_type.accessibility.button_toggle_export')}
- expandIcon={
- <Icon icon={chevronDown} size={16} className="accordion-icon" />
- }
- classes={{
- root: 'expansion-panel-summary',
- content: 'expansion-panel-content',
- }}
- >
- <Icon className="export-icon" icon={exportIcon} size={42} />
- <div className="text-16-normal accordion-title">
- {t('export.title_export')}
- </div>
- </AccordionSummary>
- <AccordionDetails
- classes={{
- root: 'expansion-panel-details',
- }}
- >
- <div className="text-15-normal content intro">
- {t('export.text1')}
- </div>
- <div className="text-16-bold content">
- {t('export.fluid_select')}
- </div>
-
- {exportableFluids.length === 0 ? (
- <div className="text-15-normal content intro">
- {t('export.no_data')}
- </div>
- ) : (
- <>
- {fluidCheckbox()}
- <Button
- aria-label={t('unsubscribe.button_accessibility')}
- onClick={() => setIsExportStartModal(true)}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- type="submit"
- disabled={answer.length === 0}
- >
- {t('export.button_download')}
- </Button>
- </>
- )}
- </AccordionDetails>
- </Accordion>
- </div>
- </div>
- <ExportStartModal
- open={isExportStartModal}
- handleCloseClick={() => setIsExportStartModal(false)}
- handleDownloadClick={() => {
- setIsExportStartModal(false)
- setIsExportLoadingModal(true)
- }}
- />
- {isExportLoadingModal && (
- <ExportLoadingModal
- open={isExportLoadingModal}
- handleCloseClick={() => {
- setIsExportLoadingModal(false)
- }}
- handleDone={(e?: any): void => handleDone(e)}
- selectedFluids={answer}
- />
- )}
- <ExportDoneModal
- open={isExportDoneModal}
- error={hasError}
- handleCloseClick={() => setIsExportDoneModal(false)}
- />
- </>
- )
-}
-
-export default ExportData
+import {
+ Accordion,
+ AccordionDetails,
+ AccordionSummary,
+ Button,
+} from '@material-ui/core'
+import chevronDown from 'assets/icons/ico/chevron-down.svg'
+import exportIcon from 'assets/icons/ico/export.svg'
+import classNames from 'classnames'
+import ExportDoneModal from 'components/Export/exportDoneModal'
+import ExportLoadingModal from 'components/Export/exportLoadingModal'
+import ExportStartModal from 'components/Export/exportStartModal'
+import { useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import { FluidType } from 'enum/fluid.enum'
+import { TimeStep } from 'enum/timeStep.enum'
+import { remove } from 'lodash'
+import React, { useEffect, useMemo, useState } from 'react'
+import ConsumptionDataManager from 'services/consumption.service'
+import './exportData.scss'
+
+const ExportData = () => {
+ const { t } = useI18n()
+ const client = useClient()
+ const consumptionService = useMemo(
+ () => new ConsumptionDataManager(client),
+ [client]
+ )
+
+ const [isExportStartModal, setIsExportStartModal] = useState<boolean>(false)
+ const [isExportLoadingModal, setIsExportLoadingModal] =
+ useState<boolean>(false)
+ const [isExportDoneModal, setIsExportDoneModal] = useState<boolean>(false)
+ const [hasError, setHasError] = useState<boolean>(false)
+ const [exportableFluids, setExportableFluids] = useState<FluidType[]>([])
+ const [answer, setAnswer] = useState<FluidType[]>([])
+
+ const [active, setActive] = useState<boolean>(false)
+
+ const toggleAccordion = () => {
+ setActive(prev => !prev)
+ }
+
+ const handleChange = (value: FluidType) => {
+ const tempAnswer = [...answer]
+ if (tempAnswer.includes(value)) {
+ remove(tempAnswer, answer => answer === value)
+ } else {
+ tempAnswer.push(value)
+ }
+ setAnswer(tempAnswer)
+ }
+
+ useEffect(() => {
+ let subscribed = true
+ const getExportableFluids = async () => {
+ const exportableFluidsData: FluidType[] =
+ await consumptionService.getExportableFluids(
+ [FluidType.ELECTRICITY, FluidType.WATER, FluidType.GAS],
+ TimeStep.MONTH
+ )
+ setExportableFluids(exportableFluidsData)
+ setAnswer(exportableFluidsData)
+ subscribed = false
+ }
+
+ if (subscribed) {
+ getExportableFluids()
+ }
+ return () => {
+ subscribed = false
+ }
+ }, [consumptionService])
+
+ const fluidCheckbox = () =>
+ exportableFluids.map((fluidType, key) => (
+ <label
+ key={key}
+ className={classNames('checkbox', {
+ ['answer-checked']: answer.includes(fluidType),
+ })}
+ >
+ <input
+ type={'checkbox'}
+ value={fluidType}
+ name={t('FLUID.' + FluidType[fluidType] + '.LABEL')}
+ onChange={() => handleChange(fluidType)}
+ checked={answer.includes(fluidType)}
+ />
+ {t('FLUID.' + FluidType[fluidType] + '.LABEL')}
+ </label>
+ ))
+
+ const handleDone = (e?: any) => {
+ if (e) {
+ setHasError(true)
+ }
+ setIsExportDoneModal(true)
+ setIsExportLoadingModal(false)
+ }
+
+ return (
+ <>
+ <div className="export-option-root">
+ <div className="export-option-content">
+ <Accordion
+ expanded={active}
+ onChange={toggleAccordion}
+ classes={{
+ root: 'expansion-panel-root',
+ }}
+ >
+ <AccordionSummary
+ aria-label={t('profile_type.accessibility.button_toggle_export')}
+ expandIcon={
+ <Icon icon={chevronDown} size={16} className="accordion-icon" />
+ }
+ classes={{
+ root: 'expansion-panel-summary',
+ content: 'expansion-panel-content',
+ }}
+ >
+ <Icon className="export-icon" icon={exportIcon} size={42} />
+ <div className="text-16-normal accordion-title">
+ {t('export.title_export')}
+ </div>
+ </AccordionSummary>
+ <AccordionDetails
+ classes={{
+ root: 'expansion-panel-details',
+ }}
+ >
+ <div className="text-15-normal content intro">
+ {t('export.text1')}
+ </div>
+ <div className="text-16-bold content">
+ {t('export.fluid_select')}
+ </div>
+
+ {exportableFluids.length === 0 ? (
+ <div className="text-15-normal content intro">
+ {t('export.no_data')}
+ </div>
+ ) : (
+ <>
+ {fluidCheckbox()}
+ <Button
+ aria-label={t('unsubscribe.button_accessibility')}
+ onClick={() => setIsExportStartModal(true)}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ type="submit"
+ disabled={answer.length === 0}
+ >
+ {t('export.button_download')}
+ </Button>
+ </>
+ )}
+ </AccordionDetails>
+ </Accordion>
+ </div>
+ </div>
+ <ExportStartModal
+ open={isExportStartModal}
+ handleCloseClick={() => setIsExportStartModal(false)}
+ handleDownloadClick={() => {
+ setIsExportStartModal(false)
+ setIsExportLoadingModal(true)
+ }}
+ />
+ {isExportLoadingModal && (
+ <ExportLoadingModal
+ open={isExportLoadingModal}
+ handleCloseClick={() => {
+ setIsExportLoadingModal(false)
+ }}
+ handleDone={(e?: any): void => handleDone(e)}
+ selectedFluids={answer}
+ />
+ )}
+ <ExportDoneModal
+ open={isExportDoneModal}
+ error={hasError}
+ handleCloseClick={() => setIsExportDoneModal(false)}
+ />
+ </>
+ )
+}
+
+export default ExportData
diff --git a/src/components/Options/ExportData/exportData.scss b/src/components/Options/ExportData/exportData.scss
index 86950681878ff8458c8cf239fa45fc9d8141f95a..fec065e3b8beda0a6d03a05bf5441490dbe5f79c 100644
--- a/src/components/Options/ExportData/exportData.scss
+++ b/src/components/Options/ExportData/exportData.scss
@@ -24,7 +24,6 @@ div.expansion-panel-root.Mui-expanded:last-child {
margin: 0;
}
.accordion-title {
- padding-left: 1rem;
color: $white;
}
.expansion-panel-details {
@@ -67,5 +66,8 @@ div.expansion-panel-root.Mui-expanded:last-child {
}
div.expansion-panel-summary {
padding: 0 0.25rem 0 1rem;
+ .expansion-panel-content {
+ gap: 1rem;
+ }
}
}
diff --git a/src/components/Options/GCU/GCULink.tsx b/src/components/Options/GCU/GCULink.tsx
index 4e63440137a272037746f71d31212f1f39f529e8..3fff26ec8500b8da8282068cdd8feef42ab5cc3b 100644
--- a/src/components/Options/GCU/GCULink.tsx
+++ b/src/components/Options/GCU/GCULink.tsx
@@ -1,39 +1,39 @@
-import Link from '@material-ui/core/Link'
-import GCUIcon from 'assets/icons/ico/gcu.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import React from 'react'
-import { Link as RouterLink } from 'react-router-dom'
-import './gcuLink.scss'
-
-const GCULink: React.FC = () => {
- const { t } = useI18n()
- return (
- <div className="gcu-link-root">
- <div className="gcu-link-content">
- <Link
- className="gcu-link-card-link"
- component={RouterLink}
- to="/options/gcu"
- >
- <div className="card optionCard">
- <div className="gcu-link-card">
- <div className="gcu-link-card-content">
- <StyledIcon
- className="gcu-link-card-content-icon"
- icon={GCUIcon}
- size={42}
- />
- <div className="gcu-link-card-content-title">
- {t('common.title_gcu')}
- </div>
- </div>
- </div>
- </div>
- </Link>
- </div>
- </div>
- )
-}
-
-export default GCULink
+import Link from '@material-ui/core/Link'
+import GCUIcon from 'assets/icons/ico/gcu.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React from 'react'
+import { Link as RouterLink } from 'react-router-dom'
+import './gcuLink.scss'
+
+const GCULink = () => {
+ const { t } = useI18n()
+ return (
+ <div className="gcu-link-root">
+ <div className="gcu-link-content">
+ <Link
+ className="gcu-link-card-link"
+ component={RouterLink}
+ to="/options/gcu"
+ >
+ <div className="card optionCard">
+ <div className="gcu-link-card">
+ <div className="gcu-link-card-content">
+ <StyledIcon
+ className="gcu-link-card-content-icon"
+ icon={GCUIcon}
+ size={42}
+ />
+ <div className="gcu-link-card-content-title">
+ {t('common.title_gcu')}
+ </div>
+ </div>
+ </div>
+ </div>
+ </Link>
+ </div>
+ </div>
+ )
+}
+
+export default GCULink
diff --git a/src/components/Options/GCU/GCUView.tsx b/src/components/Options/GCU/GCUView.tsx
index 49439dd79c4a4a105c69035967d3ccd8fd8d3730..999dd89a81f7d9e778f1b4d088eb1839b2e6a73f 100644
--- a/src/components/Options/GCU/GCUView.tsx
+++ b/src/components/Options/GCU/GCUView.tsx
@@ -4,7 +4,7 @@ import Header from 'components/Header/Header'
import GCUContent from 'components/Options/GCU/GCUContent'
import React, { useCallback, useState } from 'react'
-const GCUView: React.FC = () => {
+const GCUView = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
const defineHeaderHeight = useCallback((height: number) => {
diff --git a/src/components/Options/HelpLink/HelpLink.tsx b/src/components/Options/HelpLink/HelpLink.tsx
index e42ea407a4b7a131f4ccfb2525a43e8a15ca8560..d463ce5213c874808dce1bed554589738d594d68 100644
--- a/src/components/Options/HelpLink/HelpLink.tsx
+++ b/src/components/Options/HelpLink/HelpLink.tsx
@@ -1,45 +1,45 @@
-import Link from '@material-ui/core/Link'
-import QuestionMarkIcon from 'assets/icons/ico/questionMark.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import React, { Dispatch } from 'react'
-import { useDispatch } from 'react-redux'
-import { AppActionsTypes } from 'store'
-import { openFeedbackModal } from 'store/modal/modal.slice'
-import './HelpLink.scss'
-
-const HelpLink: React.FC = () => {
- const { t } = useI18n()
- const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
-
- return (
- <div
- className="help-root"
- onClick={() => dispatch(openFeedbackModal(true))}
- >
- <div className="help-content">
- <div className="help-header text-16-normal-uppercase">
- {t('help.title_help')}
- </div>
- <Link className="help-card-link">
- <div className="card optionCard">
- <div className="help-card">
- <div className="help-card-content">
- <StyledIcon
- className="help-card-content-icon"
- icon={QuestionMarkIcon}
- size={42}
- />
- <div className="help-card-content-title">
- {t('help.read_help')}
- </div>
- </div>
- </div>
- </div>
- </Link>
- </div>
- </div>
- )
-}
-
-export default HelpLink
+import Link from '@material-ui/core/Link'
+import QuestionMarkIcon from 'assets/icons/ico/questionMark.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React, { Dispatch } from 'react'
+import { useDispatch } from 'react-redux'
+import { AppActionsTypes } from 'store'
+import { openFeedbackModal } from 'store/modal/modal.slice'
+import './HelpLink.scss'
+
+const HelpLink = () => {
+ const { t } = useI18n()
+ const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
+
+ return (
+ <div
+ className="help-root"
+ onClick={() => dispatch(openFeedbackModal(true))}
+ >
+ <div className="help-content">
+ <div className="help-header text-16-normal-uppercase">
+ {t('help.title_help')}
+ </div>
+ <Link className="help-card-link">
+ <div className="card optionCard">
+ <div className="help-card">
+ <div className="help-card-content">
+ <StyledIcon
+ className="help-card-content-icon"
+ icon={QuestionMarkIcon}
+ size={42}
+ />
+ <div className="help-card-content-title">
+ {t('help.read_help')}
+ </div>
+ </div>
+ </div>
+ </div>
+ </Link>
+ </div>
+ </div>
+ )
+}
+
+export default HelpLink
diff --git a/src/components/Options/LegalNotice/LegalNoticeContent.tsx b/src/components/Options/LegalNotice/LegalNoticeContent.tsx
index c19f2bff78e1662cdf148e9c30e40ebdd56a0142..eba23d5b0b9e5b79016ca01453e24d9aa6298068 100644
--- a/src/components/Options/LegalNotice/LegalNoticeContent.tsx
+++ b/src/components/Options/LegalNotice/LegalNoticeContent.tsx
@@ -3,7 +3,7 @@ import React from 'react'
import { decoreText } from 'utils/decoreText'
import './legalNoticeView.scss'
-const LegalNoticeContent: React.FC = () => {
+const LegalNoticeContent = () => {
const { t } = useI18n()
return (
<>
diff --git a/src/components/Options/LegalNotice/LegalNoticeLink.tsx b/src/components/Options/LegalNotice/LegalNoticeLink.tsx
index 90c48a35dac9dd9a668869b9e9ed6b7d735e699b..5475686d5866eff333af781dbb4262a6f68c646e 100644
--- a/src/components/Options/LegalNotice/LegalNoticeLink.tsx
+++ b/src/components/Options/LegalNotice/LegalNoticeLink.tsx
@@ -1,52 +1,52 @@
-import Link from '@material-ui/core/Link'
-import LegalNoticeIcon from 'assets/icons/ico/legal-notice.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { UsageEventType } from 'enum/usageEvent.enum'
-import React, { useCallback } from 'react'
-import { Link as RouterLink } from 'react-router-dom'
-import UsageEventService from 'services/usageEvent.service'
-import './legalNoticeLink.scss'
-
-const LegalNoticeLink: React.FC = () => {
- const { t } = useI18n()
- const client = useClient()
- const emitNavEvent = useCallback(async () => {
- await UsageEventService.addEvent(client, {
- type: UsageEventType.NAVIGATION_EVENT,
- target: 'legalNotice',
- })
- }, [client])
- return (
- <div className="legal-notice-root">
- <div className="legal-notice-content">
- <div className="legal-notice-header text-16-normal-uppercase">
- {t('legal.title_legal')}
- </div>
- <Link
- className="legal-notice-card-link"
- component={RouterLink}
- to="/options/legalnotice"
- >
- <div className="card optionCard" onClick={emitNavEvent}>
- <div className="legal-notice-card">
- <div className="legal-notice-card-content">
- <StyledIcon
- className="legal-notice-card-content-icon"
- icon={LegalNoticeIcon}
- size={42}
- />
- <div className="legal-notice-card-content-title">
- {t('legal.read_legal')}
- </div>
- </div>
- </div>
- </div>
- </Link>
- </div>
- </div>
- )
-}
-
-export default LegalNoticeLink
+import Link from '@material-ui/core/Link'
+import LegalNoticeIcon from 'assets/icons/ico/legal-notice.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { UsageEventType } from 'enum/usageEvent.enum'
+import React, { useCallback } from 'react'
+import { Link as RouterLink } from 'react-router-dom'
+import UsageEventService from 'services/usageEvent.service'
+import './legalNoticeLink.scss'
+
+const LegalNoticeLink = () => {
+ const { t } = useI18n()
+ const client = useClient()
+ const emitNavEvent = useCallback(async () => {
+ await UsageEventService.addEvent(client, {
+ type: UsageEventType.NAVIGATION_EVENT,
+ target: 'legalNotice',
+ })
+ }, [client])
+ return (
+ <div className="legal-notice-root">
+ <div className="legal-notice-content">
+ <div className="legal-notice-header text-16-normal-uppercase">
+ {t('legal.title_legal')}
+ </div>
+ <Link
+ className="legal-notice-card-link"
+ component={RouterLink}
+ to="/options/legalnotice"
+ >
+ <div className="card optionCard" onClick={emitNavEvent}>
+ <div className="legal-notice-card">
+ <div className="legal-notice-card-content">
+ <StyledIcon
+ className="legal-notice-card-content-icon"
+ icon={LegalNoticeIcon}
+ size={42}
+ />
+ <div className="legal-notice-card-content-title">
+ {t('legal.read_legal')}
+ </div>
+ </div>
+ </div>
+ </div>
+ </Link>
+ </div>
+ </div>
+ )
+}
+
+export default LegalNoticeLink
diff --git a/src/components/Options/LegalNotice/LegalNoticeView.tsx b/src/components/Options/LegalNotice/LegalNoticeView.tsx
index 6f66c937f972ec37b0bb96b4ae15bd32b75150f6..cd7b6723a5498a27ed20706681863cee96b2e2b9 100644
--- a/src/components/Options/LegalNotice/LegalNoticeView.tsx
+++ b/src/components/Options/LegalNotice/LegalNoticeView.tsx
@@ -5,7 +5,7 @@ import React, { useCallback, useState } from 'react'
import LegalNoticeContent from './LegalNoticeContent'
import './legalNoticeView.scss'
-const LegalNoticeView: React.FC = () => {
+const LegalNoticeView = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
const defineHeaderHeight = useCallback((height: number) => {
diff --git a/src/components/Options/MatomoOptOut/MatomoOptOut.tsx b/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
index 04bf325167112608fd5994532ae21eddad8cbfd5..5ddd959112782634293eb4dc6c742254b649a7b6 100644
--- a/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
+++ b/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
@@ -4,7 +4,7 @@ import './matomoOptOut.scss'
declare let __PIWIK_TRACKER_URL__: string
-const MatomoOptOut: React.FC = () => {
+const MatomoOptOut = () => {
const { t } = useI18n()
const baseUrl = __PIWIK_TRACKER_URL__
diff --git a/src/components/Options/OptionsView.tsx b/src/components/Options/OptionsView.tsx
index 8fd37c74a2cfd4f320954aa00290beb25027ca9e..baf6819f2a0d51d74d764ef10397e1041f650cc2 100644
--- a/src/components/Options/OptionsView.tsx
+++ b/src/components/Options/OptionsView.tsx
@@ -13,7 +13,7 @@ import ProfileTypeOptions from './ProfileTypeOptions/ProfileTypeOptions'
import ReportOptions from './ReportOptions/ReportOptions'
import Version from './Version/Version'
-const OptionsView: React.FC = () => {
+const OptionsView = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
const defineHeaderHeight = (height: number) => {
setHeaderHeight(height)
diff --git a/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
index 72a98af3e38651d4a5183dcba9d805d6e2d2746d..79fab17416acdb05de78815e3c60dd48b7cd7a29 100644
--- a/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
+++ b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
@@ -25,7 +25,7 @@ import { useNavigate } from 'react-router-dom'
import { AppStore } from 'store'
import './profileTypeOptions.scss'
-const ProfileTypeOptions: React.FC = () => {
+const ProfileTypeOptions = () => {
const { profile, profileType } = useSelector(
(state: AppStore) => state.ecolyo
)
diff --git a/src/components/Options/ProfileTypeOptions/profileTypeOptions.scss b/src/components/Options/ProfileTypeOptions/profileTypeOptions.scss
index 5f912a4f9e2bdebbcb530fb3193151c03955ee16..8dfc6023eff956b94d903867850bda2fc1f7669b 100644
--- a/src/components/Options/ProfileTypeOptions/profileTypeOptions.scss
+++ b/src/components/Options/ProfileTypeOptions/profileTypeOptions.scss
@@ -61,15 +61,10 @@
}
button.profile-link {
- color: $grey-bright;
- text-decoration: none;
- min-height: 4rem;
+ height: 64px !important;
.profile-icon {
vertical-align: middle;
}
- .link-label {
- margin-left: 1rem;
- }
> button {
margin-bottom: 0;
> div {
diff --git a/src/components/Options/ReportOptions/ReportOptions.tsx b/src/components/Options/ReportOptions/ReportOptions.tsx
index b311b3aa81ba36268a772f545c1e682ad8eff322..f24ed8ad617ba3e00d17a6e691037208b78ba6ea 100644
--- a/src/components/Options/ReportOptions/ReportOptions.tsx
+++ b/src/components/Options/ReportOptions/ReportOptions.tsx
@@ -1,181 +1,181 @@
-import { Button } from '@material-ui/core'
-import StyledSwitch from 'components/CommonKit/Switch/StyledSwitch'
-import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { FluidState, FluidType } from 'enum/fluid.enum'
-import { TimeStep } from 'enum/timeStep.enum'
-import { DateTime } from 'luxon'
-import { Dataload, TimePeriod } from 'models'
-import React, { Dispatch, useCallback, useEffect, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import ConsumptionDataManager from 'services/consumption.service'
-import { AppActionsTypes, AppStore } from 'store'
-import { updateProfile } from 'store/profile/profile.actions'
-import './reportOptions.scss'
-
-const ReportOptions: React.FC = () => {
- const { t } = useI18n()
- const client = useClient()
- const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
- const {
- global: { fluidStatus },
- profile,
- } = useSelector((state: AppStore) => state.ecolyo)
- const [maxDayData, setLastSemesterMaxDay] = useState<Dataload | null>(null)
-
- const updateProfileReport = async (value: boolean) => {
- dispatch(updateProfile({ sendAnalysisNotification: value }))
- }
-
- const updateProfileAlert = useCallback(
- async (value: boolean) => {
- dispatch(updateProfile({ sendConsumptionAlert: value }))
- },
- [dispatch]
- )
-
- const setWaterLimit = (e: React.ChangeEvent<HTMLInputElement>) => {
- if (e.target.value !== null && parseInt(e.target.value) > 0) {
- dispatch(
- updateProfile({ waterDailyConsumptionLimit: parseInt(e.target.value) })
- )
- } else {
- updateProfileAlert(false)
- }
- }
-
- const toggleAnalysisNotification = () => {
- profile.sendAnalysisNotification
- ? updateProfileReport(false)
- : updateProfileReport(true)
- }
-
- const handleAlertChange = (e: React.ChangeEvent<HTMLInputElement>) => {
- e.target.checked ? updateProfileAlert(true) : updateProfileAlert(false)
- }
-
- useEffect(() => {
- let subscribed = true
- async function getMaxLoadData() {
- const timePeriod: TimePeriod = {
- startDate: DateTime.now().minus({ month: 6 }).startOf('month'),
- endDate: DateTime.now(),
- }
- const consumptionService = new ConsumptionDataManager(client)
- const lastSemesterMax = await consumptionService.getMaxLoad(
- timePeriod,
- TimeStep.DAY,
- [FluidType.WATER],
- undefined,
- false,
- true
- )
- if (lastSemesterMax) {
- setLastSemesterMaxDay(lastSemesterMax as Dataload)
- }
- }
- if (subscribed) {
- getMaxLoadData()
- }
- return () => {
- subscribed = false
- }
- }, [
- client,
- profile.sendConsumptionAlert,
- profile.waterDailyConsumptionLimit,
- updateProfileAlert,
- ])
- return (
- <div className="report-option-root">
- <div className="report-option-content">
- <div className="head text-16-normal-uppercase">
- {t('profile.report.title_bilan')}
- </div>
- {/* Monthly Report activation */}
- <div className="switch-container-bilan">
- <span className="switch-label text-16-normal">
- {t('profile.report.switch_label_bilan')}
- </span>
- <div className="button-container">
- <Button
- aria-label={t('unsubscribe.button_accessibility')}
- onClick={() => toggleAnalysisNotification()}
- variant={'contained'}
- classes={{
- root: 'btn-highlight',
- label: 'text-18-bold',
- }}
- type="submit"
- >
- {profile.sendAnalysisNotification
- ? t('profile.report.deactivate')
- : t('profile.report.activate')}
- </Button>
- </div>
- </div>
- {/* Consumption Alert activation */}
- {fluidStatus[FluidType.WATER].status !== FluidState.NOT_CONNECTED &&
- fluidStatus[FluidType.WATER].status !==
- FluidState.KONNECTOR_NOT_FOUND &&
- fluidStatus[FluidType.WATER].status !==
- FluidState.ERROR_LOGIN_FAILED && (
- <>
- <div className="head text-16-normal-uppercase">
- {t('profile.report.title_alert')}
- </div>
- <div className="switch-container-alert">
- <StyledSwitch
- checked={profile.sendConsumptionAlert}
- onChange={handleAlertChange}
- inputProps={{
- 'aria-label': t(
- 'profile.accessibility.button_toggle_consumption_alert'
- ),
- }}
- />
- <span className="switch-label text-16-normal">
- {t('profile.report.switch_label_alert')}
- </span>
- </div>
- </>
- )}
- {profile.sendConsumptionAlert && (
- <div className="alert-inputs-display">
- <div className="alert-input-row">
- <div className="head text-16-normal">
- {t('profile.report.input_label_alert')}
- </div>
- <div className="switch-container-alert">
- <input
- className="input-style"
- type={'number'}
- defaultValue={
- profile.waterDailyConsumptionLimit === 0
- ? ''
- : profile.waterDailyConsumptionLimit
- }
- onBlur={setWaterLimit}
- aria-label={t(
- 'profile.accessibility.input_water_alert_report'
- )}
- inputMode="numeric"
- />
- <span className="switch-label text-16-normal">L</span>
- </div>
- </div>
- {maxDayData && (
- <div className="alert-input-subtext">
- {t('profile.report.input_label_subtext_alert')}
- {Math.round(maxDayData.value)}
- {' L'}
- </div>
- )}
- </div>
- )}
- </div>
- </div>
- )
-}
-
-export default ReportOptions
+import { Button } from '@material-ui/core'
+import StyledSwitch from 'components/CommonKit/Switch/StyledSwitch'
+import { useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { FluidState, FluidType } from 'enum/fluid.enum'
+import { TimeStep } from 'enum/timeStep.enum'
+import { DateTime } from 'luxon'
+import { Dataload, TimePeriod } from 'models'
+import React, { Dispatch, useCallback, useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import ConsumptionDataManager from 'services/consumption.service'
+import { AppActionsTypes, AppStore } from 'store'
+import { updateProfile } from 'store/profile/profile.actions'
+import './reportOptions.scss'
+
+const ReportOptions = () => {
+ const { t } = useI18n()
+ const client = useClient()
+ const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
+ const {
+ global: { fluidStatus },
+ profile,
+ } = useSelector((state: AppStore) => state.ecolyo)
+ const [maxDayData, setLastSemesterMaxDay] = useState<Dataload | null>(null)
+
+ const updateProfileReport = async (value: boolean) => {
+ dispatch(updateProfile({ sendAnalysisNotification: value }))
+ }
+
+ const updateProfileAlert = useCallback(
+ async (value: boolean) => {
+ dispatch(updateProfile({ sendConsumptionAlert: value }))
+ },
+ [dispatch]
+ )
+
+ const setWaterLimit = (e: React.ChangeEvent<HTMLInputElement>) => {
+ if (e.target.value !== null && parseInt(e.target.value) > 0) {
+ dispatch(
+ updateProfile({ waterDailyConsumptionLimit: parseInt(e.target.value) })
+ )
+ } else {
+ updateProfileAlert(false)
+ }
+ }
+
+ const toggleAnalysisNotification = () => {
+ profile.sendAnalysisNotification
+ ? updateProfileReport(false)
+ : updateProfileReport(true)
+ }
+
+ const handleAlertChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ e.target.checked ? updateProfileAlert(true) : updateProfileAlert(false)
+ }
+
+ useEffect(() => {
+ let subscribed = true
+ async function getMaxLoadData() {
+ const timePeriod: TimePeriod = {
+ startDate: DateTime.now().minus({ month: 6 }).startOf('month'),
+ endDate: DateTime.now(),
+ }
+ const consumptionService = new ConsumptionDataManager(client)
+ const lastSemesterMax = await consumptionService.getMaxLoad(
+ timePeriod,
+ TimeStep.DAY,
+ [FluidType.WATER],
+ undefined,
+ false,
+ true
+ )
+ if (lastSemesterMax) {
+ setLastSemesterMaxDay(lastSemesterMax as Dataload)
+ }
+ }
+ if (subscribed) {
+ getMaxLoadData()
+ }
+ return () => {
+ subscribed = false
+ }
+ }, [
+ client,
+ profile.sendConsumptionAlert,
+ profile.waterDailyConsumptionLimit,
+ updateProfileAlert,
+ ])
+ return (
+ <div className="report-option-root">
+ <div className="report-option-content">
+ <div className="head text-16-normal-uppercase">
+ {t('profile.report.title_bilan')}
+ </div>
+ {/* Monthly Report activation */}
+ <div className="switch-container-bilan">
+ <span className="switch-label text-16-normal">
+ {t('profile.report.switch_label_bilan')}
+ </span>
+ <div className="button-container">
+ <Button
+ aria-label={t('unsubscribe.button_accessibility')}
+ onClick={() => toggleAnalysisNotification()}
+ variant={'contained'}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-18-bold',
+ }}
+ type="submit"
+ >
+ {profile.sendAnalysisNotification
+ ? t('profile.report.deactivate')
+ : t('profile.report.activate')}
+ </Button>
+ </div>
+ </div>
+ {/* Consumption Alert activation */}
+ {fluidStatus[FluidType.WATER].status !== FluidState.NOT_CONNECTED &&
+ fluidStatus[FluidType.WATER].status !==
+ FluidState.KONNECTOR_NOT_FOUND &&
+ fluidStatus[FluidType.WATER].status !==
+ FluidState.ERROR_LOGIN_FAILED && (
+ <>
+ <div className="head text-16-normal-uppercase">
+ {t('profile.report.title_alert')}
+ </div>
+ <div className="switch-container-alert">
+ <StyledSwitch
+ checked={profile.sendConsumptionAlert}
+ onChange={handleAlertChange}
+ inputProps={{
+ 'aria-label': t(
+ 'profile.accessibility.button_toggle_consumption_alert'
+ ),
+ }}
+ />
+ <span className="switch-label text-16-normal">
+ {t('profile.report.switch_label_alert')}
+ </span>
+ </div>
+ </>
+ )}
+ {profile.sendConsumptionAlert && (
+ <div className="alert-inputs-display">
+ <div className="alert-input-row">
+ <div className="head text-16-normal">
+ {t('profile.report.input_label_alert')}
+ </div>
+ <div className="switch-container-alert">
+ <input
+ className="input-style"
+ type={'number'}
+ defaultValue={
+ profile.waterDailyConsumptionLimit === 0
+ ? ''
+ : profile.waterDailyConsumptionLimit
+ }
+ onBlur={setWaterLimit}
+ aria-label={t(
+ 'profile.accessibility.input_water_alert_report'
+ )}
+ inputMode="numeric"
+ />
+ <span className="switch-label text-16-normal">L</span>
+ </div>
+ </div>
+ {maxDayData && (
+ <div className="alert-input-subtext">
+ {t('profile.report.input_label_subtext_alert')}
+ {Math.round(maxDayData.value)}
+ {' L'}
+ </div>
+ )}
+ </div>
+ )}
+ </div>
+ </div>
+ )
+}
+
+export default ReportOptions
diff --git a/src/components/Options/Unsubscribe/UnSubscribe.tsx b/src/components/Options/Unsubscribe/UnSubscribe.tsx
index 8b13800328c9a8b700ea825730da73c886855e2b..1ce8beeaae6f58656ba78f755aec99863aeb804f 100644
--- a/src/components/Options/Unsubscribe/UnSubscribe.tsx
+++ b/src/components/Options/Unsubscribe/UnSubscribe.tsx
@@ -12,7 +12,7 @@ import { AppActionsTypes } from 'store'
import { updateProfile } from 'store/profile/profile.actions'
import './unSubscribe.scss'
-const UnSubscribe: React.FC = () => {
+const UnSubscribe = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
const defineHeaderHeight = (height: number) => {
setHeaderHeight(height)
diff --git a/src/components/Options/Version/Version.tsx b/src/components/Options/Version/Version.tsx
index 043b118826e19b7f95eafc562edddee5ef9dc803..151b8189fb13023d79fa2aff723f78d4e15ae65f 100644
--- a/src/components/Options/Version/Version.tsx
+++ b/src/components/Options/Version/Version.tsx
@@ -2,7 +2,7 @@ import { Client, useClient } from 'cozy-client'
import React from 'react'
import './version.scss'
-const Version: React.FC = () => {
+const Version = () => {
const client: Client = useClient()
return (
<div className="version-root text-14-normal">
diff --git a/src/components/PartnerIssue/PartnerIssueModal.tsx b/src/components/PartnerIssue/PartnerIssueModal.tsx
index 3e449f713934ae6f63d3ad17c0a21f0f7a7abd60..59d4c7842b84cbee2a94db15aaed0791087312ae 100644
--- a/src/components/PartnerIssue/PartnerIssueModal.tsx
+++ b/src/components/PartnerIssue/PartnerIssueModal.tsx
@@ -17,7 +17,7 @@ interface PartnerIssueModalProps {
handleCloseClick: (fluidType: FluidType) => void
}
-const PartnerIssueModal: React.FC<PartnerIssueModalProps> = ({
+const PartnerIssueModal = ({
open,
issuedFluid,
handleCloseClick,
diff --git a/src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx b/src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx
index 998cb8fb79e2d4353bfd5cfb230b8a25e5be3e58..d5af35ce3f974fba88a3ab4f929fa1a0c3e5ce88 100644
--- a/src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx
+++ b/src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx
@@ -14,7 +14,7 @@ interface FluidPerformanceIndicatorProps {
comparisonDate: DateTime
}
-const FluidPerformanceIndicator: React.FC<FluidPerformanceIndicatorProps> = ({
+const FluidPerformanceIndicator = ({
performanceIndicator,
fluidType,
comparisonDate,
diff --git a/src/components/ProfileType/ProfileTypeFinished.tsx b/src/components/ProfileType/ProfileTypeFinished.tsx
index 57d208a83342ae7e2d90b7cffeec905f1a015022..c47d58667093a21e73439766aeaff0f0fb7f25f3 100644
--- a/src/components/ProfileType/ProfileTypeFinished.tsx
+++ b/src/components/ProfileType/ProfileTypeFinished.tsx
@@ -4,8 +4,9 @@ import finishIcon from 'assets/icons/visu/profileType/finish.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import useExploration from 'components/Hooks/useExploration'
import 'components/ProfileType/profileTypeFinished.scss'
-import { useClient } from 'cozy-client'
+import { Client, useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { PROFILETYPE_DOCTYPE } from 'doctypes'
import { UsageEventType } from 'enum/usageEvent.enum'
import { UserExplorationID } from 'enum/userExploration.enum'
import { DateTime } from 'luxon'
@@ -19,11 +20,9 @@ import ProfileTypeEntityService from 'services/profileTypeEntity.service'
import UsageEventService from 'services/usageEvent.service'
import { AppActionsTypes, AppStore } from 'store'
import { updateProfile } from 'store/profile/profile.actions'
-import { newProfileTypeEntry } from 'store/profileType/profileType.actions'
+import { setProfileType } from 'store/profileType/profileType.slice'
-const ProfileTypeFinished: React.FC<{ profileType: ProfileType }> = ({
- profileType,
-}) => {
+const ProfileTypeFinished = ({ profileType }: { profileType: ProfileType }) => {
const { t } = useI18n()
const location = useLocation()
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
@@ -46,7 +45,7 @@ const ProfileTypeFinished: React.FC<{ profileType: ProfileType }> = ({
useEffect(() => {
async function checkForExistingProfileType() {
- const consistentProfileType: ProfileType =
+ const consistentProfileType =
ProfileTypeService.checkConsistency(profileType)
const chosenPeriod: TimePeriod = {
startDate: profileType.updateDate.setZone('utc', {
@@ -64,7 +63,7 @@ const ProfileTypeFinished: React.FC<{ profileType: ProfileType }> = ({
myProfileTypes
)
if (destroyPT) {
- dispatch(newProfileTypeEntry(consistentProfileType))
+ await createNewProfileType(client, consistentProfileType)
setIsSaved(true)
dispatch(
updateProfile({
@@ -77,7 +76,7 @@ const ProfileTypeFinished: React.FC<{ profileType: ProfileType }> = ({
Sentry.captureException('error in profileTypeFinished')
}
} else {
- dispatch(newProfileTypeEntry(consistentProfileType))
+ await createNewProfileType(client, consistentProfileType)
setIsSaved(true)
dispatch(
updateProfile({
@@ -88,6 +87,20 @@ const ProfileTypeFinished: React.FC<{ profileType: ProfileType }> = ({
}
}
+ async function createNewProfileType(
+ client: Client,
+ consistentProfileType: ProfileType
+ ) {
+ const { data: newProfileType } = await client.create(
+ PROFILETYPE_DOCTYPE,
+ consistentProfileType
+ )
+
+ if (newProfileType) {
+ dispatch(setProfileType(newProfileType))
+ }
+ }
+
if (!isSaved) {
checkForExistingProfileType()
if (
diff --git a/src/components/ProfileType/ProfileTypeFormDateSelection.tsx b/src/components/ProfileType/ProfileTypeFormDateSelection.tsx
index 025d2993252d4288bc18949b496b082a6db77016..d9b203f0cc59a06ce30e2893d5158875694bfb66 100644
--- a/src/components/ProfileType/ProfileTypeFormDateSelection.tsx
+++ b/src/components/ProfileType/ProfileTypeFormDateSelection.tsx
@@ -8,43 +8,43 @@ import { DateTime } from 'luxon'
import {
ProfileType,
ProfileTypeAnswer,
- ProfileTypeAnswerChoices,
+ ProfileTypeValues,
} from 'models/profileType.model'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useState } from 'react'
+import { getMonthFullName } from 'utils/utils'
interface ProfileTypeFormDateSelectionProps {
step: ProfileTypeStepForm
- viewedStep: ProfileTypeStepForm
profileType: ProfileType
answerType: ProfileTypeAnswer
- setNextStep: (_profileType?: ProfileType) => void
- setPreviousStep: (_profileType: ProfileType) => void
- isProfileTypeComplete: boolean
+ setNextStep: (_profileType: ProfileType) => void
+ setPreviousStep: () => void
}
interface SelectionMonth {
- label: string | null
+ label: string
value: string
}
-const ProfileTypeFormDateSelection: React.FC<
- ProfileTypeFormDateSelectionProps
-> = ({
+const ProfileTypeFormDateSelection = ({
step,
- viewedStep,
profileType,
answerType,
setNextStep,
setPreviousStep,
- isProfileTypeComplete,
}: ProfileTypeFormDateSelectionProps) => {
const { t } = useI18n()
- const [selectedMonth, setSelectedMonth] = useState<any>({
+ const [selectedYear, setSelectedYear] = useState<number>(DateTime.now().year)
+ const [selectedMonth, setSelectedMonth] = useState<SelectionMonth>({
label: DateTime.now().toLocaleString({ month: 'long' }),
value: DateTime.now().month.toString().padStart(2, '0'), // Date.getMonth starts at 0
})
- const [selectedYear, setSelectedYear] = useState<number>(DateTime.now().year)
- const [answer, setAnswer] = useState<ProfileTypeAnswerChoices>('')
+ const buildISODate = (year: string, month: string) =>
+ DateTime.fromISO(`${year}-${month}-01`)
+
+ const [answer, setAnswer] = useState<ProfileTypeValues>(
+ buildISODate(selectedYear.toString(), selectedMonth.value)
+ )
const selectMonths: SelectionMonth[] = [
{
@@ -76,7 +76,7 @@ const ProfileTypeFormDateSelection: React.FC<
value: '07',
},
{
- label: 'Aout',
+ label: 'Août',
value: '08',
},
{
@@ -105,76 +105,32 @@ const ProfileTypeFormDateSelection: React.FC<
selectYears.push(i)
}
- function getMonthFullName(month: number) {
- switch (month) {
- case 1:
- return 'Janvier'
- case 2:
- return 'Février'
- case 3:
- return 'Mars'
- case 4:
- return 'Avril'
- case 5:
- return 'Mai'
- case 6:
- return 'Juin'
- case 7:
- return 'Juillet'
- case 8:
- return 'Aout'
- case 9:
- return 'Septembre'
- case 10:
- return 'Octobre'
- case 11:
- return 'Novembre'
- case 12:
- return 'Décembre'
- default:
- return null
- }
- }
-
const handlePrevious = useCallback(() => {
- setPreviousStep(profileType)
- }, [profileType, setPreviousStep])
+ setPreviousStep()
+ }, [setPreviousStep])
- const handleNext = useCallback(() => {
- profileType[answerType.attribute] = answer
- setNextStep(profileType)
- }, [profileType, setNextStep, answer, answerType.attribute])
+ const handleNext = () => {
+ setNextStep({ ...profileType, [answerType.attribute]: answer })
+ }
function handleSelectMonth(event: any) {
setSelectedMonth({
value: event.target.value,
label: getMonthFullName(parseInt(event.target.value)),
})
- const isoString: string = selectedYear + '-' + selectedMonth.value + '-01'
- setAnswer(DateTime.fromISO(isoString))
+ setAnswer(buildISODate(selectedYear.toString(), event.target.value))
}
function handleSelectYear(event: any) {
setSelectedYear(parseInt(event.target.value))
- const isoString: string = selectedYear + '-' + selectedMonth.value + '-01'
- setAnswer(DateTime.fromISO(isoString))
+ setAnswer(buildISODate(event.target.value, selectedMonth.value))
}
- useEffect(() => {
- if (step < viewedStep || isProfileTypeComplete) {
- const isoString: string = selectedYear + '-' + selectedMonth.value + '-01'
- setAnswer(DateTime.fromISO(isoString))
- profileType[answerType.attribute] = DateTime.fromISO(isoString)
- }
- }, [
- step,
- viewedStep,
- profileType,
- answerType,
- isProfileTypeComplete,
- selectedYear,
- selectedMonth.value,
- ])
+ /** If current year, only show past and present months else show full months */
+ const renderMonths =
+ selectedYear === DateTime.now().year
+ ? selectMonths.slice(0, DateTime.now().month)
+ : selectMonths
return (
<>
@@ -185,13 +141,14 @@ const ProfileTypeFormDateSelection: React.FC<
`profile_type.${ProfileTypeStepForm[step].toLowerCase()}.question`
)}
</div>
- {answer !== null ? (
+ {answer !== null && (
<div className="select-container">
<div className="date-select">
<Select
labelId="selectYearDate"
className="year"
defaultValue={selectedYear}
+ value={selectedYear}
onChange={e => handleSelectYear(e)}
>
{selectYears.map(year => (
@@ -203,36 +160,25 @@ const ProfileTypeFormDateSelection: React.FC<
</div>
<div className="date-select">
<Select
- native={false}
labelId="selectMonthDate"
className="month"
defaultValue={selectedMonth.value}
+ value={selectedMonth.value}
onChange={e => handleSelectMonth(e)}
>
- {/* if current year, only show past and present months else show full months */}
- {selectedYear === DateTime.now().year
- ? selectMonths.slice(0, DateTime.now().month).map(month => (
- <MenuItem
- value={month.value}
- key={month.value}
- className="date-option"
- >
- {month.label}
- </MenuItem>
- ))
- : selectMonths.map(month => (
- <MenuItem
- value={month.value}
- key={month.value}
- className="date-option"
- >
- {month.label}
- </MenuItem>
- ))}
+ {renderMonths.map(month => (
+ <MenuItem
+ value={month.value}
+ key={month.value}
+ className="date-option"
+ >
+ {month.label}
+ </MenuItem>
+ ))}
</Select>
</div>
</div>
- ) : null}
+ )}
</div>
<FormNavigation
step={step}
diff --git a/src/components/ProfileType/ProfileTypeFormMultiChoice.spec.tsx b/src/components/ProfileType/ProfileTypeFormMultiChoice.spec.tsx
index 8b5019a070025c88702e74b651764ab955b94029..5d4160e1f38963231dc63c36589da244c8c7713d 100644
--- a/src/components/ProfileType/ProfileTypeFormMultiChoice.spec.tsx
+++ b/src/components/ProfileType/ProfileTypeFormMultiChoice.spec.tsx
@@ -39,11 +39,10 @@ describe('ProfileTypeFormMultiChoice component', () => {
<ProfileTypeFormMultiChoice
step={ProfileTypeStepForm.COOKING_FLUID}
viewedStep={ProfileTypeStepForm.AREA}
- profileType={mockProfileType}
+ currentProfileType={mockProfileType}
answerType={mockProfileTypeAnswers[1]}
setNextStep={mockhandlePrevious}
setPreviousStep={mockhandleNext}
- isProfileTypeComplete={false}
/>
</Provider>
)
diff --git a/src/components/ProfileType/ProfileTypeFormMultiChoice.tsx b/src/components/ProfileType/ProfileTypeFormMultiChoice.tsx
index f1210185c28b2880619f23c54be80c1ef5617264..95c275ca6ed38d8739724fe4e400e87fb8f930c0 100644
--- a/src/components/ProfileType/ProfileTypeFormMultiChoice.tsx
+++ b/src/components/ProfileType/ProfileTypeFormMultiChoice.tsx
@@ -3,41 +3,37 @@ import FormNavigation from 'components/FormGlobal/FormNavigation'
import FormProgress from 'components/FormGlobal/FormProgress'
import 'components/ProfileType/profileTypeForm.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import {
- IndividualInsulationWork,
- ProfileTypeStepForm,
-} from 'enum/profileType.enum'
+import { ProfileTypeStepForm } from 'enum/profileType.enum'
import { remove } from 'lodash'
-import {
- ProfileType,
- ProfileTypeAnswer,
- ProfileTypeAnswerChoices,
-} from 'models/profileType.model'
+import { ProfileType, ProfileTypeAnswer } from 'models/profileType.model'
import React, { useCallback, useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
+import { AppStore } from 'store'
interface ProfileTypeFormMultiChoiceProps {
step: ProfileTypeStepForm
viewedStep: ProfileTypeStepForm
- profileType: ProfileType
+ currentProfileType: ProfileType
answerType: ProfileTypeAnswer
- setNextStep: (_profileType?: ProfileType) => void
- setPreviousStep: (_profileType: ProfileType) => void
- isProfileTypeComplete: boolean
+ setNextStep: (_profileType: ProfileType) => void
+ setPreviousStep: () => void
}
-const ProfileTypeFormMultiChoice: React.FC<ProfileTypeFormMultiChoiceProps> = ({
+const ProfileTypeFormMultiChoice = ({
step,
viewedStep,
- profileType,
+ currentProfileType,
answerType,
setNextStep,
setPreviousStep,
- isProfileTypeComplete,
}: ProfileTypeFormMultiChoiceProps) => {
const { t } = useI18n()
- const [answer, setAnswer] = useState<ProfileTypeAnswerChoices[]>([])
+ const { isProfileTypeCompleted } = useSelector(
+ (state: AppStore) => state.ecolyo.profile
+ )
+ const [answer, setAnswer] = useState<string[]>([])
- const handleChange = (value: ProfileTypeAnswerChoices) => {
+ const handleChange = (value: string) => {
let tempAnswer = [...answer]
if (value === 'none' && !tempAnswer.includes(value)) {
tempAnswer = [value]
@@ -54,31 +50,27 @@ const ProfileTypeFormMultiChoice: React.FC<ProfileTypeFormMultiChoiceProps> = ({
setAnswer(tempAnswer)
}
- const isChecked = (value: ProfileTypeAnswerChoices): boolean => {
- if (answer.includes(value)) {
- return true
- } else {
- return false
- }
+ const isChecked = (value: string): boolean => {
+ return answer.includes(value)
}
const handlePrevious = useCallback(() => {
- setPreviousStep(profileType)
- }, [profileType, setPreviousStep])
+ setPreviousStep()
+ }, [setPreviousStep])
const handleNext = useCallback(() => {
- profileType[answerType.attribute] = answer as IndividualInsulationWork[]
- setNextStep(profileType)
- }, [profileType, setNextStep, answer, answerType.attribute])
+ setNextStep({
+ ...currentProfileType,
+ [answerType.attribute]: answer,
+ })
+ }, [currentProfileType, setNextStep, answer, answerType.attribute])
useEffect(() => {
- const attribute = profileType[
- answerType.attribute
- ] as IndividualInsulationWork[]
- if (step < viewedStep || isProfileTypeComplete) {
- setAnswer(attribute)
+ // Set answer if profileType is completed
+ if (step < viewedStep || isProfileTypeCompleted) {
+ setAnswer(currentProfileType[answerType.attribute] as string[])
}
- }, [step, viewedStep, profileType, answerType, isProfileTypeComplete])
+ }, [step, viewedStep, currentProfileType, answerType, isProfileTypeCompleted])
return (
<>
@@ -92,31 +84,31 @@ const ProfileTypeFormMultiChoice: React.FC<ProfileTypeFormMultiChoiceProps> = ({
<span className="profile-question-hint">
{t('profile_type.multi_choices')}
</span>
- {answerType.choices.map(
- (value: ProfileTypeAnswerChoices, index: number) => {
- return value ? (
- <label
- key={index}
- className={classNames('checkbox', {
- ['answer-checked']: answer.includes(value),
- })}
- >
- <input
- type={'checkbox'}
- value={value}
- name={value.toString()}
- onChange={() => handleChange(value)}
- checked={isChecked(value)}
- />
- {t(
- `profile_type.${ProfileTypeStepForm[
- step
- ].toLowerCase()}.${value}`
- )}
- </label>
- ) : null
- }
- )}
+ {answerType.choices.map((value, index) => {
+ if (!value) return null
+ const stringValue = value.toString()
+ return (
+ <label
+ key={index}
+ className={classNames('checkbox', {
+ ['answer-checked']: answer.includes(stringValue),
+ })}
+ >
+ <input
+ type={'checkbox'}
+ value={stringValue}
+ name={stringValue}
+ onChange={() => handleChange(stringValue)}
+ checked={isChecked(stringValue)}
+ />
+ {t(
+ `profile_type.${ProfileTypeStepForm[
+ step
+ ].toLowerCase()}.${value}`
+ )}
+ </label>
+ )
+ })}
</div>
<FormNavigation
step={step}
diff --git a/src/components/ProfileType/ProfileTypeFormNumber.spec.tsx b/src/components/ProfileType/ProfileTypeFormNumber.spec.tsx
index 2631a9fa3567f9464eeabe6c15dec384bd6c7d15..c9b0f6aea21672cb10525809e8994263ce43e914 100644
--- a/src/components/ProfileType/ProfileTypeFormNumber.spec.tsx
+++ b/src/components/ProfileType/ProfileTypeFormNumber.spec.tsx
@@ -38,11 +38,10 @@ describe('ProfileTypeFormNumber component', () => {
<ProfileTypeFormNumber
step={ProfileTypeStepForm.COOKING_FLUID}
viewedStep={ProfileTypeStepForm.AREA}
- profileType={mockProfileType}
+ currentProfileType={mockProfileType}
answerType={mockProfileTypeAnswers[1]}
setNextStep={mockhandlePrevious}
setPreviousStep={mockhandleNext}
- isProfileTypeComplete={false}
/>
</Provider>
)
diff --git a/src/components/ProfileType/ProfileTypeFormNumber.tsx b/src/components/ProfileType/ProfileTypeFormNumber.tsx
index 66e36f2bbe30b49ace38ddbafbedf5e20b75e2c4..2b700fedc1d03328846830491e6e6db9e0dbf3c6 100644
--- a/src/components/ProfileType/ProfileTypeFormNumber.tsx
+++ b/src/components/ProfileType/ProfileTypeFormNumber.tsx
@@ -6,46 +6,48 @@ import { ProfileTypeStepForm } from 'enum/profileType.enum'
import {
ProfileType,
ProfileTypeAnswer,
- ProfileTypeAnswerChoices,
+ ProfileTypeValues,
} from 'models/profileType.model'
import React, { useCallback, useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
+import { AppStore } from 'store'
interface ProfileTypeFormNumberProps {
step: ProfileTypeStepForm
viewedStep: ProfileTypeStepForm
- profileType: ProfileType
+ currentProfileType: ProfileType
answerType: ProfileTypeAnswer
- setNextStep: (_profileType?: ProfileType) => void
- setPreviousStep: (_profileType: ProfileType) => void
- isProfileTypeComplete: boolean
+ setNextStep: (_profileType: ProfileType) => void
+ setPreviousStep: () => void
}
-const ProfileTypeFormNumber: React.FC<ProfileTypeFormNumberProps> = ({
+const ProfileTypeFormNumber = ({
step,
viewedStep,
- profileType,
+ currentProfileType,
answerType,
setNextStep,
setPreviousStep,
- isProfileTypeComplete,
}: ProfileTypeFormNumberProps) => {
const { t } = useI18n()
- const [answer, setAnswer] = useState<ProfileTypeAnswerChoices>('')
+ const { isProfileTypeCompleted } = useSelector(
+ (state: AppStore) => state.ecolyo.profile
+ )
+ const [answer, setAnswer] = useState<ProfileTypeValues>('')
const handlePrevious = useCallback(() => {
- setPreviousStep(profileType)
- }, [profileType, setPreviousStep])
+ setPreviousStep()
+ }, [setPreviousStep])
const handleNext = useCallback(() => {
- profileType[answerType.attribute] = answer
- setNextStep(profileType)
- }, [profileType, setNextStep, answer, answerType.attribute])
+ setNextStep({ ...currentProfileType, [answerType.attribute]: answer })
+ }, [currentProfileType, setNextStep, answer, answerType.attribute])
useEffect(() => {
- if (step < viewedStep || isProfileTypeComplete) {
- setAnswer(profileType[answerType.attribute])
+ if (step < viewedStep || isProfileTypeCompleted) {
+ setAnswer(currentProfileType[answerType.attribute])
}
- }, [step, viewedStep, profileType, answerType, isProfileTypeComplete])
+ }, [step, viewedStep, currentProfileType, answerType, isProfileTypeCompleted])
return (
<>
@@ -56,18 +58,18 @@ const ProfileTypeFormNumber: React.FC<ProfileTypeFormNumberProps> = ({
`profile_type.${ProfileTypeStepForm[step].toLowerCase()}.question`
)}
</div>
- {answer != null ? (
+ {answer != null && (
<label className={'text'}>
<input
type={'number'}
- value={answer}
+ value={answer.toString()}
name={answerType.attribute}
onChange={e => setAnswer(e.target.value)}
autoFocus
/>
m²
</label>
- ) : null}
+ )}
</div>
<FormNavigation
step={step}
diff --git a/src/components/ProfileType/ProfileTypeFormNumberSelection.spec.tsx b/src/components/ProfileType/ProfileTypeFormNumberSelection.spec.tsx
index e6cf7e1c3a13c3cc2a5ee9df31a53de051ee2dc7..ce1e6210ab9d44ea75f54a0981d53c83622ee59e 100644
--- a/src/components/ProfileType/ProfileTypeFormNumberSelection.spec.tsx
+++ b/src/components/ProfileType/ProfileTypeFormNumberSelection.spec.tsx
@@ -38,11 +38,10 @@ describe('ProfileTypeFormNumberSelection component', () => {
<ProfileTypeFormNumberSelection
step={ProfileTypeStepForm.COOKING_FLUID}
viewedStep={ProfileTypeStepForm.AREA}
- profileType={mockProfileType}
+ currentProfileType={mockProfileType}
answerType={mockProfileTypeAnswers[3]}
setNextStep={mockhandlePrevious}
setPreviousStep={mockhandleNext}
- isProfileTypeComplete={false}
/>
</Provider>
)
diff --git a/src/components/ProfileType/ProfileTypeFormNumberSelection.tsx b/src/components/ProfileType/ProfileTypeFormNumberSelection.tsx
index 944a82388a0830a1ffb40ae00c6255544e3455e9..034e8bde4ea6aeb0e360891e97308b93bb5b6a94 100644
--- a/src/components/ProfileType/ProfileTypeFormNumberSelection.tsx
+++ b/src/components/ProfileType/ProfileTypeFormNumberSelection.tsx
@@ -7,33 +7,34 @@ import { ProfileTypeStepForm } from 'enum/profileType.enum'
import {
ProfileType,
ProfileTypeAnswer,
- ProfileTypeAnswerChoices,
+ ProfileTypeValues,
} from 'models/profileType.model'
import React, { useCallback, useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
+import { AppStore } from 'store'
interface ProfileTypeFormNumberSelectionProps {
step: ProfileTypeStepForm
viewedStep: ProfileTypeStepForm
- profileType: ProfileType
+ currentProfileType: ProfileType
answerType: ProfileTypeAnswer
- setNextStep: (_profileType?: ProfileType) => void
- setPreviousStep: (_profileType: ProfileType) => void
- isProfileTypeComplete: boolean
+ setNextStep: (_profileType: ProfileType) => void
+ setPreviousStep: () => void
}
-const ProfileTypeFormNumberSelection: React.FC<
- ProfileTypeFormNumberSelectionProps
-> = ({
+const ProfileTypeFormNumberSelection = ({
step,
viewedStep,
- profileType,
+ currentProfileType,
answerType,
setNextStep,
setPreviousStep,
- isProfileTypeComplete,
}: ProfileTypeFormNumberSelectionProps) => {
const { t } = useI18n()
- const [answer, setAnswer] = useState<ProfileTypeAnswerChoices>('')
+ const { isProfileTypeCompleted } = useSelector(
+ (state: AppStore) => state.ecolyo.profile
+ )
+ const [answer, setAnswer] = useState<ProfileTypeValues>('')
const [index, setIndex] = useState<number>(0)
const decrement = () => {
@@ -47,25 +48,25 @@ const ProfileTypeFormNumberSelection: React.FC<
}
const handlePrevious = useCallback(() => {
- setPreviousStep(profileType)
- }, [profileType, setPreviousStep])
+ setPreviousStep()
+ }, [setPreviousStep])
const handleNext = useCallback(() => {
- profileType[answerType.attribute] = answer
- setNextStep(profileType)
- }, [profileType, setNextStep, answer, answerType.attribute])
+ setNextStep({ ...currentProfileType, [answerType.attribute]: answer })
+ }, [currentProfileType, setNextStep, answer, answerType.attribute])
useEffect(() => {
- if (step < viewedStep || isProfileTypeComplete) {
+ if (step < viewedStep || isProfileTypeCompleted) {
const foundIndex = answerType.choices.findIndex(
- element => element && element === profileType[answerType.attribute]
+ element =>
+ element && element === currentProfileType[answerType.attribute]
)
foundIndex > -1 && setIndex(foundIndex)
- setAnswer(profileType[answerType.attribute])
+ setAnswer(currentProfileType[answerType.attribute])
} else {
setAnswer(answerType.choices[0])
}
- }, [step, viewedStep, profileType, answerType, isProfileTypeComplete])
+ }, [step, viewedStep, currentProfileType, answerType, isProfileTypeCompleted])
return (
<>
@@ -88,7 +89,7 @@ const ProfileTypeFormNumberSelection: React.FC<
<label className={'number'}>
<input
type={'text'}
- value={answer}
+ value={answer.toString()}
name={answerType.attribute}
disabled={true}
/>
diff --git a/src/components/ProfileType/ProfileTypeFormSingleChoice.spec.tsx b/src/components/ProfileType/ProfileTypeFormSingleChoice.spec.tsx
index f8743a938df9351e4ba42963d8062b2b04a373ae..f4c4e4e8ae30882f352bca71897d48d8a4547d29 100644
--- a/src/components/ProfileType/ProfileTypeFormSingleChoice.spec.tsx
+++ b/src/components/ProfileType/ProfileTypeFormSingleChoice.spec.tsx
@@ -38,11 +38,10 @@ describe('ProfileTypeFormSingleChoice component', () => {
<ProfileTypeFormSingleChoice
step={ProfileTypeStepForm.COOKING_FLUID}
viewedStep={ProfileTypeStepForm.AREA}
- profileType={mockProfileType}
+ currentProfileType={mockProfileType}
answerType={mockProfileTypeAnswers[1]}
setNextStep={mockhandlePrevious}
setPreviousStep={mockhandleNext}
- isProfileTypeComplete={false}
/>
</Provider>
)
diff --git a/src/components/ProfileType/ProfileTypeFormSingleChoice.tsx b/src/components/ProfileType/ProfileTypeFormSingleChoice.tsx
index a4fc88272aa457a315d9bbdcc5b450affbe58552..85f3a0e17801a9d517d538f95cbc7c5ae9a8b105 100644
--- a/src/components/ProfileType/ProfileTypeFormSingleChoice.tsx
+++ b/src/components/ProfileType/ProfileTypeFormSingleChoice.tsx
@@ -4,51 +4,69 @@ import FormProgress from 'components/FormGlobal/FormProgress'
import 'components/ProfileType/profileTypeForm.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { ProfileTypeStepForm } from 'enum/profileType.enum'
+import { ProfileEcogesture } from 'models'
import {
ProfileType,
ProfileTypeAnswer,
- ProfileTypeAnswerChoices,
+ ProfileTypeValues,
} from 'models/profileType.model'
import React, { useCallback, useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
+import { AppStore } from 'store'
interface ProfileTypeFormSingleChoiceProps {
step: ProfileTypeStepForm
viewedStep: ProfileTypeStepForm
- profileType: ProfileType
+ currentProfileType: ProfileType
answerType: ProfileTypeAnswer
- setNextStep: (_profileType?: ProfileType) => void
- setPreviousStep: (_profileType: ProfileType) => void
- isProfileTypeComplete: boolean
+ setNextStep: (_profileType: ProfileType) => void
+ setPreviousStep: () => void
}
-const ProfileTypeFormSingleChoice: React.FC<
- ProfileTypeFormSingleChoiceProps
-> = ({
+const ProfileTypeFormSingleChoice = ({
step,
viewedStep,
- profileType,
+ currentProfileType,
answerType,
setNextStep,
setPreviousStep,
- isProfileTypeComplete,
}: ProfileTypeFormSingleChoiceProps) => {
const { t } = useI18n()
- const [answer, setAnswer] = useState<ProfileTypeAnswerChoices>('')
+ const {
+ profile: { isProfileTypeCompleted, isProfileEcogestureCompleted },
+ profileEcogesture,
+ } = useSelector((state: AppStore) => state.ecolyo)
+ const [answer, setAnswer] = useState<ProfileTypeValues>('')
const handlePrevious = useCallback(() => {
- setPreviousStep(profileType)
- }, [profileType, setPreviousStep])
+ setPreviousStep()
+ }, [setPreviousStep])
const handleNext = useCallback(() => {
- profileType[answerType.attribute] = answer
- setNextStep(profileType)
- }, [profileType, setNextStep, answer, answerType.attribute])
+ setNextStep({ ...currentProfileType, [answerType.attribute]: answer })
+ }, [currentProfileType, setNextStep, answer, answerType.attribute])
useEffect(() => {
- if (step < viewedStep || isProfileTypeComplete) {
- setAnswer(profileType[answerType.attribute])
+ // Set answer if profileType is completed
+ if (step < viewedStep || isProfileTypeCompleted) {
+ setAnswer(currentProfileType[answerType.attribute])
+ return
}
- }, [step, viewedStep, profileType, answerType, isProfileTypeComplete])
+ // Set answer if ecogestureProfile is completed
+ if (isProfileEcogestureCompleted) {
+ setAnswer(
+ profileEcogesture[answerType.attribute as keyof ProfileEcogesture]
+ )
+ }
+ }, [
+ step,
+ viewedStep,
+ currentProfileType,
+ answerType,
+ isProfileTypeCompleted,
+ isProfileEcogestureCompleted,
+ profileEcogesture,
+ ])
return (
<>
@@ -59,39 +77,39 @@ const ProfileTypeFormSingleChoice: React.FC<
`profile_type.${ProfileTypeStepForm[step].toLowerCase()}.question`
)}
</div>
- {answerType.choices.map(
- (value: ProfileTypeAnswerChoices, index: number) => {
- return value || value === 0 ? (
- <label
- key={index}
- className={classNames({
- ['radio_short']: answerType.choices.length < 5,
- ['radio_long']: answerType.choices.length > 4,
- ['answer-checked']: answer === value,
- })}
- >
- <input
- type={'radio'}
- value={value}
- name={value.toString()}
- onChange={() => setAnswer(value)}
- checked={answer === value ? true : false}
- />
- {t(
- `profile_type.${ProfileTypeStepForm[
- step
- ].toLowerCase()}.${value}`
- )}
- </label>
- ) : null
- }
- )}
+ {answerType.choices.map((value, index) => {
+ if (!value && value !== 0) return null
+
+ return (
+ <label
+ key={index}
+ className={classNames({
+ ['radio_short']: answerType.choices.length < 5,
+ ['radio_long']: answerType.choices.length > 4,
+ ['answer-checked']: answer === value,
+ })}
+ >
+ <input
+ type={'radio'}
+ value={value.toString()}
+ name={value.toString()}
+ onChange={() => setAnswer(value)}
+ checked={answer === value ? true : false}
+ />
+ {t(
+ `profile_type.${ProfileTypeStepForm[
+ step
+ ].toLowerCase()}.${value}`
+ )}
+ </label>
+ )
+ })}
</div>
<FormNavigation
step={step}
handlePrevious={handlePrevious}
handleNext={handleNext}
- disableNextButton={answer === ''}
+ disableNextButton={answer === '' || answer === undefined}
/>
</>
)
diff --git a/src/components/ProfileType/ProfileTypeView.tsx b/src/components/ProfileType/ProfileTypeView.tsx
index 5fb0f3b2f6cec6fada99365f8df9ecee08d8154d..f5c18d2bc5a4d3812e6d8e4e499e1a20a887baf5 100644
--- a/src/components/ProfileType/ProfileTypeView.tsx
+++ b/src/components/ProfileType/ProfileTypeView.tsx
@@ -25,22 +25,20 @@ import {
WarmingType,
} from 'enum/profileType.enum'
import { DateTime } from 'luxon'
-import { ProfileType, ProfileTypeAnswer } from 'models/profileType.model'
+import { ProfileType, ProfileTypeAnswer } from 'models'
import React, { useCallback, useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import ProfileTypeFormService from 'services/profileTypeForm.service'
import { AppStore } from 'store'
import ProfileTypeFormDateSelection from './ProfileTypeFormDateSelection'
-const ProfileTypeView: React.FC = () => {
- const {
- profile,
- profileType: curProfileType,
- profileEcogesture: curProfileEcogesture,
- } = useSelector((state: AppStore) => state.ecolyo)
+const ProfileTypeView = () => {
+ const { profile, profileType, profileEcogesture } = useSelector(
+ (state: AppStore) => state.ecolyo
+ )
const [headerHeight, setHeaderHeight] = useState<number>(0)
- const [profileType, setProfileType] = useState<ProfileType>({
+ const [currentProfileType, setCurrentProfileType] = useState<ProfileType>({
updateDate: DateTime.local()
.setZone('utc', {
keepLocalTime: true,
@@ -69,7 +67,7 @@ const ProfileTypeView: React.FC = () => {
)
const [answerType, setAnswerType] = useState<ProfileTypeAnswer>({
type: ProfileTypeFormType.SINGLE_CHOICE,
- attribute: '',
+ attribute: 'housingType',
choices: [],
})
@@ -80,52 +78,86 @@ const ProfileTypeView: React.FC = () => {
setHeaderHeight(height)
}, [])
+ // if ecogesture profile is completed, update default profileType
+ useEffect(() => {
+ if (profile.isProfileEcogestureCompleted) {
+ setCurrentProfileType({
+ ...profileType,
+ hotWater: profileEcogesture.hotWater,
+ heating: profileEcogesture.heating,
+ warmingFluid: profileEcogesture.warmingFluid,
+ equipments: profileEcogesture.equipments,
+ })
+ }
+ }, [
+ profile.isProfileEcogestureCompleted,
+ profileEcogesture.equipments,
+ profileEcogesture.heating,
+ profileEcogesture.hotWater,
+ profileEcogesture.warmingFluid,
+ profileType,
+ ])
+
const setNextStep = useCallback(
- (_profileType?: ProfileType) => {
+ (_profileType: ProfileType) => {
let profileTypeFormService: ProfileTypeFormService
if (_profileType) {
- setProfileType(_profileType)
+ setCurrentProfileType(_profileType)
profileTypeFormService = new ProfileTypeFormService(_profileType)
- curProfileEcogesture.heating = _profileType.heating
- curProfileEcogesture.hotWater = _profileType.hotWater
- curProfileEcogesture.warmingFluid = _profileType.warmingFluid
} else {
- // if equipments are updated, keep profileType as it is
+ // if equipments are updated, keep currentProfileType as it is
profileTypeFormService = new ProfileTypeFormService({
- ...profileType,
+ ...currentProfileType,
})
}
- const nextStep: ProfileTypeStepForm =
- profileTypeFormService.getNextFormStep(
- step,
- !profile.isProfileTypeCompleted
- )
+ const nextStep = profileTypeFormService.getNextFormStep(
+ step,
+ !profile.isProfileTypeCompleted
+ )
setIsLoading(true)
if (nextStep > viewedStep) {
setViewedStep(nextStep)
}
setStep(nextStep)
},
- [
- curProfileEcogesture,
- profile.isProfileTypeCompleted,
- profileType,
- step,
- viewedStep,
- ]
+ [profile.isProfileTypeCompleted, currentProfileType, step, viewedStep]
)
- const setPreviousStep = useCallback(
- (_profileType: ProfileType) => {
- setProfileType(_profileType)
- const profileTypeFormService = new ProfileTypeFormService(_profileType)
- const previousStep: ProfileTypeStepForm =
- profileTypeFormService.getPreviousFormStep(step)
- setIsLoading(true)
- setStep(previousStep)
- },
- [step]
- )
+ const setPreviousStep = useCallback(() => {
+ const profileTypeFormService = new ProfileTypeFormService(
+ currentProfileType
+ )
+ const previousStep: ProfileTypeStepForm =
+ profileTypeFormService.getPreviousFormStep(step)
+ setIsLoading(true)
+ setStep(previousStep)
+ }, [currentProfileType, step])
+
+ useEffect(() => {
+ const _answerType = ProfileTypeFormService.getAnswerForStep(step)
+ setAnswerType(_answerType)
+ setIsLoading(false)
+ }, [step])
+
+ /** If profileType OR ecogestureProfile is completed, apply it to local state */
+ useEffect(() => {
+ if (profile.isProfileTypeCompleted) {
+ setCurrentProfileType({ ...profileType })
+ return
+ }
+
+ if (profile.isProfileEcogestureCompleted) {
+ // Default state + ecogestureProfile
+ setCurrentProfileType({
+ ...currentProfileType,
+ hotWater: profileEcogesture.hotWater,
+ heating: profileEcogesture.heating,
+ warmingFluid: profileEcogesture.warmingFluid,
+ equipments: profileEcogesture.equipments,
+ })
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [profileType, profile, profile.isProfileEcogestureCompleted])
const selectForm = () => {
if (answerType.type === ProfileTypeFormType.SINGLE_CHOICE) {
@@ -133,10 +165,9 @@ const ProfileTypeView: React.FC = () => {
<ProfileTypeFormSingleChoice
step={step}
viewedStep={viewedStep}
- profileType={profileType}
+ currentProfileType={currentProfileType}
answerType={answerType}
setNextStep={setNextStep}
- isProfileTypeComplete={profile.isProfileTypeCompleted}
setPreviousStep={setPreviousStep}
/>
)
@@ -145,11 +176,10 @@ const ProfileTypeView: React.FC = () => {
<ProfileTypeFormMultiChoice
step={step}
viewedStep={viewedStep}
- profileType={profileType}
+ currentProfileType={currentProfileType}
answerType={answerType}
setNextStep={setNextStep}
setPreviousStep={setPreviousStep}
- isProfileTypeComplete={profile.isProfileTypeCompleted}
/>
)
} else if (answerType.type === ProfileTypeFormType.NUMBER) {
@@ -157,10 +187,9 @@ const ProfileTypeView: React.FC = () => {
<ProfileTypeFormNumber
step={step}
viewedStep={viewedStep}
- profileType={profileType}
+ currentProfileType={currentProfileType}
answerType={answerType}
setNextStep={setNextStep}
- isProfileTypeComplete={profile.isProfileTypeCompleted}
setPreviousStep={setPreviousStep}
/>
)
@@ -169,10 +198,9 @@ const ProfileTypeView: React.FC = () => {
<ProfileTypeFormNumberSelection
step={step}
viewedStep={viewedStep}
- profileType={profileType}
+ currentProfileType={currentProfileType}
answerType={answerType}
setNextStep={setNextStep}
- isProfileTypeComplete={profile.isProfileTypeCompleted}
setPreviousStep={setPreviousStep}
/>
)
@@ -180,11 +208,9 @@ const ProfileTypeView: React.FC = () => {
return (
<ProfileTypeFormDateSelection
step={step}
- viewedStep={viewedStep}
- profileType={profileType}
+ profileType={currentProfileType}
answerType={answerType}
setNextStep={setNextStep}
- isProfileTypeComplete={profile.isProfileTypeCompleted}
setPreviousStep={setPreviousStep}
/>
)
@@ -192,24 +218,14 @@ const ProfileTypeView: React.FC = () => {
return (
<EcogestureFormEquipment
step={step}
- profileEcogesture={curProfileEcogesture}
- setNextStep={setNextStep}
+ currentProfileType={currentProfileType}
+ setNextStepProfileForm={setNextStep}
setPreviousStep={setPreviousStep}
/>
)
}
}
- useEffect(() => {
- if (profile.isProfileTypeCompleted) {
- setProfileType(curProfileType)
- }
- const _answerType: ProfileTypeAnswer =
- ProfileTypeFormService.getAnswerForStep(step)
- setAnswerType(_answerType)
- setIsLoading(false)
- }, [step, profile, curProfileType])
-
return (
<>
<CozyBar titleKey={'common.title_profiletype'} displayBackArrow={true} />
@@ -225,7 +241,7 @@ const ProfileTypeView: React.FC = () => {
<>
{step !== ProfileTypeStepForm.END && selectForm()}
{step === ProfileTypeStepForm.END && (
- <ProfileTypeFinished profileType={profileType} />
+ <ProfileTypeFinished profileType={currentProfileType} />
)}
</>
)}
diff --git a/src/components/Quiz/QuizBegin.tsx b/src/components/Quiz/QuizBegin.tsx
index 8ab9c1f630d666b358d7e94de51ec8765b9f48a6..5ba3ea40ab895c1b1c6999bb9b4e2fe586a78b76 100644
--- a/src/components/Quiz/QuizBegin.tsx
+++ b/src/components/Quiz/QuizBegin.tsx
@@ -1,65 +1,59 @@
-import Button from '@material-ui/core/Button'
-import quizIcon from 'assets/icons/visu/quiz/questionMark.svg'
-import StarsContainer from 'components/Challenge/StarsContainer'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { Client, useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
-import { UserChallenge } from 'models'
-import React, { Dispatch } from 'react'
-import { useDispatch } from 'react-redux'
-import ChallengeService from 'services/challenge.service'
-import { AppActionsTypes } from 'store'
-import { updateUserChallengeList } from 'store/challenge/challenge.actions'
-import './quizBegin.scss'
-
-interface QuizBeginProps {
- userChallenge: UserChallenge
-}
-
-const QuizBegin: React.FC<QuizBeginProps> = ({
- userChallenge,
-}: QuizBeginProps) => {
- const client: Client = useClient()
- const { t } = useI18n()
- const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
- const launchQuiz = async () => {
- const challengeService: ChallengeService = new ChallengeService(client)
- const userChallengeUpdated: UserChallenge =
- await challengeService.updateUserChallenge(
- userChallenge,
- UserChallengeUpdateFlag.QUIZ_START
- )
- dispatch(updateUserChallengeList(userChallengeUpdated))
- }
-
- return (
- <div className="quiz-container">
- <div className="quiz-begin-container">
- <StyledIcon className="quiz-icon" icon={quizIcon} size={180} />
- <StarsContainer
- result={userChallenge.progress.quizProgress}
- isQuizBegin={true}
- />
-
- <div className="quiz-explanation text-18-bold">
- {t('quiz.explanation')}
- </div>
- <div className="button-start">
- <Button
- aria-label={t('duel.accessibility.button_start_quiz')}
- onClick={launchQuiz}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('duel.button_start')}
- </Button>
- </div>
- </div>
- </div>
- )
-}
-
-export default QuizBegin
+import Button from '@material-ui/core/Button'
+import quizIcon from 'assets/icons/visu/quiz/questionMark.svg'
+import StarsContainer from 'components/Challenge/StarsContainer'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { Client, useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
+import { UserChallenge } from 'models'
+import React, { Dispatch } from 'react'
+import { useDispatch } from 'react-redux'
+import ChallengeService from 'services/challenge.service'
+import { AppActionsTypes } from 'store'
+import { updateUserChallengeList } from 'store/challenge/challenge.slice'
+import './quizBegin.scss'
+
+const QuizBegin = ({ userChallenge }: { userChallenge: UserChallenge }) => {
+ const client: Client = useClient()
+ const { t } = useI18n()
+ const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
+ const launchQuiz = async () => {
+ const challengeService: ChallengeService = new ChallengeService(client)
+ const userChallengeUpdated: UserChallenge =
+ await challengeService.updateUserChallenge(
+ userChallenge,
+ UserChallengeUpdateFlag.QUIZ_START
+ )
+ dispatch(updateUserChallengeList(userChallengeUpdated))
+ }
+
+ return (
+ <div className="quiz-container">
+ <div className="quiz-begin-container">
+ <StyledIcon className="quiz-icon" icon={quizIcon} size={180} />
+ <StarsContainer
+ result={userChallenge.progress.quizProgress}
+ isQuizBegin={true}
+ />
+
+ <div className="quiz-explanation text-18-bold">
+ {t('quiz.explanation')}
+ </div>
+ <div className="button-start">
+ <Button
+ aria-label={t('duel.accessibility.button_start_quiz')}
+ onClick={launchQuiz}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('duel.button_start')}
+ </Button>
+ </div>
+ </div>
+ </div>
+ )
+}
+
+export default QuizBegin
diff --git a/src/components/Quiz/QuizCustomQuestionContent.tsx b/src/components/Quiz/QuizCustomQuestionContent.tsx
index f5b80fd56b71d2be0448957d72038564242ba907..1c4efae265ba27fc645e474a42e8bc20353c9ac6 100644
--- a/src/components/Quiz/QuizCustomQuestionContent.tsx
+++ b/src/components/Quiz/QuizCustomQuestionContent.tsx
@@ -14,7 +14,7 @@ import ChallengeService from 'services/challenge.service'
import QuizService from 'services/quiz.service'
import UsageEventService from 'services/usageEvent.service'
import { AppActionsTypes } from 'store'
-import { updateUserChallengeList } from 'store/challenge/challenge.actions'
+import { updateUserChallengeList } from 'store/challenge/challenge.slice'
import './quizQuestion.scss'
interface QuizCustomQuestionContent {
@@ -24,7 +24,7 @@ interface QuizCustomQuestionContent {
isLoading: boolean
}
-const QuizCustomQuestionContent: React.FC<QuizCustomQuestionContent> = ({
+const QuizCustomQuestionContent = ({
userChallenge,
goBack,
question,
diff --git a/src/components/Quiz/QuizExplanationModal.tsx b/src/components/Quiz/QuizExplanationModal.tsx
index f11e26b73177437144e975e510cf57f81a745652..f1f1d432d14670f0fe56b6bbe5ecd2b1830c936c 100644
--- a/src/components/Quiz/QuizExplanationModal.tsx
+++ b/src/components/Quiz/QuizExplanationModal.tsx
@@ -16,7 +16,7 @@ interface QuizExplanationModalProps {
handleCloseClick: () => void
}
-const QuizExplanationModal: React.FC<QuizExplanationModalProps> = ({
+const QuizExplanationModal = ({
open,
answerIndex,
question,
diff --git a/src/components/Quiz/QuizFinish.spec.tsx b/src/components/Quiz/QuizFinish.spec.tsx
index fbce4cee647161db39c4fb253aafe314950fd948..10b2b5ba9c2fd06a0ee0f5b0e55f31c4ba06ce64 100644
--- a/src/components/Quiz/QuizFinish.spec.tsx
+++ b/src/components/Quiz/QuizFinish.spec.tsx
@@ -3,10 +3,10 @@ import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
import { mount } from 'enzyme'
import React from 'react'
-import { act } from 'react-dom/test-utils'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
import QuizFinish from './QuizFinish'
@@ -57,10 +57,7 @@ describe('QuizFinish', () => {
userChallengeData[0],
UserChallengeUpdateFlag.QUIZ_RESET
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(mockedNavigate).toHaveBeenCalledWith('/challenges')
})
diff --git a/src/components/Quiz/QuizFinish.tsx b/src/components/Quiz/QuizFinish.tsx
index cc0274f473352cabd845a7853d5623a1fbe4f550..e3abbcf0ae72a04aca396c055a72e576237c731d 100644
--- a/src/components/Quiz/QuizFinish.tsx
+++ b/src/components/Quiz/QuizFinish.tsx
@@ -1,107 +1,101 @@
-import Button from '@material-ui/core/Button'
-import starResult from 'assets/icons/visu/quiz/starResult.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { Client, useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
-import { UserChallenge } from 'models'
-import React, { Dispatch, useCallback, useMemo } from 'react'
-import { useDispatch } from 'react-redux'
-import { useNavigate } from 'react-router-dom'
-import ChallengeService from 'services/challenge.service'
-import { AppActionsTypes } from 'store'
-import { updateUserChallengeList } from 'store/challenge/challenge.actions'
-import './quizFinish.scss'
-
-interface QuizFinishProps {
- userChallenge: UserChallenge
-}
-
-const QuizFinish: React.FC<QuizFinishProps> = ({
- userChallenge,
-}: QuizFinishProps) => {
- const client: Client = useClient()
- const { t } = useI18n()
- const navigate = useNavigate()
- const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
- const challengeService: ChallengeService = useMemo(
- () => new ChallengeService(client),
- [client]
- )
-
- const retryQuiz = useCallback(async () => {
- const userChallengeUpdated: UserChallenge =
- await challengeService.updateUserChallenge(
- userChallenge,
- UserChallengeUpdateFlag.QUIZ_RESET
- )
- dispatch(updateUserChallengeList(userChallengeUpdated))
- }, [dispatch, userChallenge, challengeService])
-
- const goBack = async () => {
- const userChallengeUpdated: UserChallenge =
- await challengeService.updateUserChallenge(
- userChallenge,
- UserChallengeUpdateFlag.QUIZ_UPDATE,
- userChallenge.quiz
- )
- dispatch(updateUserChallengeList(userChallengeUpdated))
- navigate('/challenges')
- }
- return (
- <div className="quiz-container">
- <div className="quiz-finish-container">
- <div>
- <div className="score-final-title">{t('quiz.score_final')}</div>
- <div className="score-final">
- <span>{userChallenge.quiz.result}</span> / 5
- </div>
- <div className="score-label">{t('quiz.earn')}</div>
- <div className="score-stars">
- {userChallenge.quiz.result}
- <StyledIcon className="quiz-icon" icon={starResult} size={30} />
- </div>
- </div>
- {userChallenge.quiz.result === 5 ? (
- <div className="button-start">
- <Button
- aria-label={t('quiz.accessibility.button_end_quiz')}
- onClick={goBack}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('quiz.button_end_quiz')}
- </Button>
- </div>
- ) : (
- <div className="button-start">
- <Button
- aria-label={t('quiz.accessibility.button_go_back')}
- onClick={goBack}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('quiz.button_go_back')}
- </Button>
- <Button
- aria-label={t('quiz.accessibility.button_try_again')}
- onClick={retryQuiz}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('quiz.button_try_again')}
- </Button>
- </div>
- )}
- </div>
- </div>
- )
-}
-
-export default QuizFinish
+import Button from '@material-ui/core/Button'
+import starResult from 'assets/icons/visu/quiz/starResult.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { Client, useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
+import { UserChallenge } from 'models'
+import React, { Dispatch, useCallback, useMemo } from 'react'
+import { useDispatch } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
+import ChallengeService from 'services/challenge.service'
+import { AppActionsTypes } from 'store'
+import { updateUserChallengeList } from 'store/challenge/challenge.slice'
+import './quizFinish.scss'
+
+const QuizFinish = ({ userChallenge }: { userChallenge: UserChallenge }) => {
+ const client: Client = useClient()
+ const { t } = useI18n()
+ const navigate = useNavigate()
+ const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
+ const challengeService: ChallengeService = useMemo(
+ () => new ChallengeService(client),
+ [client]
+ )
+
+ const retryQuiz = useCallback(async () => {
+ const userChallengeUpdated: UserChallenge =
+ await challengeService.updateUserChallenge(
+ userChallenge,
+ UserChallengeUpdateFlag.QUIZ_RESET
+ )
+ dispatch(updateUserChallengeList(userChallengeUpdated))
+ }, [dispatch, userChallenge, challengeService])
+
+ const goBack = async () => {
+ const userChallengeUpdated: UserChallenge =
+ await challengeService.updateUserChallenge(
+ userChallenge,
+ UserChallengeUpdateFlag.QUIZ_UPDATE,
+ userChallenge.quiz
+ )
+ dispatch(updateUserChallengeList(userChallengeUpdated))
+ navigate('/challenges')
+ }
+ return (
+ <div className="quiz-container">
+ <div className="quiz-finish-container">
+ <div>
+ <div className="score-final-title">{t('quiz.score_final')}</div>
+ <div className="score-final">
+ <span>{userChallenge.quiz.result}</span> / 5
+ </div>
+ <div className="score-label">{t('quiz.earn')}</div>
+ <div className="score-stars">
+ {userChallenge.quiz.result}
+ <StyledIcon className="quiz-icon" icon={starResult} size={30} />
+ </div>
+ </div>
+ {userChallenge.quiz.result === 5 ? (
+ <div className="button-start">
+ <Button
+ aria-label={t('quiz.accessibility.button_end_quiz')}
+ onClick={goBack}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('quiz.button_end_quiz')}
+ </Button>
+ </div>
+ ) : (
+ <div className="button-start">
+ <Button
+ aria-label={t('quiz.accessibility.button_go_back')}
+ onClick={goBack}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('quiz.button_go_back')}
+ </Button>
+ <Button
+ aria-label={t('quiz.accessibility.button_try_again')}
+ onClick={retryQuiz}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('quiz.button_try_again')}
+ </Button>
+ </div>
+ )}
+ </div>
+ </div>
+ )
+}
+
+export default QuizFinish
diff --git a/src/components/Quiz/QuizQuestion.tsx b/src/components/Quiz/QuizQuestion.tsx
index 24009e287ce6b0cd4cccea6c3a4745b980f8930b..b433733c0755e9337c4e57f985f9e26d6ece2ba3 100644
--- a/src/components/Quiz/QuizQuestion.tsx
+++ b/src/components/Quiz/QuizQuestion.tsx
@@ -9,13 +9,7 @@ import QuizService from 'services/quiz.service'
import { AppStore } from 'store'
import './quizQuestion.scss'
-interface QuizQuestion {
- userChallenge: UserChallenge
-}
-
-const QuizQuestion: React.FC<QuizQuestion> = ({
- userChallenge,
-}: QuizQuestion) => {
+const QuizQuestion = ({ userChallenge }: { userChallenge: UserChallenge }) => {
const questionsIsLocked: boolean = userChallenge.quiz.questions.some(
answer => answer.result == 0
)
diff --git a/src/components/Quiz/QuizQuestionContent.tsx b/src/components/Quiz/QuizQuestionContent.tsx
index 4b12b75b792bbcba8310dd932b0ac577656f8ba2..3007c8cc292541e4bbbbec3f353aaf3f906fbc63 100644
--- a/src/components/Quiz/QuizQuestionContent.tsx
+++ b/src/components/Quiz/QuizQuestionContent.tsx
@@ -1,141 +1,141 @@
-import Button from '@material-ui/core/Button'
-import CloseIcon from 'assets/icons/ico/close.svg'
-import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
-import QuizExplanationModal from 'components/Quiz/QuizExplanationModal'
-import { Client, useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
-import { Answer, UserChallenge, UserQuiz } from 'models'
-import React, { Dispatch, SetStateAction, useCallback, useState } from 'react'
-import { useDispatch } from 'react-redux'
-import ChallengeService from 'services/challenge.service'
-import QuizService from 'services/quiz.service'
-import { AppActionsTypes } from 'store'
-import { updateUserChallengeList } from 'store/challenge/challenge.actions'
-import './quizQuestion.scss'
-
-interface QuizQuestionContent {
- userChallenge: UserChallenge
- setIsCustomQuest: Dispatch<SetStateAction<boolean>>
- goBack: () => void
-}
-
-const QuizQuestionContent: React.FC<QuizQuestionContent> = ({
- userChallenge,
- setIsCustomQuest,
- goBack,
-}: QuizQuestionContent) => {
- const { t } = useI18n()
- const questionIndexLocked = userChallenge.quiz.questions.findIndex(
- answer => answer.result == 0
- )
- const [userChoice, setUserChoice] = useState<string>('')
- const [openModal, setOpenModal] = useState<boolean>(false)
- const [answerIndex, setAnswerIndex] = useState<number>(0)
- const [questionIndex, setQuestionIndex] =
- useState<number>(questionIndexLocked)
-
- const client: Client = useClient()
- const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
-
- const quizService: QuizService = new QuizService(client)
- const challengeService: ChallengeService = new ChallengeService(client)
-
- const validateQuestion = async () => {
- const resultIndex: number = userChallenge.quiz.questions[
- questionIndex
- ].answers.findIndex(answer => answer.answerLabel === userChoice)
- const result: Answer[] = userChallenge.quiz.questions[
- questionIndex
- ].answers.filter(answer => answer.answerLabel === userChoice)
- setAnswerIndex(resultIndex)
- setOpenModal(true)
- const quizUpdated: UserQuiz = await quizService.updateUserQuiz(
- userChallenge.quiz,
- result[0].isTrue,
- questionIndex
- )
- const userChallengeUpdated: UserChallenge =
- await challengeService.updateUserChallenge(
- userChallenge,
- UserChallengeUpdateFlag.QUIZ_UPDATE,
- quizUpdated
- )
- dispatch(updateUserChallengeList(userChallengeUpdated))
- }
-
- const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
- setUserChoice(e.target.value)
- }
- const goNextQuestion = useCallback(() => {
- setUserChoice('')
- setOpenModal(false)
- if (questionIndex === userChallenge.quiz.questions.length - 1) {
- setIsCustomQuest(true)
- }
- if (questionIndex !== userChallenge.quiz.questions.length - 1) {
- setQuestionIndex(questionIndex + 1)
- }
- }, [
- questionIndex,
- setIsCustomQuest,
- setQuestionIndex,
- setUserChoice,
- setOpenModal,
- userChallenge.quiz.questions.length,
- ])
-
- return (
- <div className="quiz-container">
- <div className="question-container">
- <StyledIconButton
- className="btn-back"
- icon={CloseIcon}
- onClick={goBack}
- />
- <p className="index-question">{questionIndex + 1}/5</p>
- <p className="question text-18-bold">
- {userChallenge.quiz.questions[questionIndex].questionLabel}
- </p>
- {userChallenge.quiz.questions[questionIndex].answers.map(
- (answer, index) => (
- <div className="answer" key={index}>
- <input
- type="radio"
- id={`answer${index}`}
- value={answer.answerLabel}
- onChange={handleChange}
- checked={userChoice === answer.answerLabel}
- />
- <label htmlFor={`answer${index}`} className="text-16-bold">
- {answer.answerLabel}
- </label>
- </div>
- )
- )}
- </div>
- <Button
- aria-label={t('quiz.accessibility.button_validate')}
- onClick={validateQuestion}
- disabled={!userChoice}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('quiz.button_validate')}
- </Button>
- {openModal && (
- <QuizExplanationModal
- open={openModal}
- answerIndex={answerIndex}
- question={userChallenge.quiz.questions[questionIndex]}
- goNext={goNextQuestion}
- handleCloseClick={() => setOpenModal(false)}
- />
- )}
- </div>
- )
-}
-
-export default QuizQuestionContent
+import Button from '@material-ui/core/Button'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+import QuizExplanationModal from 'components/Quiz/QuizExplanationModal'
+import { Client, useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
+import { Answer, UserChallenge, UserQuiz } from 'models'
+import React, { Dispatch, SetStateAction, useCallback, useState } from 'react'
+import { useDispatch } from 'react-redux'
+import ChallengeService from 'services/challenge.service'
+import QuizService from 'services/quiz.service'
+import { AppActionsTypes } from 'store'
+import { updateUserChallengeList } from 'store/challenge/challenge.slice'
+import './quizQuestion.scss'
+
+interface QuizQuestionContent {
+ userChallenge: UserChallenge
+ setIsCustomQuest: Dispatch<SetStateAction<boolean>>
+ goBack: () => void
+}
+
+const QuizQuestionContent = ({
+ userChallenge,
+ setIsCustomQuest,
+ goBack,
+}: QuizQuestionContent) => {
+ const { t } = useI18n()
+ const questionIndexLocked = userChallenge.quiz.questions.findIndex(
+ answer => answer.result == 0
+ )
+ const [userChoice, setUserChoice] = useState<string>('')
+ const [openModal, setOpenModal] = useState<boolean>(false)
+ const [answerIndex, setAnswerIndex] = useState<number>(0)
+ const [questionIndex, setQuestionIndex] =
+ useState<number>(questionIndexLocked)
+
+ const client: Client = useClient()
+ const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
+
+ const quizService: QuizService = new QuizService(client)
+ const challengeService: ChallengeService = new ChallengeService(client)
+
+ const validateQuestion = async () => {
+ const resultIndex: number = userChallenge.quiz.questions[
+ questionIndex
+ ].answers.findIndex(answer => answer.answerLabel === userChoice)
+ const result: Answer[] = userChallenge.quiz.questions[
+ questionIndex
+ ].answers.filter(answer => answer.answerLabel === userChoice)
+ setAnswerIndex(resultIndex)
+ setOpenModal(true)
+ const quizUpdated: UserQuiz = await quizService.updateUserQuiz(
+ userChallenge.quiz,
+ result[0].isTrue,
+ questionIndex
+ )
+ const userChallengeUpdated: UserChallenge =
+ await challengeService.updateUserChallenge(
+ userChallenge,
+ UserChallengeUpdateFlag.QUIZ_UPDATE,
+ quizUpdated
+ )
+ dispatch(updateUserChallengeList(userChallengeUpdated))
+ }
+
+ const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ setUserChoice(e.target.value)
+ }
+ const goNextQuestion = useCallback(() => {
+ setUserChoice('')
+ setOpenModal(false)
+ if (questionIndex === userChallenge.quiz.questions.length - 1) {
+ setIsCustomQuest(true)
+ }
+ if (questionIndex !== userChallenge.quiz.questions.length - 1) {
+ setQuestionIndex(questionIndex + 1)
+ }
+ }, [
+ questionIndex,
+ setIsCustomQuest,
+ setQuestionIndex,
+ setUserChoice,
+ setOpenModal,
+ userChallenge.quiz.questions.length,
+ ])
+
+ return (
+ <div className="quiz-container">
+ <div className="question-container">
+ <StyledIconButton
+ className="btn-back"
+ icon={CloseIcon}
+ onClick={goBack}
+ />
+ <p className="index-question">{questionIndex + 1}/5</p>
+ <p className="question text-18-bold">
+ {userChallenge.quiz.questions[questionIndex].questionLabel}
+ </p>
+ {userChallenge.quiz.questions[questionIndex].answers.map(
+ (answer, index) => (
+ <div className="answer" key={index}>
+ <input
+ type="radio"
+ id={`answer${index}`}
+ value={answer.answerLabel}
+ onChange={handleChange}
+ checked={userChoice === answer.answerLabel}
+ />
+ <label htmlFor={`answer${index}`} className="text-16-bold">
+ {answer.answerLabel}
+ </label>
+ </div>
+ )
+ )}
+ </div>
+ <Button
+ aria-label={t('quiz.accessibility.button_validate')}
+ onClick={validateQuestion}
+ disabled={!userChoice}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('quiz.button_validate')}
+ </Button>
+ {openModal && (
+ <QuizExplanationModal
+ open={openModal}
+ answerIndex={answerIndex}
+ question={userChallenge.quiz.questions[questionIndex]}
+ goNext={goNextQuestion}
+ handleCloseClick={() => setOpenModal(false)}
+ />
+ )}
+ </div>
+ )
+}
+
+export default QuizQuestionContent
diff --git a/src/components/Quiz/QuizView.tsx b/src/components/Quiz/QuizView.tsx
index 71388bcb52ad7636ecb3c6abc5495f0796aa87ff..4888e43e1e9d84b8fdd285290cbc3453a39dee07 100644
--- a/src/components/Quiz/QuizView.tsx
+++ b/src/components/Quiz/QuizView.tsx
@@ -1,51 +1,51 @@
-import Content from 'components/Content/Content'
-import CozyBar from 'components/Header/CozyBar'
-import Header from 'components/Header/Header'
-import { UserQuizState } from 'enum/userQuiz.enum'
-import { UserChallenge } from 'models'
-import React, { useCallback, useState } from 'react'
-import { useSelector } from 'react-redux'
-import { AppStore } from 'store'
-import QuizBegin from './QuizBegin'
-import QuizFinish from './QuizFinish'
-import QuizQuestion from './QuizQuestion'
-
-const QuizView: React.FC = () => {
- const [headerHeight, setHeaderHeight] = useState<number>(0)
- const { currentChallenge } = useSelector(
- (state: AppStore) => state.ecolyo.challenge
- )
-
- const defineHeaderHeight = useCallback((height: number) => {
- setHeaderHeight(height)
- }, [])
-
- const renderQuiz = (challenge: UserChallenge) => {
- switch (challenge.quiz.state) {
- case UserQuizState.UNLOCKED:
- return <QuizBegin userChallenge={challenge} />
- case UserQuizState.ONGOING:
- return <QuizQuestion userChallenge={challenge} />
- case UserQuizState.DONE:
- return <QuizFinish userChallenge={challenge} />
- default:
- return <QuizBegin userChallenge={challenge} />
- }
- }
-
- return (
- <>
- <CozyBar titleKey={'common.title_quiz'} displayBackArrow={true} />
- <Header
- setHeaderHeight={defineHeaderHeight}
- desktopTitleKey={'common.title_quiz'}
- displayBackArrow={true}
- />
- <Content height={headerHeight}>
- {currentChallenge && renderQuiz(currentChallenge)}
- </Content>
- </>
- )
-}
-
-export default QuizView
+import Content from 'components/Content/Content'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import { UserQuizState } from 'enum/userQuiz.enum'
+import { UserChallenge } from 'models'
+import React, { useCallback, useState } from 'react'
+import { useSelector } from 'react-redux'
+import { AppStore } from 'store'
+import QuizBegin from './QuizBegin'
+import QuizFinish from './QuizFinish'
+import QuizQuestion from './QuizQuestion'
+
+const QuizView = () => {
+ const [headerHeight, setHeaderHeight] = useState<number>(0)
+ const { currentChallenge } = useSelector(
+ (state: AppStore) => state.ecolyo.challenge
+ )
+
+ const defineHeaderHeight = useCallback((height: number) => {
+ setHeaderHeight(height)
+ }, [])
+
+ const renderQuiz = (challenge: UserChallenge) => {
+ switch (challenge.quiz.state) {
+ case UserQuizState.UNLOCKED:
+ return <QuizBegin userChallenge={challenge} />
+ case UserQuizState.ONGOING:
+ return <QuizQuestion userChallenge={challenge} />
+ case UserQuizState.DONE:
+ return <QuizFinish userChallenge={challenge} />
+ default:
+ return <QuizBegin userChallenge={challenge} />
+ }
+ }
+
+ return (
+ <>
+ <CozyBar titleKey={'common.title_quiz'} displayBackArrow={true} />
+ <Header
+ setHeaderHeight={defineHeaderHeight}
+ desktopTitleKey={'common.title_quiz'}
+ displayBackArrow={true}
+ />
+ <Content height={headerHeight}>
+ {currentChallenge && renderQuiz(currentChallenge)}
+ </Content>
+ </>
+ )
+}
+
+export default QuizView
diff --git a/src/components/Routes/Routes.tsx b/src/components/Routes/Routes.tsx
index 851d878b85b4ebbf5b244d1d4d4d805099538fa0..f795d67a8ad84ed5ba1844b6b413476eeea30dcf 100644
--- a/src/components/Routes/Routes.tsx
+++ b/src/components/Routes/Routes.tsx
@@ -1,109 +1,106 @@
-import ActionView from 'components/Action/ActionView'
-import ChallengeView from 'components/Challenge/ChallengeView'
-import SgeConnectView from 'components/Connection/SGEConnect/SgeConnectView'
-import DuelView from 'components/Duel/DuelView'
-import EcogestureFormView from 'components/EcogestureForm/EcogestureFormView'
-import EcogestureSelection from 'components/EcogestureSelection/EcogestureSelection'
-import ExplorationView from 'components/Exploration/ExplorationView'
-import Loader from 'components/Loader/Loader'
-import UnSubscribe from 'components/Options/Unsubscribe/UnSubscribe'
-import QuizView from 'components/Quiz/QuizView'
-import TermsView from 'components/Terms/TermsView'
-import { FluidType } from 'enum/fluid.enum'
-import { TermsStatus } from 'models'
-import React, { lazy, Suspense } from 'react'
-import { Navigate, Route, Routes } from 'react-router-dom'
-
-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 LegalNoticeView = lazy(
- () => import('components/Options/LegalNotice/LegalNoticeView')
-)
-const GCUView = lazy(() => import('components/Options/GCU/GCUView'))
-const AnalysisView = lazy(() => import('components/Analysis/AnalysisView'))
-const ProfileTypeView = lazy(
- () => import('components/ProfileType/ProfileTypeView')
-)
-
-interface RouteProps {
- termsStatus: TermsStatus
-}
-const AppRoutes: React.FC<RouteProps> = ({ termsStatus }: RouteProps) => {
- return (
- <Suspense
- fallback={
- <div className="loaderContainer">
- <Loader />
- </div>
- }
- >
- <Routes>
- {!termsStatus.accepted && (
- <>
- <Route path="/terms" element={<TermsView />} />
- <Route path="*" element={<Navigate replace to="/terms" />} />
- </>
- )}
- {termsStatus.accepted && (
- <>
- <Route
- path="/consumption/electricity"
- element={<ConsumptionView fluidType={FluidType.ELECTRICITY} />}
- />
- <Route
- path="/consumption/water"
- element={<ConsumptionView fluidType={FluidType.WATER} />}
- />
- <Route
- path="/consumption/gas"
- element={<ConsumptionView fluidType={FluidType.GAS} />}
- />
- <Route
- path="/consumption"
- element={<ConsumptionView fluidType={FluidType.MULTIFLUID} />}
- />
- <Route path="/sge-connect" element={<SgeConnectView />} />
- <Route path="/challenges/duel" element={<DuelView />} />
- <Route path="/challenges/quiz" element={<QuizView />} />
- <Route
- path="/challenges/exploration"
- element={<ExplorationView />}
- />
- <Route path="/challenges/action" element={<ActionView />} />
- <Route path="/challenges/" element={<ChallengeView />} />
- <Route path="/ecogesture-form" element={<EcogestureFormView />} />
- <Route
- path="/ecogesture-selection"
- element={<EcogestureSelection />}
- />
- <Route
- path="/ecogesture/:ecogestureID/:tab"
- element={<SingleEcogesture />}
- />
- <Route
- path="/ecogesture/:ecogestureID"
- element={<SingleEcogesture />}
- />
- <Route path="/ecogestures" element={<EcogestureView />} />
- <Route path="/options/legalnotice" element={<LegalNoticeView />} />
- <Route path="/options/gcu" element={<GCUView />} />
- <Route path="/options/:connectParam" element={<OptionsView />} />
- <Route path="/options" element={<OptionsView />} />
- <Route path="/analysis" element={<AnalysisView />} />
- <Route path="/profiletype" element={<ProfileTypeView />} />
- <Route path="/unsubscribe" element={<UnSubscribe />} />
- <Route path="*" element={<Navigate replace to="/consumption" />} />
- </>
- )}
- </Routes>
- </Suspense>
- )
-}
-
-export default AppRoutes
+import ActionView from 'components/Action/ActionView'
+import ChallengeView from 'components/Challenge/ChallengeView'
+import SgeConnectView from 'components/Connection/SGEConnect/SgeConnectView'
+import DuelView from 'components/Duel/DuelView'
+import EcogestureFormView from 'components/EcogestureForm/EcogestureFormView'
+import EcogestureSelection from 'components/EcogestureSelection/EcogestureSelection'
+import ExplorationView from 'components/Exploration/ExplorationView'
+import Loader from 'components/Loader/Loader'
+import UnSubscribe from 'components/Options/Unsubscribe/UnSubscribe'
+import QuizView from 'components/Quiz/QuizView'
+import TermsView from 'components/Terms/TermsView'
+import { FluidType } from 'enum/fluid.enum'
+import { TermsStatus } from 'models'
+import React, { lazy, Suspense } from 'react'
+import { Navigate, Route, Routes } from 'react-router-dom'
+
+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 LegalNoticeView = lazy(
+ () => import('components/Options/LegalNotice/LegalNoticeView')
+)
+const GCUView = lazy(() => import('components/Options/GCU/GCUView'))
+const AnalysisView = lazy(() => import('components/Analysis/AnalysisView'))
+const ProfileTypeView = lazy(
+ () => import('components/ProfileType/ProfileTypeView')
+)
+
+const AppRoutes = ({ termsStatus }: { termsStatus: TermsStatus }) => {
+ return (
+ <Suspense
+ fallback={
+ <div className="loaderContainer">
+ <Loader />
+ </div>
+ }
+ >
+ <Routes>
+ {!termsStatus.accepted && (
+ <>
+ <Route path="/terms" element={<TermsView />} />
+ <Route path="*" element={<Navigate replace to="/terms" />} />
+ </>
+ )}
+ {termsStatus.accepted && (
+ <>
+ <Route
+ path="/consumption/electricity"
+ element={<ConsumptionView fluidType={FluidType.ELECTRICITY} />}
+ />
+ <Route
+ path="/consumption/water"
+ element={<ConsumptionView fluidType={FluidType.WATER} />}
+ />
+ <Route
+ path="/consumption/gas"
+ element={<ConsumptionView fluidType={FluidType.GAS} />}
+ />
+ <Route
+ path="/consumption"
+ element={<ConsumptionView fluidType={FluidType.MULTIFLUID} />}
+ />
+ <Route path="/sge-connect" element={<SgeConnectView />} />
+ <Route path="/challenges/duel" element={<DuelView />} />
+ <Route path="/challenges/quiz" element={<QuizView />} />
+ <Route
+ path="/challenges/exploration"
+ element={<ExplorationView />}
+ />
+ <Route path="/challenges/action" element={<ActionView />} />
+ <Route path="/challenges/" element={<ChallengeView />} />
+ <Route path="/ecogesture-form" element={<EcogestureFormView />} />
+ <Route
+ path="/ecogesture-selection"
+ element={<EcogestureSelection />}
+ />
+ <Route
+ path="/ecogesture/:ecogestureID/:tab"
+ element={<SingleEcogesture />}
+ />
+ <Route
+ path="/ecogesture/:ecogestureID"
+ element={<SingleEcogesture />}
+ />
+ <Route path="/ecogestures" element={<EcogestureView />} />
+ <Route path="/options/legalnotice" element={<LegalNoticeView />} />
+ <Route path="/options/gcu" element={<GCUView />} />
+ <Route path="/options/:connectParam" element={<OptionsView />} />
+ <Route path="/options" element={<OptionsView />} />
+ <Route path="/analysis" element={<AnalysisView />} />
+ <Route path="/profiletype" element={<ProfileTypeView />} />
+ <Route path="/unsubscribe" element={<UnSubscribe />} />
+ <Route path="*" element={<Navigate replace to="/consumption" />} />
+ </>
+ )}
+ </Routes>
+ </Suspense>
+ )
+}
+
+export default AppRoutes
diff --git a/src/components/Splash/SplashRoot.tsx b/src/components/Splash/SplashRoot.tsx
index 69efd04518d0a0b4aaeab98845f41bde7819d889..6559550039424c1254a815af1257d65b8e675e4e 100644
--- a/src/components/Splash/SplashRoot.tsx
+++ b/src/components/Splash/SplashRoot.tsx
@@ -19,6 +19,7 @@ import {
InitStepsErrors,
PartnersInfo,
Profile,
+ ProfileType,
UserChallenge,
} from 'models'
import React, {
@@ -35,13 +36,15 @@ import CustomPopupService from 'services/customPopup.service'
import FluidService from 'services/fluid.service'
import InitializationService from 'services/initialization.service'
import PartnersInfoService from 'services/partnersInfo.service'
+import ProfileTypeEntityService from 'services/profileTypeEntity.service'
import UsageEventService from 'services/usageEvent.service'
import { AppActionsTypes } from 'store'
+import { setAnalysisMonth } from 'store/analysis/analysis.slice'
import {
setChallengeConsumption,
setUserChallengeList,
updateUserChallengeList,
-} from 'store/challenge/challenge.actions'
+} from 'store/challenge/challenge.slice'
import { setSelectedDate } from 'store/chart/chart.slice'
import {
setFluidStatus,
@@ -55,7 +58,7 @@ import {
import { openPartnersModal, setCustomPopup } from 'store/modal/modal.slice'
import { updateProfile } from 'store/profile/profile.actions'
import { updateProfileEcogestureSuccess } from 'store/profileEcogesture/profileEcogesture.actions'
-import { updateProfileType } from 'store/profileType/profileType.actions'
+import { setProfileType } from 'store/profileType/profileType.slice'
import { logDuration } from 'utils/duration'
import logApp from 'utils/logger'
import { getTodayDate } from 'utils/utils'
@@ -164,6 +167,19 @@ const SplashRoot = ({ fadeTimer = 1000, children }: SplashRootProps) => {
[dispatch, getPartnerStatus]
)
+ const loadProfileType = useCallback(
+ async (profileType: ProfileType) => {
+ const profileTypeEntityService = new ProfileTypeEntityService(client)
+ const updatedProfileType = await profileTypeEntityService.saveProfileType(
+ profileType
+ )
+ if (updatedProfileType) {
+ dispatch(setProfileType(updatedProfileType))
+ }
+ },
+ [client, dispatch]
+ )
+
useEffect(() => {
let timeoutSplash: NodeJS.Timeout
if (splashStart) {
@@ -236,8 +252,9 @@ const SplashRoot = ({ fadeTimer = 1000, children }: SplashRootProps) => {
haveSeenLastAnalysis: analysisResult.haveSeenLastAnalysis,
}
dispatch(updateProfile(updatedProfile))
+ dispatch(setAnalysisMonth(analysisResult.monthlyAnalysisDate))
if (profileType) {
- dispatch(updateProfileType(profileType))
+ await loadProfileType(profileType)
}
if (profileEcogesture) {
dispatch(updateProfileEcogestureSuccess(profileEcogesture))
@@ -307,7 +324,12 @@ const SplashRoot = ({ fadeTimer = 1000, children }: SplashRootProps) => {
filteredCurrentDuelChallenge[0]
)
if (subscribed) {
- dispatch(setChallengeConsumption(updatedUserChallenge, dataloads))
+ dispatch(
+ setChallengeConsumption({
+ userChallenge: updatedUserChallenge,
+ currentDataload: dataloads,
+ })
+ )
// Check is duel is done and display notification
const challengeService = new ChallengeService(client)
const { isDone } = await challengeService.isChallengeDone(
@@ -371,6 +393,7 @@ const SplashRoot = ({ fadeTimer = 1000, children }: SplashRootProps) => {
client,
dispatch,
initStepErrors,
+ loadProfileType,
processCustomPopup,
processFluidsStatus,
processPartnersStatus,
diff --git a/src/components/Splash/SplashScreen.tsx b/src/components/Splash/SplashScreen.tsx
index 7b8eabf85674bc4a7e93b2658c23f1b1f6c2604b..468b85b5f9eb5b2a450bf4101e500839f8a857b8 100644
--- a/src/components/Splash/SplashScreen.tsx
+++ b/src/components/Splash/SplashScreen.tsx
@@ -5,12 +5,7 @@ import { InitSteps } from 'models/initialisationSteps.model'
import React from 'react'
import './splashScreen.scss'
-interface SplashScreenProps {
- initStep: InitSteps
-}
-const SplashScreen: React.FC<SplashScreenProps> = ({
- initStep,
-}: SplashScreenProps) => {
+const SplashScreen = ({ initStep }: { initStep: InitSteps }) => {
const { t } = useI18n()
const getProgress = () => {
const total: number = Object.values(InitSteps).length / 2
diff --git a/src/components/Splash/SplashScreenError.tsx b/src/components/Splash/SplashScreenError.tsx
index baaa576c160104a2141f6adff56dcce9f3df30c3..91eaf7dbac5a299a8bfbf089bdaef94dd8408584 100644
--- a/src/components/Splash/SplashScreenError.tsx
+++ b/src/components/Splash/SplashScreenError.tsx
@@ -6,12 +6,7 @@ import { InitStepsErrors } from 'models/initialisationSteps.model'
import React from 'react'
import './splashScreen.scss'
-interface SplashScreenErrorProps {
- error: InitStepsErrors
-}
-const SplashScreenError: React.FC<SplashScreenErrorProps> = ({
- error,
-}: SplashScreenErrorProps) => {
+const SplashScreenError = ({ error }: { error: InitStepsErrors }) => {
const { t } = useI18n()
return (
<>
diff --git a/src/components/Terms/CGUModal.tsx b/src/components/Terms/CGUModal.tsx
index b3dfb6a58c68599f7601373cb89bb31cfbbe7c13..2102a0a3d890b04fbd8d66bc8618ea8abb778ea4 100644
--- a/src/components/Terms/CGUModal.tsx
+++ b/src/components/Terms/CGUModal.tsx
@@ -11,10 +11,7 @@ interface CGUModalProps {
open: boolean
handleCloseClick: () => void
}
-const CGUModal: React.FC<CGUModalProps> = ({
- open,
- handleCloseClick,
-}: CGUModalProps) => {
+const CGUModal = ({ open, handleCloseClick }: CGUModalProps) => {
const { t } = useI18n()
return (
<Dialog
diff --git a/src/components/Terms/DataShareConsentContent.tsx b/src/components/Terms/DataShareConsentContent.tsx
index cb2308c8e088a66dc065180c7fa6e8aadfbcf810..8a561a2652fc27aea34e396bbcfc360315b31157 100644
--- a/src/components/Terms/DataShareConsentContent.tsx
+++ b/src/components/Terms/DataShareConsentContent.tsx
@@ -5,7 +5,7 @@ import { AppStore } from 'store'
import { decoreText } from 'utils/decoreText'
import './termsView.scss'
-const DataShareConsentContent: React.FC = () => {
+const DataShareConsentContent = () => {
const { t } = useI18n()
const { isFirstConnection } = useSelector(
(state: AppStore) => state.ecolyo.profile
diff --git a/src/components/Terms/LegalNoticeModal.tsx b/src/components/Terms/LegalNoticeModal.tsx
index 9f97244e52c7df19de85299ccb0ca67208116711..7e7e15f3b616a112441680adcbdd996d30394fd6 100644
--- a/src/components/Terms/LegalNoticeModal.tsx
+++ b/src/components/Terms/LegalNoticeModal.tsx
@@ -12,7 +12,7 @@ interface LegalNoticeModalProps {
handleCloseClick: () => void
}
-const LegalNoticeModal: React.FC<LegalNoticeModalProps> = ({
+const LegalNoticeModal = ({
open,
handleCloseClick,
}: LegalNoticeModalProps) => {
diff --git a/src/components/Terms/TermsView.tsx b/src/components/Terms/TermsView.tsx
index 51bf642c9d1c5f5b43c66c2331ed5aca5bb262cf..5ce7b5a0c550ee620b257ffbeeb3ba17e5f46783 100644
--- a/src/components/Terms/TermsView.tsx
+++ b/src/components/Terms/TermsView.tsx
@@ -15,7 +15,7 @@ import LegalNoticeModal from './LegalNoticeModal'
import MinorUpdateContent from './MinorUpdateContent'
import './termsView.scss'
-const TermsView: React.FC = () => {
+const TermsView = () => {
const { t } = useI18n()
const client = useClient()
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
diff --git a/src/components/TimeStepSelector/TimeStepSelector.spec.tsx b/src/components/TimeStepSelector/TimeStepSelector.spec.tsx
index 6678b795d7a4f017c738096bb22a3ab1c3a57ee1..005f1fd3baf9bec0b51fdf50730ea8102c23d33d 100644
--- a/src/components/TimeStepSelector/TimeStepSelector.spec.tsx
+++ b/src/components/TimeStepSelector/TimeStepSelector.spec.tsx
@@ -3,6 +3,7 @@ import TimeStepSelector from 'components/TimeStepSelector/TimeStepSelector'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import { DateTime } from 'luxon'
import React from 'react'
import * as reactRedux from 'react-redux'
@@ -10,6 +11,7 @@ import { Provider } from 'react-redux'
import UsageEventService from 'services/usageEvent.service'
import * as chartActions from 'store/chart/chart.slice'
import { createMockEcolyoStore } from '../../../tests/__mocks__/store'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -39,7 +41,7 @@ describe('TimeStepSelector component', () => {
setCurrentTimeStepSpy.mockClear()
})
- it('should render component properly with 4 timesteps', () => {
+ it('should render component properly with 4 timesteps', async () => {
useSelectorSpy.mockReturnValue({
currentTimeStep: TimeStep.DAY,
selectedDate: DateTime.local().setZone('utc', {
@@ -53,7 +55,8 @@ describe('TimeStepSelector component', () => {
)
expect(wrapper.find('.circle').at(3).exists()).toBeTruthy()
expect(wrapper.find('.circle').at(4).exists()).toBeFalsy()
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should render component properly with 5 timesteps', () => {
diff --git a/src/components/TimeStepSelector/TimeStepSelector.tsx b/src/components/TimeStepSelector/TimeStepSelector.tsx
index e38857efb36221428a57f9493562c2e4c61f7bbe..6a72bc1eb2f2c1ff068bec5e62eff491c1d50151 100644
--- a/src/components/TimeStepSelector/TimeStepSelector.tsx
+++ b/src/components/TimeStepSelector/TimeStepSelector.tsx
@@ -15,15 +15,10 @@ import {
setCurrentTimeStep,
setSelectedDate,
} from 'store/chart/chart.slice'
+import { getFluidName } from 'utils/utils'
import './timeStepSelector.scss'
-interface TimeStepSelectorProps {
- fluidType: FluidType
-}
-
-const TimeStepSelector: React.FC<TimeStepSelectorProps> = ({
- fluidType,
-}: TimeStepSelectorProps) => {
+const TimeStepSelector = ({ fluidType }: { fluidType: FluidType }) => {
const { currentTimeStep, selectedDate } = useSelector(
(state: AppStore) => state.ecolyo.chart
)
@@ -58,7 +53,7 @@ const TimeStepSelector: React.FC<TimeStepSelectorProps> = ({
UsageEventService.addEvent(client, {
type: UsageEventType.CONSUMPTION_CHANGE_TIMESTEP_EVENT,
target: TimeStep[TimeStep.WEEK].toLowerCase(),
- context: FluidType[fluidType].toLowerCase(),
+ context: getFluidName(fluidType),
})
dispatch(setCurrentIndex(0))
dispatch(setSelectedDate(today))
@@ -72,7 +67,7 @@ const TimeStepSelector: React.FC<TimeStepSelectorProps> = ({
UsageEventService.addEvent(client, {
type: UsageEventType.CONSUMPTION_CHANGE_TIMESTEP_EVENT,
target: TimeStep[currentTimeStep].toLowerCase(),
- context: FluidType[fluidType].toLowerCase(),
+ context: getFluidName(fluidType),
})
dispatch(setCurrentTimeStep(targetTimestep))
dispatch(setCurrentIndex(index))
diff --git a/src/components/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap b/src/components/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
index f4343d02aa2cb336d576ae2bb697585ac74348bb..25dcf210dadc587ea1360ffed18ac5c860b19236 100644
--- a/src/components/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
+++ b/src/components/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
@@ -1,3 +1,227 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`TimeStepSelector component should render component properly with 4 timesteps 1`] = `ReactWrapper {}`;
+exports[`TimeStepSelector component should render component properly with 4 timesteps 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <TimeStepSelector
+ fluidType={1}
+ >
+ <div
+ className="timestep-selector"
+ >
+ <WithStyles(ForwardRef(Button))
+ classes={
+ Object {
+ "label": "text-13-normal",
+ "root": "btn-today",
+ }
+ }
+ onClick={[Function]}
+ >
+ <ForwardRef(Button)
+ 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-13-normal",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root btn-today",
+ "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]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiButton-root btn-today MuiButton-text"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="button"
+ >
+ <ForwardRef(ButtonBase)
+ className="MuiButton-root btn-today MuiButton-text"
+ 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
+ className="MuiButtonBase-root MuiButton-root btn-today MuiButton-text"
+ 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-13-normal"
+ >
+ timestep.today
+ </span>
+ <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)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(Button)>
+ </WithStyles(ForwardRef(Button))>
+ <div
+ className="timestep-container"
+ >
+ <ul
+ className="timestep-bar false"
+ >
+ <li
+ className="circle"
+ id="week"
+ onClick={[Function]}
+ >
+ <span
+ className="clickable-area"
+ />
+ <span
+ className="text text-14-normal"
+ >
+ timestep.week.period
+ </span>
+ </li>
+ <li
+ className="bar"
+ />
+ <li
+ className="active circle"
+ id="day"
+ onClick={[Function]}
+ >
+ <span
+ className="clickable-area"
+ />
+ <span
+ className="text text-14-normal"
+ >
+ timestep.day.period
+ </span>
+ </li>
+ <li
+ className="bar"
+ />
+ <li
+ className="circle"
+ id="month"
+ onClick={[Function]}
+ >
+ <span
+ className="clickable-area"
+ />
+ <span
+ className="text text-14-normal"
+ >
+ timestep.month.period
+ </span>
+ </li>
+ <li
+ className="bar"
+ />
+ <li
+ className="circle"
+ id="year"
+ onClick={[Function]}
+ >
+ <span
+ className="clickable-area"
+ />
+ <span
+ className="text text-14-normal"
+ >
+ timestep.year.period
+ </span>
+ </li>
+ <li
+ className="bar"
+ />
+ </ul>
+ </div>
+ </div>
+ </TimeStepSelector>
+</Provider>
+`;
diff --git a/src/components/TotalConsumption/TotalConsumption.spec.tsx b/src/components/TotalConsumption/TotalConsumption.spec.tsx
index c0efe60c81bb73b75a284e5cd263f4b14b41110f..6bc327a26d131b0951ba3f510cf1a0c9a10f267d 100644
--- a/src/components/TotalConsumption/TotalConsumption.spec.tsx
+++ b/src/components/TotalConsumption/TotalConsumption.spec.tsx
@@ -2,11 +2,11 @@ import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
import { mount } from 'enzyme'
import React from 'react'
-import { act } from 'react-dom/test-utils'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import { graphData } from '../../../tests/__mocks__/chartData.mock'
import { mockInitialChartState } from '../../../tests/__mocks__/store'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import TotalConsumption from './TotalConsumption'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -36,10 +36,7 @@ describe('TotalConsumption component', () => {
<TotalConsumption fluidType={FluidType.ELECTRICITY} />
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- component.update()
- })
+ await waitForComponentToPaint(component)
expect(component).toMatchSnapshot()
})
it('should render euro value', async () => {
@@ -48,10 +45,7 @@ describe('TotalConsumption component', () => {
<TotalConsumption fluidType={FluidType.ELECTRICITY} />
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- component.update()
- })
+ await waitForComponentToPaint(component)
expect(component.find('.euro-value').first().text()).toEqual('22,77')
})
@@ -61,10 +55,7 @@ describe('TotalConsumption component', () => {
<TotalConsumption fluidType={FluidType.MULTIFLUID} />
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- component.update()
- })
+ await waitForComponentToPaint(component)
expect(component.find('.euro-value').first().text()).toEqual('130,84')
})
@@ -84,10 +75,7 @@ describe('TotalConsumption component', () => {
<TotalConsumption fluidType={FluidType.MULTIFLUID} />
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- component.update()
- })
+ await waitForComponentToPaint(component)
expect(component.find('.euro-value').first().text()).toEqual('130,84')
expect(component.find('.euro-value').at(1).text()).toEqual('110,66')
@@ -104,10 +92,7 @@ describe('TotalConsumption component', () => {
<TotalConsumption fluidType={FluidType.ELECTRICITY} />
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- component.update()
- })
+ await waitForComponentToPaint(component)
expect(component.find('.euro-value').first().text()).toEqual('-----')
})
diff --git a/src/components/TotalConsumption/TotalConsumption.tsx b/src/components/TotalConsumption/TotalConsumption.tsx
index 281b7acd175eaeed56f6a35750302500d450cda7..032b6a78c8abf542b0480657790b67bfe6bf510a 100644
--- a/src/components/TotalConsumption/TotalConsumption.tsx
+++ b/src/components/TotalConsumption/TotalConsumption.tsx
@@ -18,13 +18,13 @@ const TotalConsumption = ({ fluidType }: { fluidType: FluidType }) => {
(state: AppStore) => state.ecolyo.chart
)
const client = useClient()
- const [totalValue, setTotalValue] = useState<string>()
- const [previousTotalValue, setPreviousTotalValue] = useState<string>()
+ const [totalValue, setTotalValue] = useState<string>('-----')
+ const [previousTotalValue, setPreviousTotalValue] = useState<string>('-----')
const computeTotal = useCallback(
async (
dataload: Dataload[],
- setState: React.Dispatch<React.SetStateAction<string | undefined>>
+ setState: React.Dispatch<React.SetStateAction<string>>
) => {
const consumptionService = new ConsumptionService(client)
const activateHalfHourLoad =
@@ -74,9 +74,19 @@ const TotalConsumption = ({ fluidType }: { fluidType: FluidType }) => {
)
useEffect(() => {
- computeTotal(currentDatachart.actualData, setTotalValue)
- if (currentDatachart.comparisonData) {
- computeTotal(currentDatachart.comparisonData, setPreviousTotalValue)
+ let isMounted = true
+ const fetchTotal = async () => {
+ await computeTotal(currentDatachart.actualData, setTotalValue)
+ if (currentDatachart.comparisonData) {
+ await computeTotal(
+ currentDatachart.comparisonData,
+ setPreviousTotalValue
+ )
+ }
+ }
+ isMounted && fetchTotal()
+ return () => {
+ isMounted = false
}
}, [currentDatachart, fluidType, currentTimeStep, client, computeTotal])
@@ -98,7 +108,6 @@ const TotalConsumption = ({ fluidType }: { fluidType: FluidType }) => {
{showCompare && (
<div className="compare">
<span className="euro-value">{previousTotalValue}</span>
- <span className="euro-symbol"> €</span>
</div>
)}
</div>
diff --git a/src/doctypes/remote/org.ecolyo.dju.ts b/src/doctypes/remote/org.ecolyo.dju.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ccc8e113b55304436422772de428c90ed6165094
--- /dev/null
+++ b/src/doctypes/remote/org.ecolyo.dju.ts
@@ -0,0 +1 @@
+export const REMOTE_ORG_ECOLYO_DJU = '/remote/org.ecolyo.dju_v2'
diff --git a/src/enum/ecogestureForm.enum.ts b/src/enum/ecogestureForm.enum.ts
index 556793f5060848b704ba271f4e2f528cd5b0c29d..3e847a32533a511af712846712647aa6a2af3bf5 100644
--- a/src/enum/ecogestureForm.enum.ts
+++ b/src/enum/ecogestureForm.enum.ts
@@ -3,6 +3,7 @@ export enum EcogestureStepForm {
WARMING_FLUID = 1,
HOT_WATER_TYPE = 2,
EQUIPMENTS = 3,
+ END,
}
export enum ProfileEcogestureAnswerType {
SINGLE_CHOICE = 0,
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 87addeb078e03c01c04889cf7dcbabfd23fe9695..823bb73b4d6e3d4008b14ccf4055e3086061ae97 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -116,7 +116,7 @@
},
"analysis_pie": {
"total": "Conso totale",
- "month": "Au mois de ",
+ "month": "Au mois\u00a0",
"estimation": "Comment sont estimés",
"estimation2": "les prix\u00a0?"
},
@@ -1178,6 +1178,7 @@
"month": "Mois",
"year": "Année",
"consumption": "Consommation",
+ "maxpower": "Puissance max (kVA)",
"button_close": "Fermer la fenêtre",
"modal_start": {
"accessibility_title": "Commencer le téléchargement",
diff --git a/src/models/analysis.model.ts b/src/models/analysis.model.ts
index ce7da6eecdcaacc133bd4f868140ad0015f5388c..62a9391f40499daef1d5aa106ff40703e5a6f729 100644
--- a/src/models/analysis.model.ts
+++ b/src/models/analysis.model.ts
@@ -1,11 +1,6 @@
import { DateTime } from 'luxon'
-export interface AnalysisAttributes {
- sendAnalysisNotification: boolean
- haveSeenLastAnalysis: boolean
- monthlyAnalysisDate: DateTime
-}
-
export interface AnalysisState {
period: 'month' | 'year'
+ analysisMonth: DateTime
}
diff --git a/src/models/dju.model.ts b/src/models/dju.model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a74baa1625edf2d6fb82661d45a1e63c330469bc
--- /dev/null
+++ b/src/models/dju.model.ts
@@ -0,0 +1,14 @@
+export interface DjuResult {
+ fields: string[]
+ layer_name: string
+ nb_result: number
+ table_href: string
+ values: DjuMeasure[]
+}
+
+export interface DjuMeasure {
+ horodate: string
+ measurement: number
+ observation: string
+ unit: string
+}
diff --git a/src/models/index.ts b/src/models/index.ts
index 69e5f3bc14850f2b389b87537395b6042eb90aa9..09b065bde0cefccc575de8795af3273f8519c7d9 100644
--- a/src/models/index.ts
+++ b/src/models/index.ts
@@ -19,6 +19,7 @@ export * from './konnector.model'
export * from './modal.model'
export * from './partnersInfo.model'
export * from './profile.model'
+export * from './profileEcogesture.model'
export * from './profileType.model'
export * from './quiz.model'
export * from './relation.model'
diff --git a/src/models/profileEcogesture.model.ts b/src/models/profileEcogesture.model.ts
index 90164e3125e9ea7e4bac68ac6cd7eb730a3f189e..217f67a7030951283c9c80238898c1bcf8c6532e 100644
--- a/src/models/profileEcogesture.model.ts
+++ b/src/models/profileEcogesture.model.ts
@@ -1,41 +1,15 @@
-import { EquipmentType } from 'enum/ecogesture.enum'
import { ProfileEcogestureAnswerType } from 'enum/ecogestureForm.enum'
-import { FluidType } from 'enum/fluid.enum'
-import {
- HotWaterEquipment,
- IndividualOrCollective,
- WarmingType,
-} from 'enum/profileType.enum'
+import { ProfileType } from './profileType.model'
-interface ProfileEcogestureIndexableTypes {
- [key: string]:
- | IndividualOrCollective
- | FluidType
- | WarmingType
- | EquipmentType[]
- | ProfileEcogesture
- | string
- | null
-}
-export type ProfileEcogestureAnswerChoices =
- | string
- | IndividualOrCollective
- | HotWaterEquipment
- | FluidType
- | WarmingType
- | EquipmentType[]
- | number
- | null
+export type ProfileEcogesture = Pick<
+ ProfileType,
+ 'heating' | 'warmingFluid' | 'hotWater' | 'equipments'
+>
+
+export type ProfileEcogestureValues = ProfileEcogesture[keyof ProfileEcogesture]
export interface ProfileEcogestureAnswer {
type: ProfileEcogestureAnswerType
- attribute: string
- choices: ProfileEcogestureAnswerChoices[]
-}
-
-export interface ProfileEcogesture extends ProfileEcogestureIndexableTypes {
- heating: IndividualOrCollective
- warmingFluid: WarmingType | null
- hotWater: IndividualOrCollective
- equipments: EquipmentType[]
+ attribute: keyof ProfileEcogesture
+ choices: ProfileEcogestureValues[]
}
diff --git a/src/models/profileType.model.ts b/src/models/profileType.model.ts
index f1f0b97959607348f2dd977fe8994fe65ad8ce91..e3184314d77fd3f5f2c1e9737c3e8a846458a1fa 100644
--- a/src/models/profileType.model.ts
+++ b/src/models/profileType.model.ts
@@ -15,45 +15,29 @@ import {
} from 'enum/profileType.enum'
import { DateTime } from 'luxon'
-interface ProfileTypeIndexableTypes {
- [key: string]:
- | HousingType
- | ConstructionYear
- | OutsideFacingWalls
- | Floor
- | IndividualOrCollective
- | IndividualInsulationWork[]
- | ThreeChoicesAnswer
- | HotWaterEquipment
- | FluidType
- | DateTime
- | EquipmentType[]
- | number
- | string
- | string[]
- | null
-}
-export interface ProfileType extends ProfileTypeIndexableTypes {
- housingType: HousingType
- constructionYear: ConstructionYear
+export interface ProfileType {
area: string
- occupantsNumber: number
- outsideFacingWalls: OutsideFacingWalls
- floor: Floor
- heating: IndividualOrCollective
coldWater: IndividualOrCollective
- hotWater: IndividualOrCollective
- individualInsulationWork: IndividualInsulationWork[]
+ constructionYear: ConstructionYear
+ cookingFluid: FluidType
+ equipments: EquipmentType[]
+ floor: Floor
hasInstalledVentilation: ThreeChoicesAnswer
hasReplacedHeater: ThreeChoicesAnswer
+ heating: IndividualOrCollective
+ hotWater: IndividualOrCollective
hotWaterEquipment: HotWaterEquipment
- warmingFluid: WarmingType | null
hotWaterFluid: HotWaterFluid | null
- cookingFluid: FluidType
+ housingType: HousingType
+ individualInsulationWork: IndividualInsulationWork[]
+ occupantsNumber: number
+ outsideFacingWalls: OutsideFacingWalls
updateDate: DateTime
- equipments: EquipmentType[]
+ warmingFluid: WarmingType | null
}
+export type ProfileTypeValues = ProfileType[keyof ProfileType]
+
export interface MonthlyForecast {
month: number
fluidForecast: FluidForecast[]
@@ -73,22 +57,8 @@ export interface DetailsMonthlyForecast {
coldWaterConsumption: number | null
}
-export type ProfileTypeAnswerChoices =
- | string
- | number
- | HousingType
- | ConstructionYear
- | OutsideFacingWalls
- | Floor
- | IndividualOrCollective
- | IndividualInsulationWork[]
- | ThreeChoicesAnswer
- | HotWaterEquipment
- | FluidType
- | DateTime
- | null
export interface ProfileTypeAnswer {
type: ProfileTypeFormType
- attribute: string
- choices: ProfileTypeAnswerChoices[]
+ attribute: keyof ProfileType
+ choices: ProfileTypeValues[]
}
diff --git a/src/services/challenge.service.ts b/src/services/challenge.service.ts
index 1822ae431e32ad085a782bbcd471e3b16428e653..b9de549d948d7fc7019cc42bc7b339dcc2268459 100644
--- a/src/services/challenge.service.ts
+++ b/src/services/challenge.service.ts
@@ -555,22 +555,26 @@ export default class ChallengeService {
public async startUserChallenge(
userChallenge: UserChallenge
): Promise<UserChallenge> {
- userChallenge.state = UserChallengeState.ONGOING
- userChallenge.progress.actionProgress = 0
- userChallenge.progress.explorationProgress = 0
- userChallenge.progress.quizProgress = 0
- userChallenge.startDate = DateTime.local()
- .setZone('utc', {
- keepLocalTime: true,
- })
- .startOf('day')
- userChallenge.success = UserChallengeSuccess.ONGOING
+ const newChallenge: UserChallenge = {
+ ...userChallenge,
+ state: UserChallengeState.ONGOING,
+ progress: {
+ actionProgress: 0,
+ explorationProgress: 0,
+ quizProgress: 0,
+ },
+ startDate: DateTime.local()
+ .setZone('utc', { keepLocalTime: true })
+ .startOf('day'),
+ success: UserChallengeSuccess.ONGOING,
+ }
+
try {
const {
data: updatedUserChallengeEntity,
}: QueryResult<UserChallengeEntity> = await this._client.create(
USERCHALLENGE_DOCTYPE,
- userChallenge
+ newChallenge
)
const updatedUserChallenge: UserChallenge =
this.parseUserChallengeEntityToUserChallenge(updatedUserChallengeEntity)
@@ -676,19 +680,19 @@ export default class ChallengeService {
quiz: updatedQuiz,
}
break
- case UserChallengeUpdateFlag.QUIZ_DONE:
- if (userChallenge.quiz.result > userChallenge.progress.quizProgress) {
- userChallenge.progress.quizProgress = userChallenge.quiz.result
- }
- if (userChallenge.progress.quizProgress > 5) {
- userChallenge.progress.quizProgress = 5
- }
+ case UserChallengeUpdateFlag.QUIZ_DONE: {
+ const updateQuizProgress = Math.min(userChallenge.quiz.result, 5)
updatedQuiz = await quizService.endUserQuiz(userChallenge.quiz)
updatedUserChallenge = {
...userChallenge,
quiz: updatedQuiz,
+ progress: {
+ ...userChallenge.progress,
+ quizProgress: updateQuizProgress,
+ },
}
break
+ }
case UserChallengeUpdateFlag.QUIZ_UPDATE:
updatedUserChallenge = {
...userChallenge,
diff --git a/src/services/consumption.service.ts b/src/services/consumption.service.ts
index e929762966bd32633c7d305d806d4fda35464ad5..48fb3f060614ce28957d46b43270676d3fbbdcdc 100644
--- a/src/services/consumption.service.ts
+++ b/src/services/consumption.service.ts
@@ -564,6 +564,7 @@ export default class ConsumptionDataManager {
): Promise<DataloadEntity[] | EnedisMonthlyAnalysisData[] | null> {
const query: QueryDefinition = Q(doctype)
.where({})
+ .indexFields(['year', 'month'])
.sortBy([{ year: 'asc' }, { month: 'asc' }])
.limitBy(1)
const data = await this._client.query(query)
@@ -575,8 +576,11 @@ export default class ConsumptionDataManager {
): Promise<DataloadEntity | null> {
const query: QueryDefinition = Q(doctype)
.where({
- price: {
- $exists: false,
+ year: {
+ $gt: null,
+ },
+ month: {
+ $gt: null,
},
})
.partialIndex({
diff --git a/src/services/dateChart.service.spec.ts b/src/services/dateChart.service.spec.ts
index 83449b87a24a2c492f6f41e38e8d1352dbf5867f..393f02a1241719c32c1bedcd63935072d894a95c 100644
--- a/src/services/dateChart.service.spec.ts
+++ b/src/services/dateChart.service.spec.ts
@@ -969,7 +969,7 @@ describe('dateChart service', () => {
expect(result).toBe(76)
})
- it('should return 0 for unkonwn time step', () => {
+ it('should return 0 for unknown time step', () => {
const selectedDate: DateTime = DateTime.fromISO(
'2020-10-09T09:30:00.000Z',
{
@@ -985,7 +985,7 @@ describe('dateChart service', () => {
})
})
- describe('incrementeDate method', () => {
+ describe('incrementDate method', () => {
const dateChartService = new DateChartService()
const selectedDate: DateTime = DateTime.fromISO(
'2020-10-31T00:00:00.000Z',
@@ -1001,7 +1001,7 @@ describe('dateChart service', () => {
zone: 'utc',
}
)
- const result = dateChartService.incrementeDate(
+ const result = dateChartService.incrementDate(
TimeStep.YEAR,
selectedDate,
1
@@ -1016,7 +1016,7 @@ describe('dateChart service', () => {
zone: 'utc',
}
)
- const result = dateChartService.incrementeDate(
+ const result = dateChartService.incrementDate(
TimeStep.MONTH,
selectedDate,
1
@@ -1031,7 +1031,7 @@ describe('dateChart service', () => {
zone: 'utc',
}
)
- const result = dateChartService.incrementeDate(
+ const result = dateChartService.incrementDate(
TimeStep.DAY,
selectedDate,
1
@@ -1046,7 +1046,7 @@ describe('dateChart service', () => {
zone: 'utc',
}
)
- const result = dateChartService.incrementeDate(
+ const result = dateChartService.incrementDate(
TimeStep.WEEK,
selectedDate,
1
@@ -1061,7 +1061,7 @@ describe('dateChart service', () => {
zone: 'utc',
}
)
- const result = dateChartService.incrementeDate(
+ const result = dateChartService.incrementDate(
TimeStep.HALF_AN_HOUR,
selectedDate,
1
@@ -1070,7 +1070,7 @@ describe('dateChart service', () => {
})
it('should return selected date for unknown time step', () => {
- const result = dateChartService.incrementeDate(
+ const result = dateChartService.incrementDate(
unknownTimeStep,
selectedDate,
1
diff --git a/src/services/dateChart.service.ts b/src/services/dateChart.service.ts
index 8e97757b0fba44980828c71cd96c0b389521ef81..199666c05ec86bd1b857ea55c932ef98c5c0bb29 100644
--- a/src/services/dateChart.service.ts
+++ b/src/services/dateChart.service.ts
@@ -233,7 +233,7 @@ export default class DateChartService {
* @param {number} increment - increment
* @returns {DateTime} - incremented date
*/
- public incrementeDate(
+ public incrementDate(
timeStep: TimeStep,
selectedDate: DateTime,
increment: number
diff --git a/src/services/ecogesture.service.ts b/src/services/ecogesture.service.ts
index b7e0ae588ca8bcf707310532dab4f50aa10bfdb1..0420aa5094fe95e39671618f3433766c7a17b709 100644
--- a/src/services/ecogesture.service.ts
+++ b/src/services/ecogesture.service.ts
@@ -121,11 +121,18 @@ export default class EcogestureService {
if (seasonFilter && seasonFilter !== Season.NONE) {
query = query
.where({ season: { $ne: seasonFilter } })
+ .indexFields(['season'])
.sortBy([{ season: 'desc' }])
} else if (orderByID) {
- query = query.where({}).sortBy([{ _id: 'asc' }])
+ query = query
+ .where({})
+ .indexFields(['_id'])
+ .sortBy([{ _id: 'asc' }])
} else {
- query = query.where({}).sortBy([{ season: 'desc' }])
+ query = query
+ .where({})
+ .indexFields(['season'])
+ .sortBy([{ season: 'desc' }])
}
const { data: ecogestures }: QueryResult<Ecogesture[]> =
@@ -136,6 +143,7 @@ export default class EcogestureService {
await this._client.query(
Q(ECOGESTURE_DOCTYPE)
.where({ season: { $eq: seasonFilter } })
+ .indexFields(['season'])
.sortBy([{ season: 'asc' }])
)
return [...ecogesturesWithSeason, ...ecogestures]
diff --git a/src/services/enedisMonthlyAnalysisData.service.ts b/src/services/enedisMonthlyAnalysisData.service.ts
index 70af4e00a46a9e7a73bb58922b001a60d9ac797c..0eff9590f3fb55bb6819be5b1e2624a3aa36e0e6 100644
--- a/src/services/enedisMonthlyAnalysisData.service.ts
+++ b/src/services/enedisMonthlyAnalysisData.service.ts
@@ -49,6 +49,7 @@ export default class EnedisMonthlyAnalysisDataService {
> {
const query: QueryDefinition = Q(ENEDIS_MONTHLY_ANALYSIS_DATA_DOCTYPE)
.where({})
+ .indexFields(['year', 'month'])
.sortBy([{ year: 'desc' }, { month: 'desc' }])
.limitBy(1)
const data = await this._client.query(query)
@@ -115,6 +116,7 @@ export default class EnedisMonthlyAnalysisDataService {
): Promise<EnedisMonthlyAnalysisData[]> {
const query: QueryDefinition = Q(ENEDIS_MONTHLY_ANALYSIS_DATA_DOCTYPE)
.where({ year: year, month: month })
+ .indexFields(['year', 'month'])
.sortBy([{ year: 'desc' }, { month: 'desc' }])
.limitBy(1)
const data = await this._client.query(query)
@@ -161,6 +163,7 @@ export default class EnedisMonthlyAnalysisDataService {
): Promise<MaxPowerEntity[]> {
const query: QueryDefinition = Q(ENEDIS_MAXPOWER_DOCTYPE)
.where({ year: year, month: month })
+ .indexFields(['year', 'month'])
.sortBy([{ year: 'desc' }, { month: 'desc' }])
const data = await this._client.query(query)
diff --git a/src/services/fluidsPrices.service.ts b/src/services/fluidsPrices.service.ts
index acbaf74193adc63ab60866e89986231ab7a5dd81..7ea8c8fb3e3e072a5d7e5ae21de0a2c5ca4f47c9 100644
--- a/src/services/fluidsPrices.service.ts
+++ b/src/services/fluidsPrices.service.ts
@@ -40,13 +40,13 @@ export default class FluidPricesService {
date: DateTime
): Promise<FluidPrice> {
const query: QueryDefinition = Q(FLUIDSPRICES_DOCTYPE)
- .indexFields(['startDate'])
.where({
startDate: {
$lte: date.toISO({ suppressMilliseconds: true }).toString(),
},
fluidType,
})
+ .indexFields(['startDate'])
.sortBy([{ startDate: 'desc' }])
.limitBy(1)
@@ -61,8 +61,8 @@ export default class FluidPricesService {
*/
public async getAllLastPrices(): Promise<FluidPrice[]> {
const query: QueryDefinition = Q(FLUIDSPRICES_DOCTYPE)
- .indexFields(['fluidType'])
.where({ endDate: { $eq: '' } })
+ .indexFields(['fluidType'])
.sortBy([{ fluidType: 'asc' }])
.limitBy(3)
diff --git a/src/services/profileEcogestureForm.service.ts b/src/services/profileEcogestureForm.service.ts
index 9cbe8fa36e381787e695ceda5023642c680533be..0da0d9ead5ad4974b4fb06fa4a4809cabe62a547 100644
--- a/src/services/profileEcogestureForm.service.ts
+++ b/src/services/profileEcogestureForm.service.ts
@@ -7,6 +7,7 @@ import { IndividualOrCollective, WarmingType } from 'enum/profileType.enum'
import {
ProfileEcogesture,
ProfileEcogestureAnswer,
+ ProfileEcogestureValues,
} from 'models/profileEcogesture.model'
export default class ProfileEcogestureFormService {
@@ -32,6 +33,8 @@ export default class ProfileEcogestureFormService {
return EcogestureStepForm.HOT_WATER_TYPE
case EcogestureStepForm.HOT_WATER_TYPE:
return EcogestureStepForm.EQUIPMENTS
+ case EcogestureStepForm.EQUIPMENTS:
+ return EcogestureStepForm.END
default:
return EcogestureStepForm.HEATING_TYPE
}
@@ -86,7 +89,7 @@ export default class ProfileEcogestureFormService {
return {
type: ProfileEcogestureAnswerType.MULTI_CHOICE,
attribute: 'equipments',
- choices: Object.keys(EquipmentType),
+ choices: Object.keys(EquipmentType) as ProfileEcogestureValues[],
}
case EcogestureStepForm.HEATING_TYPE:
default:
diff --git a/src/services/profileType.service.ts b/src/services/profileType.service.ts
index f911b87f894a6ae38c19496dff57d6ab13bd4ef1..2255192a8c05659608928105a284886e8dd118a7 100644
--- a/src/services/profileType.service.ts
+++ b/src/services/profileType.service.ts
@@ -6,6 +6,7 @@ import elecSpeData from 'constants/consumptionConstants/electricSpecific.json'
import heatingData from 'constants/consumptionConstants/heating.json'
import { Client } from 'cozy-client'
import logger from 'cozy-logger'
+import { REMOTE_ORG_ECOLYO_DJU } from 'doctypes/remote/org.ecolyo.dju'
import { FluidType } from 'enum/fluid.enum'
import {
ConstructionYear,
@@ -18,6 +19,7 @@ import {
ThreeChoicesAnswer,
} from 'enum/profileType.enum'
import { DateTime } from 'luxon'
+import { DjuResult } from 'models/dju.model'
import {
DetailsMonthlyForecast,
FluidForecast,
@@ -496,7 +498,6 @@ export default class ProfileTypeService {
.set({ year: this.year })
.set({ month: month })
.startOf('month')
- .minus({ minutes: 5 })
.toISO()
const endDate: string = DateTime.local()
.setZone('utc', {
@@ -505,21 +506,22 @@ export default class ProfileTypeService {
.set({ year: this.year })
.set({ month: month })
.endOf('month')
- .plus({ minutes: 5 })
.toISO()
- // We add or remove 5 minutes so the api returns the exact period
try {
- const result = await this._client
+ const result: DjuResult = await this._client
.getStackClient()
.fetchJSON(
'GET',
- `/remote/org.ecolyo.dju?observedProperty=degreeDay&startDate=${startDate}&endDate=${endDate}`
+ `${REMOTE_ORG_ECOLYO_DJU}?startDate=${startDate}&endDate=${endDate}`
)
let monthDju = 0
if (result) {
- for (const observation of result.observations) {
- monthDju += observation.result.value
+ const degreeDayObservations = result.values.filter(
+ value => value.observation === 'degreeDay'
+ )
+ for (const observation of degreeDayObservations) {
+ monthDju += observation.measurement
}
}
if (monthDju === 0) {
diff --git a/src/services/profileTypeEntity.service.ts b/src/services/profileTypeEntity.service.ts
index bcfa84e2d85a4ba6429c9a3b1ffd4acbc4bf5644..bb68839a13cdca9313f5d79a101531ce07037132 100644
--- a/src/services/profileTypeEntity.service.ts
+++ b/src/services/profileTypeEntity.service.ts
@@ -30,6 +30,7 @@ export default class ProfileTypeEntityService {
}: QueryResult<ProfileType[]> = await this._client.query(
query
.where({ updateDate: { $lte: date.toString() } })
+ .indexFields(['updateDate'])
.sortBy([{ updateDate: 'desc' }])
.limitBy(1)
)
@@ -65,7 +66,8 @@ export default class ProfileTypeEntityService {
data: [profileType],
}: QueryResult<ProfileType[]> = await this._client.query(
query
- .where({ _id: { $gt: null } })
+ .where({})
+ .indexFields(['updateDate'])
.sortBy([{ updateDate: 'desc' }])
.limitBy(1)
)
@@ -96,6 +98,7 @@ export default class ProfileTypeEntityService {
$gte: timePeriod.startDate.toString(),
},
})
+ .indexFields(['updateDate'])
.sortBy([{ updateDate: 'asc' }])
.limitBy(100)
)
@@ -131,7 +134,7 @@ export default class ProfileTypeEntityService {
* Saves profileType in database
* @returns {ProfileType}
*/
- public async updateProfileType(
+ public async saveProfileType(
attributes: Partial<ProfileType>
): Promise<ProfileType | null> {
const query: QueryDefinition = Q(PROFILETYPE_DOCTYPE)
diff --git a/src/services/queryRunner.service.ts b/src/services/queryRunner.service.ts
index 6fa8128692d7b81e1c8f31e468c83f3a575140e3..dffb788de165216d9d5890ef1e6a3f7c239e5c93 100644
--- a/src/services/queryRunner.service.ts
+++ b/src/services/queryRunner.service.ts
@@ -58,14 +58,14 @@ export default class QueryRunner {
return Q(doctype)
.where(this.getPredicate(maxTimePeriod, TimeStep.HALF_AN_HOUR))
.indexFields(['load'])
- .limitBy(1)
.sortBy([{ load: 'desc' }])
+ .limitBy(1)
}
return Q(doctype)
.where(this.getPredicate(maxTimePeriod, timeStep))
.indexFields(['load'])
- .limitBy(limit)
.sortBy([{ load: 'desc' }])
+ .limitBy(limit)
}
private buildFirstDateQuery(
@@ -472,7 +472,7 @@ export default class QueryRunner {
public async getEntries(fluidType: FluidType, timeStep: TimeStep) {
const doctype = this.getRelevantDoctype(fluidType, timeStep)
try {
- const query = Q(doctype).where({}).limitBy(1)
+ const query = Q(doctype).limitBy(1)
const result = await this._client.query(query)
return result
} catch (error) {
diff --git a/src/services/quiz.service.ts b/src/services/quiz.service.ts
index 3dfc34ff58d4ab5055188992e0f0d43a683ffbdc..c553c7f7d53869a308a38bd0af9af923eb7b266c 100644
--- a/src/services/quiz.service.ts
+++ b/src/services/quiz.service.ts
@@ -176,20 +176,19 @@ export default class QuizService {
* @returns {UserQuiz}
*/
public async startUserQuiz(userQuiz: UserQuiz): Promise<UserQuiz> {
- const { questions } = userQuiz
- questions.forEach(
- question => (question.answers = shuffle(question.answers))
- )
- const randomizedQuestions = shuffle(questions)
- const updatedUserQuiz: UserQuiz = {
+ const questions = userQuiz.questions.map(question => ({
+ ...question,
+ answers: shuffle(question.answers),
+ }))
+
+ return {
...userQuiz,
- questions: randomizedQuestions,
+ questions: shuffle(questions),
state: UserQuizState.ONGOING,
startDate: DateTime.local().setZone('utc', {
keepLocalTime: true,
}),
}
- return updatedUserQuiz
}
/**
* Return quiz with updated state to UserQuizState.UNLOCKED and updated questions with false result
@@ -197,22 +196,23 @@ export default class QuizService {
* @returns {UserQuiz}
*/
public async resetUserQuiz(userQuiz: UserQuiz): Promise<UserQuiz> {
- const updatedQuestions: UserQuestion[] = userQuiz.questions
- updatedQuestions.forEach(question => {
- question.result = UserQuestionState.UNLOCKED
- })
+ const updatedQuestions: UserQuestion[] = userQuiz.questions.map(
+ question => ({
+ ...question,
+ result: UserQuestionState.UNLOCKED,
+ })
+ )
const updatedCustomQuestion = {
...userQuiz.customQuestion,
result: UserQuestionState.UNLOCKED,
}
- const updatedUserQuiz: UserQuiz = {
+ return {
...userQuiz,
customQuestion: updatedCustomQuestion,
questions: updatedQuestions,
result: 0,
state: UserQuizState.UNLOCKED,
}
- return updatedUserQuiz
}
/**
@@ -240,30 +240,36 @@ export default class QuizService {
questionResult: boolean,
questionIndex?: number
): Promise<UserQuiz> {
- if (questionIndex !== undefined) {
- const updatedQuestion: UserQuestion = {
- ...userQuiz.questions[questionIndex],
- result: questionResult
- ? UserQuestionState.CORRECT
- : UserQuestionState.UNCORRECT,
- }
- userQuiz.questions[questionIndex] = updatedQuestion
- } else {
- const updatedQuestion: UserCustomQuestion = {
- ...userQuiz.customQuestion,
- result: questionResult
- ? UserQuestionState.CORRECT
- : UserQuestionState.UNCORRECT,
+ const result = questionResult
+ ? UserQuestionState.CORRECT
+ : UserQuestionState.UNCORRECT
+
+ const updatedQuestions = userQuiz.questions.map((question, index) => {
+ if (index === questionIndex) {
+ return {
+ ...question,
+ result: result,
+ }
}
- userQuiz.customQuestion = updatedQuestion
+ return question
+ })
+
+ const updatedCustomQuestion = {
+ ...userQuiz.customQuestion,
+ result: result,
}
- let quizScoreLimit = userQuiz.result
- quizScoreLimit = quizScoreLimit + 1 > 5 ? 5 : quizScoreLimit + 1
- const updatedUserQuiz: UserQuiz = {
+
+ return {
...userQuiz,
- result: questionResult ? quizScoreLimit : userQuiz.result,
+ questions: updatedQuestions,
+ customQuestion:
+ questionIndex === undefined
+ ? updatedCustomQuestion
+ : userQuiz.customQuestion,
+ result: questionResult
+ ? Math.min(userQuiz.result + 1, 5)
+ : userQuiz.result,
}
- return updatedUserQuiz
}
/**
diff --git a/src/services/terms.service.ts b/src/services/terms.service.ts
index bb063f147f4557ab2e27a7d1b1a1cb083086472f..c9c3061a95372e312e8dffa58493fd61164a002c 100644
--- a/src/services/terms.service.ts
+++ b/src/services/terms.service.ts
@@ -21,6 +21,7 @@ export default class TermsService {
public async getLastTerm(): Promise<Term> {
const query: QueryDefinition = Q(TERMS_DOCTYPE)
.where({})
+ .indexFields(['acceptedAt'])
.sortBy([{ acceptedAt: 'desc' }])
.limitBy(1)
const {
@@ -36,6 +37,7 @@ export default class TermsService {
public async isLastTermValidated(): Promise<boolean> {
const query: QueryDefinition = Q(TERMS_DOCTYPE)
.where({})
+ .indexFields(['acceptedAt'])
.sortBy([{ acceptedAt: 'desc' }])
.limitBy(1)
const {
diff --git a/src/services/usageEvent.service.ts b/src/services/usageEvent.service.ts
index 9b18e59c4e342fd543fb8410e12019c12a244779..33fb71ea2b15ace740910d1d21852b30ad64f971 100644
--- a/src/services/usageEvent.service.ts
+++ b/src/services/usageEvent.service.ts
@@ -80,10 +80,13 @@ export default class UsageEventService {
// Get last Connection attempt Event
const query: QueryDefinition = Q(USAGEEVENT_DOCTYPE)
.where({
- type: UsageEventType.KONNECTOR_ATTEMPT_EVENT,
target: konnectorSlug,
+ })
+ .partialIndex({
+ type: UsageEventType.KONNECTOR_ATTEMPT_EVENT,
result: 'error',
})
+ .indexFields(['eventDate', 'type'])
.sortBy([{ eventDate: 'desc' }])
.limitBy(1)
const {
diff --git a/src/store/analysis/analysis.slice.spec.ts b/src/store/analysis/analysis.slice.spec.ts
index c1799dd98bcc8836d95192884cf74ab22a9512ae..cfe3161895ece34893cce6e4250d1ccd9d1d247e 100644
--- a/src/store/analysis/analysis.slice.spec.ts
+++ b/src/store/analysis/analysis.slice.spec.ts
@@ -1,23 +1,37 @@
-import { mockInitialAnalysisState } from '../../../tests/__mocks__/store'
-import { analysisSlice, setPeriod } from './analysis.slice'
+import { DateTime } from 'luxon'
+import { mockAnalysisState } from '../../../tests/__mocks__/store'
+import { analysisSlice, setAnalysisMonth, setPeriod } from './analysis.slice'
describe('analysis reducer', () => {
it('should return the initial state', () => {
const initialState = analysisSlice.reducer(undefined, {
type: undefined,
})
- expect(initialState).toEqual(mockInitialAnalysisState)
+ expect(initialState).toEqual({
+ ...mockAnalysisState,
+ analysisMonth: DateTime.local().minus({ months: 1 }).startOf('day'),
+ })
})
describe('setPeriod', () => {
- it('should handle setPeriod with payload', () => {
+ it('should handle setPeriod', () => {
+ const state = analysisSlice.reducer(mockAnalysisState, setPeriod('year'))
+ expect(state).toEqual({
+ ...mockAnalysisState,
+ period: 'year',
+ })
+ })
+ })
+
+ describe('setAnalysisMonth', () => {
+ it('should handle setAnalysisMonth', () => {
const state = analysisSlice.reducer(
- mockInitialAnalysisState,
- setPeriod('year')
+ mockAnalysisState,
+ setAnalysisMonth(DateTime.local(2023, 2, 1))
)
expect(state).toEqual({
- ...mockInitialAnalysisState,
- period: 'year',
+ ...mockAnalysisState,
+ analysisMonth: DateTime.local(2023, 2, 1),
})
})
})
diff --git a/src/store/analysis/analysis.slice.ts b/src/store/analysis/analysis.slice.ts
index ffd088e0084c94d1a31b558d9e330006c0706ea8..b3fdf4b33b5fd55d09d912a8ebe22b3fcd40d3c4 100644
--- a/src/store/analysis/analysis.slice.ts
+++ b/src/store/analysis/analysis.slice.ts
@@ -1,12 +1,16 @@
import { PayloadAction, createSlice } from '@reduxjs/toolkit'
+import { DateTime } from 'luxon'
import { AnalysisState } from 'models'
const initialState: AnalysisState = {
period: 'month',
+ analysisMonth: DateTime.local().minus({ months: 1 }).startOf('day'),
}
type SetPeriodAction = PayloadAction<'month' | 'year'>
-export type AnalysisActionTypes = SetPeriodAction
+type SetSelectedMonthAction = PayloadAction<DateTime>
+
+export type AnalysisActionTypes = SetPeriodAction | SetSelectedMonthAction
export const analysisSlice = createSlice({
name: 'analysis',
@@ -15,7 +19,10 @@ export const analysisSlice = createSlice({
setPeriod: (state, action: SetPeriodAction) => {
state.period = action.payload
},
+ setAnalysisMonth: (state, action: SetSelectedMonthAction) => {
+ state.analysisMonth = action.payload
+ },
},
})
-export const { setPeriod } = analysisSlice.actions
+export const { setPeriod, setAnalysisMonth } = analysisSlice.actions
diff --git a/src/store/challenge/challenge.action.spec.ts b/src/store/challenge/challenge.action.spec.ts
deleted file mode 100644
index 66bc6f0e6009b3cb8793e0358543e9432b7f2328..0000000000000000000000000000000000000000
--- a/src/store/challenge/challenge.action.spec.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
-import {
- setChallengeConsumption,
- setUserChallengeList,
- SET_CHALLENGE_CONSUMPTION,
- SET_USER_CHALLENGE_LIST,
- unlockNextUserChallenge,
- UNLOCK_NEXT_USER_CHALLENGE,
- updateUserChallengeList,
- UPDATE_USER_CHALLENGE_LIST,
-} from './challenge.actions'
-
-describe('challenge actions', () => {
- it('should create an action to set userChallengeList', () => {
- const expectedAction = {
- type: SET_USER_CHALLENGE_LIST,
- payload: userChallengeData,
- }
- expect(setUserChallengeList(userChallengeData)).toEqual(expectedAction)
- })
-
- it('should create an action to update the userChallengeList', () => {
- const expectedAction = {
- type: UPDATE_USER_CHALLENGE_LIST,
- payload: userChallengeData[0],
- }
- expect(updateUserChallengeList(userChallengeData[0])).toEqual(
- expectedAction
- )
- })
-
- it('should create an action to unlock next challenge in the list', () => {
- const expectedAction = {
- type: UNLOCK_NEXT_USER_CHALLENGE,
- payload: userChallengeData[0],
- }
- expect(unlockNextUserChallenge(userChallengeData[0])).toEqual(
- expectedAction
- )
- })
-
- it('should create an action to update challenge with consumption in the list and set current data load', () => {
- const expectedAction = {
- type: SET_CHALLENGE_CONSUMPTION,
- payload: { userChallenge: userChallengeData[0], currentDataload: [] },
- }
- expect(setChallengeConsumption(userChallengeData[0], [])).toEqual(
- expectedAction
- )
- })
-})
diff --git a/src/store/challenge/challenge.actions.ts b/src/store/challenge/challenge.actions.ts
deleted file mode 100644
index 03ab3e29d5de88293b56567af01eefced45b3729..0000000000000000000000000000000000000000
--- a/src/store/challenge/challenge.actions.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Dataload, UserChallenge } from 'models'
-import { defaultAction } from 'store'
-
-export const SET_USER_CHALLENGE_LIST = 'SET_USER_CHALLENGE_LIST'
-export const UPDATE_USER_CHALLENGE_LIST = 'UPDATE_USER_CHALLENGE_LIST'
-export const UNLOCK_NEXT_USER_CHALLENGE = 'UNLOCK_NEXT_USER_CHALLENGE'
-export const SET_CHALLENGE_CONSUMPTION = 'SET_CHALLENGE_CONSUMPTION'
-
-interface SetUserChallengeList {
- type: typeof SET_USER_CHALLENGE_LIST
- payload?: UserChallenge[]
-}
-
-interface UpdateUserChallengeList {
- type: typeof UPDATE_USER_CHALLENGE_LIST
- payload?: UserChallenge
-}
-
-interface UnlockNextUserChallenge {
- type: typeof UNLOCK_NEXT_USER_CHALLENGE
- payload?: UserChallenge
-}
-
-interface SetChallengeConsumption {
- type: typeof SET_CHALLENGE_CONSUMPTION
- payload?: { userChallenge: UserChallenge; currentDataload: Dataload[] }
-}
-
-export type ChallengeActionTypes =
- | SetUserChallengeList
- | UpdateUserChallengeList
- | UnlockNextUserChallenge
- | SetChallengeConsumption
- | typeof defaultAction
-
-export function setUserChallengeList(
- userChallengeList: UserChallenge[]
-): ChallengeActionTypes {
- return {
- type: SET_USER_CHALLENGE_LIST,
- payload: userChallengeList,
- }
-}
-
-export function updateUserChallengeList(
- userChallenge: UserChallenge
-): ChallengeActionTypes {
- return {
- type: UPDATE_USER_CHALLENGE_LIST,
- payload: userChallenge,
- }
-}
-
-export function unlockNextUserChallenge(
- userChallenge: UserChallenge
-): ChallengeActionTypes {
- return {
- type: UNLOCK_NEXT_USER_CHALLENGE,
- payload: userChallenge,
- }
-}
-
-export function setChallengeConsumption(
- userChallenge: UserChallenge,
- currentDataload: Dataload[]
-): ChallengeActionTypes {
- return {
- type: SET_CHALLENGE_CONSUMPTION,
- payload: { userChallenge, currentDataload },
- }
-}
diff --git a/src/store/challenge/challenge.reducer.ts b/src/store/challenge/challenge.reducer.ts
deleted file mode 100644
index 4d85c630a4d8a864f9fcd467884f624e1cc48e34..0000000000000000000000000000000000000000
--- a/src/store/challenge/challenge.reducer.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import { UserChallengeState } from 'enum/userChallenge.enum'
-import { ChallengeState } from 'models'
-import { Reducer } from 'redux'
-import {
- ChallengeActionTypes,
- SET_CHALLENGE_CONSUMPTION,
- SET_USER_CHALLENGE_LIST,
- UNLOCK_NEXT_USER_CHALLENGE,
- UPDATE_USER_CHALLENGE_LIST,
-} from './challenge.actions'
-
-const initialState: ChallengeState = {
- userChallengeList: [],
- currentChallenge: null,
- currentDataload: [],
-}
-
-export const challengeReducer: Reducer<ChallengeState, ChallengeActionTypes> = (
- state = initialState,
- action
-) => {
- if (action.payload == undefined) return state
-
- const updateState = (updates: Partial<ChallengeState>): ChallengeState => ({
- ...state,
- ...updates,
- })
- switch (action.type) {
- case SET_USER_CHALLENGE_LIST: {
- const filteredCurrentChallenge = action.payload.filter(
- challenge =>
- challenge.state === UserChallengeState.ONGOING ||
- challenge.state === UserChallengeState.DUEL
- )
- const currentChallenge = filteredCurrentChallenge[0] || null
- return updateState({
- userChallengeList: action.payload,
- currentChallenge: currentChallenge,
- })
- }
-
- case UPDATE_USER_CHALLENGE_LIST: {
- const id = action.payload.id
- const currentChallenge =
- action.payload.state === UserChallengeState.ONGOING ||
- action.payload.state === UserChallengeState.DUEL
- ? action.payload
- : null
- const updatedList = [...state.userChallengeList]
- const findIndex = updatedList.findIndex(challenge => challenge.id === id)
- updatedList[findIndex] = action.payload
- return updateState({
- userChallengeList: updatedList,
- currentChallenge: currentChallenge || state.currentChallenge,
- })
- }
- case UNLOCK_NEXT_USER_CHALLENGE: {
- const id = action.payload.id
- const updatedList = [...state.userChallengeList]
- const findIndex = updatedList.findIndex(challenge => challenge.id === id)
- updatedList[findIndex] = action.payload
- if (typeof updatedList[findIndex + 1] !== 'undefined') {
- updatedList[findIndex + 1] = {
- ...updatedList[findIndex + 1],
- state: UserChallengeState.UNLOCKED,
- }
- }
- return updateState({
- userChallengeList: updatedList,
- currentChallenge: null,
- })
- }
- case SET_CHALLENGE_CONSUMPTION: {
- const id = action.payload.userChallenge.id
- const updatedList = [...state.userChallengeList]
- const findIndex = updatedList.findIndex(challenge => challenge.id === id)
- updatedList[findIndex] = action.payload.userChallenge
- return updateState({
- userChallengeList: updatedList,
- currentChallenge:
- state.currentChallenge &&
- state.currentChallenge.id === action.payload.userChallenge.id
- ? action.payload.userChallenge
- : state.currentChallenge,
- currentDataload: action.payload.currentDataload,
- })
- }
- default:
- return state
- }
-}
diff --git a/src/store/challenge/challenge.reducer.spec.ts b/src/store/challenge/challenge.slice.spec.ts
similarity index 57%
rename from src/store/challenge/challenge.reducer.spec.ts
rename to src/store/challenge/challenge.slice.spec.ts
index f2ea8117f83c58af7190224ee047e35d8215f1c6..8adbc4cc7271313784926b77b6d50388fd62c6b2 100644
--- a/src/store/challenge/challenge.reducer.spec.ts
+++ b/src/store/challenge/challenge.slice.spec.ts
@@ -1,162 +1,134 @@
-import { DataloadState } from 'enum/dataload.enum'
-import { UserChallengeState } from 'enum/userChallenge.enum'
-import { DateTime } from 'luxon'
-import { ChallengeState, Dataload, UserChallenge } from 'models'
-import { defaultAction } from 'store'
-import { mockInitialChallengeState } from '../../../tests/__mocks__/store'
-import {
- userChallengeData,
- userChallengeDefault,
-} from '../../../tests/__mocks__/userChallengeData.mock'
-import {
- SET_CHALLENGE_CONSUMPTION,
- SET_USER_CHALLENGE_LIST,
- UNLOCK_NEXT_USER_CHALLENGE,
- UPDATE_USER_CHALLENGE_LIST,
-} from './challenge.actions'
-import { challengeReducer } from './challenge.reducer'
-
-describe('challenge reducer', () => {
- it('should return the initial state', () => {
- const state = challengeReducer(undefined, { ...defaultAction })
- expect(state).toEqual(mockInitialChallengeState)
- })
-
- it('should handle SET_USER_CHALLENGE_LIST with payload', () => {
- const state = challengeReducer(mockInitialChallengeState, {
- type: SET_USER_CHALLENGE_LIST,
- payload: userChallengeData,
- })
- const expectedResult: ChallengeState = {
- userChallengeList: userChallengeData,
- currentChallenge: userChallengeData[2],
- currentDataload: [],
- }
- expect(state).toEqual(expectedResult)
- })
-
- it('should handle SET_USER_CHALLENGE_LIST without payload', () => {
- const state = challengeReducer(mockInitialChallengeState, {
- type: SET_USER_CHALLENGE_LIST,
- })
- expect(state).toEqual(mockInitialChallengeState)
- })
-
- it('should handle UPDATE_USER_CHALLENGE_LIST with payload', () => {
- const updatedMockInitialChallengeState = {
- ...mockInitialChallengeState,
- userChallengeList: userChallengeDefault,
- }
- const updatedUserChallenge: UserChallenge = {
- ...userChallengeDefault[0],
- state: UserChallengeState.ONGOING,
- }
- const state = challengeReducer(updatedMockInitialChallengeState, {
- type: UPDATE_USER_CHALLENGE_LIST,
- payload: updatedUserChallenge,
- })
- const expectedResult: ChallengeState = {
- userChallengeList: [
- updatedUserChallenge,
- ...userChallengeDefault.slice(1),
- ],
- currentChallenge: updatedUserChallenge,
- currentDataload: [],
- }
- expect(state).toEqual(expectedResult)
- })
-
- it('should handle UPDATE_USER_CHALLENGE_LIST without payload', () => {
- const state = challengeReducer(mockInitialChallengeState, {
- type: UPDATE_USER_CHALLENGE_LIST,
- })
- expect(state).toEqual(mockInitialChallengeState)
- })
-
- it('should handle UNLOCK_NEXT_USER_CHALLENGE with payload', () => {
- const updatedMockInitialChallengeState = {
- ...mockInitialChallengeState,
- userChallengeList: userChallengeDefault,
- }
- const updatedUserChallenge: UserChallenge = {
- ...userChallengeDefault[0],
- state: UserChallengeState.DONE,
- }
- const unlockedUserChallenge: UserChallenge = {
- ...userChallengeDefault[1],
- state: UserChallengeState.UNLOCKED,
- }
- const state = challengeReducer(updatedMockInitialChallengeState, {
- type: UNLOCK_NEXT_USER_CHALLENGE,
- payload: updatedUserChallenge,
- })
- const expectedResult: ChallengeState = {
- userChallengeList: [
- updatedUserChallenge,
- unlockedUserChallenge,
- ...userChallengeDefault.slice(2, 6),
- ],
- currentChallenge: null,
- currentDataload: [],
- }
- expect(state).toEqual(expectedResult)
- })
-
- it('should handle UNLOCK_NEXT_USER_CHALLENGE without payload', () => {
- const state = challengeReducer(mockInitialChallengeState, {
- type: UNLOCK_NEXT_USER_CHALLENGE,
- })
- expect(state).toEqual(mockInitialChallengeState)
- })
-
- it('should handle SET_CHALLENGE_CONSUMPTION with payload', () => {
- const updatedMockInitialChallengeState = {
- ...mockInitialChallengeState,
- userChallengeList: userChallengeDefault,
- }
- const dataload: Dataload[] = [
- {
- date: DateTime.fromISO('2020-10-01T00:00:00.000Z', {
- zone: 'utc',
- }),
- value: 20,
- valueDetail: [
- { state: DataloadState.VALID, value: 5.0 },
- { state: DataloadState.VALID, value: 10.0 },
- { state: DataloadState.VALID, value: 5.0 },
- ],
- state: DataloadState.VALID,
- },
- ]
- const updatedUserChallenge: UserChallenge = {
- ...userChallengeDefault[0],
- duel: {
- ...userChallengeDefault[0].duel,
- userConsumption: 20,
- },
- }
- const expectedResult: ChallengeState = {
- userChallengeList: [
- updatedUserChallenge,
- ...userChallengeDefault.slice(1, 6),
- ],
- currentChallenge: null,
- currentDataload: dataload,
- }
- const state = challengeReducer(updatedMockInitialChallengeState, {
- type: SET_CHALLENGE_CONSUMPTION,
- payload: {
- userChallenge: updatedUserChallenge,
- currentDataload: dataload,
- },
- })
- expect(state).toEqual(expectedResult)
- })
-
- it('should handle SET_CHALLENGE_CONSUMPTION without payload', () => {
- const state = challengeReducer(mockInitialChallengeState, {
- type: SET_CHALLENGE_CONSUMPTION,
- })
- expect(state).toEqual(mockInitialChallengeState)
- })
-})
+import { DataloadState } from 'enum/dataload.enum'
+import { UserChallengeState } from 'enum/userChallenge.enum'
+import { DateTime } from 'luxon'
+import { ChallengeState, Dataload, UserChallenge } from 'models'
+import { mockInitialChallengeState } from '../../../tests/__mocks__/store'
+import {
+ userChallengeData,
+ userChallengeDefault,
+} from '../../../tests/__mocks__/userChallengeData.mock'
+import {
+ challengeSlice,
+ setChallengeConsumption,
+ setUserChallengeList,
+ unlockNextUserChallenge,
+ updateUserChallengeList,
+} from './challenge.slice'
+
+describe('challenge reducer', () => {
+ it('should return the initial state', () => {
+ const state = challengeSlice.reducer(undefined, { type: undefined })
+ expect(state).toEqual(mockInitialChallengeState)
+ })
+
+ it('should handle setUserChallengeList', () => {
+ const state = challengeSlice.reducer(
+ mockInitialChallengeState,
+ setUserChallengeList(userChallengeData)
+ )
+ const expectedResult: ChallengeState = {
+ userChallengeList: userChallengeData,
+ currentChallenge: userChallengeData[2],
+ currentDataload: [],
+ }
+ expect(state).toEqual(expectedResult)
+ })
+
+ it('should handle updateUserChallengeList ', () => {
+ const updatedMockInitialChallengeState = {
+ ...mockInitialChallengeState,
+ userChallengeList: userChallengeDefault,
+ }
+ const updatedUserChallenge: UserChallenge = {
+ ...userChallengeDefault[0],
+ state: UserChallengeState.ONGOING,
+ }
+ const state = challengeSlice.reducer(
+ updatedMockInitialChallengeState,
+ updateUserChallengeList(updatedUserChallenge)
+ )
+ const expectedResult: ChallengeState = {
+ userChallengeList: [
+ updatedUserChallenge,
+ ...userChallengeDefault.slice(1),
+ ],
+ currentChallenge: updatedUserChallenge,
+ currentDataload: [],
+ }
+ expect(state).toEqual(expectedResult)
+ })
+
+ it('should handle unlockNextUserChallenge ', () => {
+ const updatedMockInitialChallengeState = {
+ ...mockInitialChallengeState,
+ userChallengeList: userChallengeDefault,
+ }
+ const updatedUserChallenge: UserChallenge = {
+ ...userChallengeDefault[0],
+ state: UserChallengeState.DONE,
+ }
+ const unlockedUserChallenge: UserChallenge = {
+ ...userChallengeDefault[1],
+ state: UserChallengeState.UNLOCKED,
+ }
+ const state = challengeSlice.reducer(
+ updatedMockInitialChallengeState,
+ unlockNextUserChallenge(updatedUserChallenge)
+ )
+
+ const expectedResult: ChallengeState = {
+ userChallengeList: [
+ updatedUserChallenge,
+ unlockedUserChallenge,
+ ...userChallengeDefault.slice(2, 6),
+ ],
+ currentChallenge: null,
+ currentDataload: [],
+ }
+ expect(state).toEqual(expectedResult)
+ })
+
+ it('should handle SET_CHALLENGE_CONSUMPTION ', () => {
+ const updatedMockInitialChallengeState = {
+ ...mockInitialChallengeState,
+ userChallengeList: userChallengeDefault,
+ }
+ const dataload: Dataload[] = [
+ {
+ date: DateTime.fromISO('2020-10-01T00:00:00.000Z', {
+ zone: 'utc',
+ }),
+ value: 20,
+ valueDetail: [
+ { state: DataloadState.VALID, value: 5.0 },
+ { state: DataloadState.VALID, value: 10.0 },
+ { state: DataloadState.VALID, value: 5.0 },
+ ],
+ state: DataloadState.VALID,
+ },
+ ]
+ const updatedUserChallenge: UserChallenge = {
+ ...userChallengeDefault[0],
+ duel: {
+ ...userChallengeDefault[0].duel,
+ userConsumption: 20,
+ },
+ }
+ const expectedResult: ChallengeState = {
+ userChallengeList: [
+ updatedUserChallenge,
+ ...userChallengeDefault.slice(1, 6),
+ ],
+ currentChallenge: null,
+ currentDataload: dataload,
+ }
+ const state = challengeSlice.reducer(
+ updatedMockInitialChallengeState,
+ setChallengeConsumption({
+ userChallenge: updatedUserChallenge,
+ currentDataload: dataload,
+ })
+ )
+ expect(state).toEqual(expectedResult)
+ })
+})
diff --git a/src/store/challenge/challenge.slice.ts b/src/store/challenge/challenge.slice.ts
new file mode 100644
index 0000000000000000000000000000000000000000..eae360e05ee1019d0aa87b11f70174bfae4b7792
--- /dev/null
+++ b/src/store/challenge/challenge.slice.ts
@@ -0,0 +1,92 @@
+import { PayloadAction, createSlice } from '@reduxjs/toolkit'
+import { UserChallengeState } from 'enum/userChallenge.enum'
+import { ChallengeState, Dataload, UserChallenge } from 'models'
+
+const initialState: ChallengeState = {
+ userChallengeList: [],
+ currentChallenge: null,
+ currentDataload: [],
+}
+
+type SetUserChallengeList = PayloadAction<UserChallenge[]>
+type UpdateUserChallengeList = PayloadAction<UserChallenge>
+type UnlockNextUserChallenge = PayloadAction<UserChallenge>
+type SetChallengeConsumption = PayloadAction<{
+ userChallenge: UserChallenge
+ currentDataload: Dataload[]
+}>
+
+export type ChallengeActionTypes =
+ | SetUserChallengeList
+ | UpdateUserChallengeList
+ | UnlockNextUserChallenge
+ | SetChallengeConsumption
+
+export const challengeSlice = createSlice({
+ name: 'challenge',
+ initialState,
+ reducers: {
+ setUserChallengeList: (state, action: SetUserChallengeList) => {
+ const filteredCurrentChallenge = action.payload.filter(
+ challenge =>
+ challenge.state === UserChallengeState.ONGOING ||
+ challenge.state === UserChallengeState.DUEL
+ )
+ const currentChallenge = filteredCurrentChallenge[0] || null
+
+ state.userChallengeList = action.payload
+ state.currentChallenge = currentChallenge
+ },
+ updateUserChallengeList: (state, action: UpdateUserChallengeList) => {
+ const id = action.payload.id
+ const currentChallenge =
+ action.payload.state === UserChallengeState.ONGOING ||
+ action.payload.state === UserChallengeState.DUEL
+ ? action.payload
+ : null
+ const updatedList = [...state.userChallengeList]
+ const findIndex = updatedList.findIndex(challenge => challenge.id === id)
+ updatedList[findIndex] = action.payload
+
+ state.userChallengeList = updatedList
+ state.currentChallenge = currentChallenge || state.currentChallenge
+ },
+ unlockNextUserChallenge: (state, action: UnlockNextUserChallenge) => {
+ const id = action.payload.id
+ const updatedList = [...state.userChallengeList]
+ const findIndex = updatedList.findIndex(challenge => challenge.id === id)
+ updatedList[findIndex] = action.payload
+ if (typeof updatedList[findIndex + 1] !== 'undefined') {
+ updatedList[findIndex + 1] = {
+ ...updatedList[findIndex + 1],
+ state: UserChallengeState.UNLOCKED,
+ }
+ }
+
+ state.userChallengeList = updatedList
+ state.currentChallenge = null
+ },
+ setChallengeConsumption: (state, action: SetChallengeConsumption) => {
+ const id = action.payload.userChallenge.id
+ const updatedList = [...state.userChallengeList]
+ const findIndex = updatedList.findIndex(challenge => challenge.id === id)
+ updatedList[findIndex] = action.payload.userChallenge
+
+ state.userChallengeList = updatedList
+ state.currentDataload = action.payload.currentDataload
+ if (
+ state.currentChallenge &&
+ state.currentChallenge.id === action.payload.userChallenge.id
+ ) {
+ state.currentChallenge = action.payload.userChallenge
+ }
+ },
+ },
+})
+
+export const {
+ setChallengeConsumption,
+ setUserChallengeList,
+ unlockNextUserChallenge,
+ updateUserChallengeList,
+} = challengeSlice.actions
diff --git a/src/store/index.ts b/src/store/index.ts
index b7de1bbdce97b8ca092ce99920ed5600f5483fe2..b703e919b028617eb7997a7dfe0a307c17ea0b75 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -21,8 +21,10 @@ import { composeWithDevTools } from 'redux-devtools-extension'
import thunkMiddleware from 'redux-thunk'
import { globalReducer } from 'store/global/global.reducer'
import { AnalysisActionTypes, analysisSlice } from './analysis/analysis.slice'
-import { ChallengeActionTypes } from './challenge/challenge.actions'
-import { challengeReducer } from './challenge/challenge.reducer'
+import {
+ ChallengeActionTypes,
+ challengeSlice,
+} from './challenge/challenge.slice'
import { ChartActionTypes, chartSlice } from './chart/chart.slice'
import { GlobalActionTypes } from './global/global.actions'
import { ModalActionTypes, modalSlice } from './modal/modal.slice'
@@ -30,8 +32,10 @@ import { ProfileActionTypes } from './profile/profile.actions'
import { profileReducer } from './profile/profile.reducer'
import { ProfileEcogestureActionTypes } from './profileEcogesture/profileEcogesture.actions'
import { profileEcogestureReducer } from './profileEcogesture/profileEcogesture.reducer'
-import { ProfileTypeActionTypes } from './profileType/profileType.actions'
-import { profileTypeReducer } from './profileType/profileType.reducer'
+import {
+ ProfileTypeActionTypes,
+ profileTypeSlice,
+} from './profileType/profileType.slice'
export interface EcolyoState {
analysis: AnalysisState
@@ -48,13 +52,13 @@ export const defaultAction = { type: null, payload: undefined }
const ecolyoReducer = combineReducers({
analysis: analysisSlice.reducer,
- challenge: challengeReducer,
+ challenge: challengeSlice.reducer,
chart: chartSlice.reducer,
global: globalReducer,
modal: modalSlice.reducer,
profile: profileReducer,
profileEcogesture: profileEcogestureReducer,
- profileType: profileTypeReducer,
+ profileType: profileTypeSlice.reducer,
})
export interface AppStore {
@@ -62,7 +66,15 @@ export interface AppStore {
cozy: unknown
}
-// todo refactor types ?
+const appActions = {
+ ...analysisSlice.actions,
+ ...challengeSlice.actions,
+ ...chartSlice.actions,
+ ...modalSlice.actions,
+ ...profileTypeSlice.actions,
+}
+
+// TODO refactor types with AppActionsTypes = typeof appActions
export type AppActionsTypes =
| AnalysisActionTypes
| ChallengeActionTypes
@@ -77,7 +89,8 @@ const sentryReduxEnhancer = Sentry.createReduxEnhancer({})
const configureStore = (client: Client, persistedState: any) => {
const middlewares = [thunkMiddleware.withExtraArgument({ client })]
- const composeEnhancers = composeWithDevTools({ trace: true }) || compose
+ const composeEnhancers =
+ composeWithDevTools({ trace: true, actionCreators: appActions }) || compose
const store: Store<AppStore, AppActionsTypes> = createStore(
combineReducers({
diff --git a/src/store/profileType/profileType.actions.spec.ts b/src/store/profileType/profileType.actions.spec.ts
deleted file mode 100644
index dec9b8345c6ab2e56ecb080238b010d15bb12069..0000000000000000000000000000000000000000
--- a/src/store/profileType/profileType.actions.spec.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { profileTypeData } from '../../../tests/__mocks__/profileType.mock'
-import { createMockEcolyoStore } from '../../../tests/__mocks__/store'
-import { updateProfileType, UPDATE_PROFILETYPE } from './profileType.actions'
-
-const mockUpdateProfileType = jest.fn()
-jest.mock('services/profileTypeEntity.service', () => {
- return jest.fn(() => {
- return {
- updateProfileType: mockUpdateProfileType,
- }
- })
-})
-
-describe('profileType actions', () => {
- const store = createMockEcolyoStore()
- beforeEach(() => {
- store.clearActions()
- })
- it('should create an UPDATE_PROFILETYPE action when profileType is updated', async () => {
- mockUpdateProfileType.mockResolvedValueOnce(profileTypeData)
- const expectedActions = [
- {
- type: UPDATE_PROFILETYPE,
- payload: profileTypeData,
- },
- ]
- await store.dispatch(updateProfileType(profileTypeData))
- expect(store.getActions()).toEqual(expectedActions)
- })
-
- it('should not create action when profileType is not updated', async () => {
- mockUpdateProfileType.mockResolvedValueOnce(null)
- await store.dispatch(updateProfileType(profileTypeData))
- expect(store.getActions()).toEqual([])
- })
-})
diff --git a/src/store/profileType/profileType.actions.ts b/src/store/profileType/profileType.actions.ts
deleted file mode 100644
index 25c43810920ec723e4a7adeb3ea7d6b6c053cc7b..0000000000000000000000000000000000000000
--- a/src/store/profileType/profileType.actions.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Client } from 'cozy-client'
-import { PROFILETYPE_DOCTYPE } from 'doctypes'
-import { ProfileType } from 'models'
-import { Dispatch } from 'react'
-import ProfileTypeEntityService from 'services/profileTypeEntity.service'
-import { AppStore, defaultAction } from 'store'
-
-export const UPDATE_PROFILETYPE = 'UPDATE_PROFILETYPE'
-export const CREATE_NEW_PROFILETYPE = 'CREATE_NEW_PROFILETYPE'
-
-export interface UpdateProfileType {
- type: typeof UPDATE_PROFILETYPE
- payload?: ProfileType
-}
-
-export interface CreateNewProfileType {
- type: typeof CREATE_NEW_PROFILETYPE
- payload?: ProfileType
-}
-
-export type ProfileTypeActionTypes =
- | UpdateProfileType
- | CreateNewProfileType
- | typeof defaultAction
-
-export function updateProfileTypeSuccess(
- updatedProfileType: ProfileType
-): UpdateProfileType {
- return {
- type: UPDATE_PROFILETYPE,
- payload: updatedProfileType,
- }
-}
-
-export function updateProfileType(updates: Partial<ProfileType>): any {
- return async (
- dispatch: Dispatch<UpdateProfileType>,
- getState: () => AppStore,
- { client }: { client: Client }
- ): Promise<void> => {
- const profileTypeEntityService = new ProfileTypeEntityService(client)
- const updatedProfileType = await profileTypeEntityService.updateProfileType(
- updates
- )
- if (updatedProfileType) {
- dispatch(updateProfileTypeSuccess(updatedProfileType))
- }
- }
-}
-
-export function newProfileTypeEntry(updates: Partial<ProfileType>): any {
- return async (
- dispatch: Dispatch<UpdateProfileType>,
- getState: () => AppStore,
- { client }: { client: Client }
- ) => {
- const { data: newProfileType } = await client.create(
- PROFILETYPE_DOCTYPE,
- updates
- )
- if (newProfileType) {
- dispatch(updateProfileTypeSuccess(newProfileType))
- }
- }
-}
diff --git a/src/store/profileType/profileType.reducer.spec.ts b/src/store/profileType/profileType.reducer.spec.ts
deleted file mode 100644
index 7704a227a54f9cfa5f719fa517a8524234b41600..0000000000000000000000000000000000000000
--- a/src/store/profileType/profileType.reducer.spec.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { defaultAction } from 'store'
-import { profileTypeData } from '../../../tests/__mocks__/profileType.mock'
-import { mockInitialProfileTypeState } from '../../../tests/__mocks__/store'
-import { UPDATE_PROFILETYPE } from './profileType.actions'
-import { profileTypeReducer } from './profileType.reducer'
-
-describe('profile reducer', () => {
- it('should return the initial state', () => {
- const state = profileTypeReducer(undefined, { ...defaultAction })
- expect(state).toEqual(mockInitialProfileTypeState)
- })
-
- it('should handle UPDATE_PROFILETYPE with payload', () => {
- const state = profileTypeReducer(mockInitialProfileTypeState, {
- type: UPDATE_PROFILETYPE,
- payload: profileTypeData,
- })
- expect(state).toEqual(profileTypeData)
- })
-
- it('should handle UPDATE_PROFILETYPE without payload', () => {
- const state = profileTypeReducer(mockInitialProfileTypeState, {
- type: UPDATE_PROFILETYPE,
- })
- expect(state).toEqual(mockInitialProfileTypeState)
- })
-})
diff --git a/src/store/profileType/profileType.slice.spec.ts b/src/store/profileType/profileType.slice.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f4fb708b43e73f4cf39bffc4496c6cc09f015718
--- /dev/null
+++ b/src/store/profileType/profileType.slice.spec.ts
@@ -0,0 +1,67 @@
+import { EquipmentType } from 'enum/ecogesture.enum'
+import { FluidType } from 'enum/fluid.enum'
+import {
+ ConstructionYear,
+ Floor,
+ HotWaterEquipment,
+ HotWaterFluid,
+ HousingType,
+ IndividualOrCollective,
+ OutsideFacingWalls,
+ ThreeChoicesAnswer,
+ WarmingType,
+} from 'enum/profileType.enum'
+import { DateTime } from 'luxon'
+import { ProfileType } from 'models'
+import { mockInitialProfileTypeState } from '../../../tests/__mocks__/store'
+import { profileTypeSlice, setProfileType } from './profileType.slice'
+
+describe('profileType reducer', () => {
+ it('should return the initial state', () => {
+ const initialState = profileTypeSlice.reducer(undefined, {
+ type: undefined,
+ })
+ expect(initialState).toEqual(mockInitialProfileTypeState)
+ })
+
+ describe('setProfileType', () => {
+ it('should handle update with partial payload', () => {
+ const state = profileTypeSlice.reducer(
+ mockInitialProfileTypeState,
+ setProfileType({ housingType: HousingType.APARTMENT })
+ )
+ expect(state).toEqual({
+ ...mockInitialProfileTypeState,
+ housingType: HousingType.APARTMENT,
+ })
+ })
+
+ it('should handle update with full payload', () => {
+ const newProfileType: ProfileType = {
+ housingType: HousingType.APARTMENT,
+ constructionYear: ConstructionYear.AFTER_1998,
+ area: '200',
+ occupantsNumber: 8,
+ outsideFacingWalls: OutsideFacingWalls.ONE,
+ floor: Floor.INTERMEDIATE_FLOOR,
+ heating: IndividualOrCollective.INDIVIDUAL,
+ coldWater: IndividualOrCollective.INDIVIDUAL,
+ hotWater: IndividualOrCollective.INDIVIDUAL,
+ individualInsulationWork: [],
+ hasInstalledVentilation: ThreeChoicesAnswer.YES,
+ hasReplacedHeater: ThreeChoicesAnswer.YES,
+ hotWaterEquipment: HotWaterEquipment.THERMODYNAMIC,
+ warmingFluid: WarmingType.ELECTRICITY,
+ hotWaterFluid: HotWaterFluid.ELECTRICITY,
+ cookingFluid: FluidType.ELECTRICITY,
+ updateDate: DateTime.fromISO('0000-01-01T00:00:00.000Z'),
+ equipments: [EquipmentType.BOILER],
+ }
+ const state = profileTypeSlice.reducer(
+ mockInitialProfileTypeState,
+ setProfileType(newProfileType)
+ )
+ expect(state).toEqual(newProfileType)
+ })
+ })
+})
diff --git a/src/store/profileType/profileType.reducer.ts b/src/store/profileType/profileType.slice.ts
similarity index 70%
rename from src/store/profileType/profileType.reducer.ts
rename to src/store/profileType/profileType.slice.ts
index 6dbc015b193ab6f42cc01de3370510b193a0a646..e267f6fce5791f0abd351be67f24a1b1554e71ff 100644
--- a/src/store/profileType/profileType.reducer.ts
+++ b/src/store/profileType/profileType.slice.ts
@@ -1,3 +1,4 @@
+import { PayloadAction, createSlice } from '@reduxjs/toolkit'
import { FluidType } from 'enum/fluid.enum'
import {
ConstructionYear,
@@ -13,12 +14,6 @@ import {
} from 'enum/profileType.enum'
import { DateTime } from 'luxon'
import { ProfileType } from 'models'
-import { Reducer } from 'redux'
-import {
- CREATE_NEW_PROFILETYPE,
- UPDATE_PROFILETYPE,
-} from 'store/profileType/profileType.actions'
-import { ProfileTypeActionTypes } from './profileType.actions'
const initialState: ProfileType = {
housingType: HousingType.INDIVIDUAL_HOUSE,
@@ -44,18 +39,18 @@ const initialState: ProfileType = {
equipments: [],
}
-export const profileTypeReducer: Reducer<
- ProfileType,
- ProfileTypeActionTypes
-> = (state = initialState, action) => {
- switch (action.type) {
- case UPDATE_PROFILETYPE:
- case CREATE_NEW_PROFILETYPE:
- return {
- ...state,
- ...action.payload,
- }
- default:
- return state
- }
-}
+type SetProfileType = PayloadAction<Partial<ProfileType>>
+
+export type ProfileTypeActionTypes = SetProfileType
+
+export const profileTypeSlice = createSlice({
+ name: 'profileType',
+ initialState,
+ reducers: {
+ setProfileType: (state, action: SetProfileType) => {
+ Object.assign(state, action.payload)
+ },
+ },
+})
+
+export const { setProfileType } = profileTypeSlice.actions
diff --git a/src/styles/components/_barchart.scss b/src/styles/components/_barchart.scss
index 9cd721113ea359d0ac0acd3cec6d7cb4a9f917fd..7097e1166b54d81abdba7f456d5223939d5aace9 100644
--- a/src/styles/components/_barchart.scss
+++ b/src/styles/components/_barchart.scss
@@ -21,8 +21,12 @@
fill: $grey-bright;
}
}
+
.barContainer,
.barFill {
+ &.disabled * {
+ cursor: default !important;
+ }
&:hover {
cursor: pointer;
}
@@ -46,6 +50,9 @@
.bar-ELECTRICITY {
&:hover {
cursor: pointer;
+ &.disabled {
+ cursor: default;
+ }
}
}
.bar-ELECTRICITY {
diff --git a/src/targets/browser/index.tsx b/src/targets/browser/index.tsx
index 7322f9628adee0b245b903712706e538ed892b99..d8800d9b42c840aacf87c62f71dbf5cc28899e77 100644
--- a/src/targets/browser/index.tsx
+++ b/src/targets/browser/index.tsx
@@ -8,6 +8,7 @@ declare let Piwik: any
import * as Sentry from '@sentry/react'
import { BrowserTracing } from '@sentry/tracing'
import CozyClient, { Client, CozyProvider } from 'cozy-client'
+import { isFlagshipApp } from 'cozy-device-helper'
import { handleOAuthResponse } from 'cozy-harvest-lib/dist/helpers/oauth'
import { WebviewIntentProvider } from 'cozy-intent'
import { I18n, initTranslation } from 'cozy-ui/transpiled/react/I18n'
@@ -64,7 +65,7 @@ const setupApp = memoize(() => {
replaceTitleOnMobile: false,
appSlug: data.app.slug,
appNamePrefix: data.app.prefix,
- isInvertedTheme: true,
+ isInvertedTheme: isFlagshipApp(),
})
let tracker: undefined | MatomoTracker
diff --git a/src/types/cozy-bar.d.ts b/src/types/cozy-bar.d.ts
index 706ada9899bb9771266707671abcb7891f7ca57f..3eb901e7289677953ae19ac5c6e46180084e538c 100644
--- a/src/types/cozy-bar.d.ts
+++ b/src/types/cozy-bar.d.ts
@@ -8,6 +8,7 @@ declare module 'cozy-bar' {
appSlug?: string
lang: string
iconPath: string
+ isInvertedTheme: string
cozyClient: Client
cozyURL?: string
ssl?: boolean
diff --git a/src/utils/date.spec.ts b/src/utils/date.spec.ts
index b7c8df6688741ca6df46cc7f6aadd9e11de7ec75..a3ab46f2f056e0f9755b91d9b4fcd72335a1b935 100644
--- a/src/utils/date.spec.ts
+++ b/src/utils/date.spec.ts
@@ -5,7 +5,6 @@ import { Dataload } from 'models'
import { graphData } from '../../tests/__mocks__/chartData.mock'
import {
compareDates,
- convertDateToMonthString,
convertDateToMonthYearString,
convertDateToShortDateString,
getActualAnalysisDate,
@@ -403,24 +402,6 @@ describe('date utils', () => {
})
})
- describe('convertDateToMonthString test', () => {
- it('should return the name of the month with " de " ', () => {
- const date = DateTime.fromISO('2020-11-29T23:59:59.999Z', {
- zone: 'utc',
- })
- const result = convertDateToMonthString(date)
- expect(result).toBe(' de novembre')
- })
-
- it('should return the name of the month with " d\'" ', () => {
- const date = DateTime.fromISO('2020-10-29T23:59:59.999Z', {
- zone: 'utc',
- })
- const result = convertDateToMonthString(date)
- expect(result).toBe(" d'octobre")
- })
- })
-
describe('convertDateToMonthYearString test', () => {
it('should return the name of the month and the year', () => {
const date = DateTime.fromISO('2020-11-29T23:59:59.999Z', {
diff --git a/src/utils/date.ts b/src/utils/date.ts
index 60374d002e0b652c8c92683f8685a2a78828b188..805c50a8da1924327e80fca1840b6d22b226f809 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -126,14 +126,6 @@ export const convertDateToShortDateString = (
}
}
-export const convertDateToMonthString = (date: DateTime): string => {
- if (date.month !== 4 && date.month != 8 && date.month != 10) {
- return ' de ' + date.setLocale('fr-FR').toLocaleString({ month: 'long' })
- } else {
- return " d'" + date.setLocale('fr-FR').toLocaleString({ month: 'long' })
- }
-}
-
export const convertDateToMonthYearString = (date: DateTime): string => {
return date.setLocale('fr-FR').toLocaleString({
month: 'long',
diff --git a/src/utils/matomoTracker.ts b/src/utils/matomoTracker.ts
index 58c5964b341251e2bf39ebaccc0bfa840faa9b96..b78e264a69890b8a8814ff1a4eb8102d591bef4e 100644
--- a/src/utils/matomoTracker.ts
+++ b/src/utils/matomoTracker.ts
@@ -68,7 +68,7 @@ export default class MatomoTracker {
if (typeof window === 'undefined') {
return
}
- const currentPath = loc.hash.substring(1)
+ const currentPath = loc.pathname
MatomoTracker.push(['setCustomUrl', 'https://ecolyo.com' + currentPath])
MatomoTracker.push(['setDocumentTitle', currentPath.substring(1)])
diff --git a/src/utils/utils.spec.ts b/src/utils/utils.spec.ts
index 218e783cdd7e120ab649e756a55be0e30bcda362..70bdbb0e64fa6c188fab3aa74620e854b63cffe7 100644
--- a/src/utils/utils.spec.ts
+++ b/src/utils/utils.spec.ts
@@ -1,13 +1,21 @@
import { Season } from 'enum/ecogesture.enum'
-import { FluidType } from 'enum/fluid.enum'
+import { FluidState, FluidType } from 'enum/fluid.enum'
import { FluidSlugType } from 'enum/fluidSlug.enum'
+import { KonnectorUpdate } from 'enum/konnectorUpdate.enum'
import { DateTime } from 'luxon'
+import { FluidStatus } from 'models'
import {
formatNumberValues,
getChallengeTitleWithLineReturn,
+ getFluidName,
getFluidType,
getKonnectorSlug,
+ getKonnectorUpdateError,
+ getMonthFullName,
+ getMonthName,
+ getMonthNameWithPrep,
getSeason,
+ isKonnectorActive,
} from './utils'
describe('utils test', () => {
@@ -41,6 +49,80 @@ describe('utils test', () => {
expect(slug).toBe(FluidSlugType.GAS)
})
})
+ describe('getKonnectorUpdateError', () => {
+ it('should return KonnectorUpdate.ERROR_UPDATE_OAUTH for USER_ACTION_NEEDED.OAUTH_OUTDATED', () => {
+ const result = getKonnectorUpdateError(
+ 'USER_ACTION_NEEDED.OAUTH_OUTDATED'
+ )
+ expect(result).toBe(KonnectorUpdate.ERROR_UPDATE_OAUTH)
+ })
+ it('should return KonnectorUpdate.LOGIN_FAILED for LOGIN_FAILED', () => {
+ const result = getKonnectorUpdateError('LOGIN_FAILED')
+ expect(result).toBe(KonnectorUpdate.LOGIN_FAILED)
+ })
+ it('should return KonnectorUpdate.ERROR_CONSENT_FORM_GAS for CHALLENGE_ASKED', () => {
+ const result = getKonnectorUpdateError('CHALLENGE_ASKED')
+ expect(result).toBe(KonnectorUpdate.ERROR_CONSENT_FORM_GAS)
+ })
+ it('should return KonnectorUpdate.ERROR_UPDATE for an unknown type', () => {
+ const result = getKonnectorUpdateError('UNKNOWN_TYPE')
+ expect(result).toBe(KonnectorUpdate.ERROR_UPDATE)
+ })
+ })
+
+ describe('isKonnectorActive', () => {
+ describe('for MULTIFLUID', () => {
+ it('should return false when all fluids are not connected', () => {
+ const fluidStatus = [
+ { status: FluidState.NOT_CONNECTED },
+ { status: FluidState.KONNECTOR_NOT_FOUND },
+ { status: FluidState.NOT_CONNECTED },
+ ] as FluidStatus[]
+ const result = isKonnectorActive(fluidStatus, FluidType.MULTIFLUID)
+ expect(result).toBe(false)
+ })
+ it('should return true when some fluids are connected', () => {
+ const fluidStatus = [
+ { status: FluidState.DONE },
+ { status: FluidState.NOT_CONNECTED },
+ { status: FluidState.DONE },
+ ] as FluidStatus[]
+ const result = isKonnectorActive(fluidStatus, FluidType.MULTIFLUID)
+ expect(result).toBe(true)
+ })
+ })
+
+ describe('for SINGLE fluids', () => {
+ it('should return false for a single fluid not connected', () => {
+ const fluidStatus = [
+ {},
+ {
+ status: FluidState.NOT_CONNECTED,
+ fluidType: FluidType.GAS,
+ },
+ {
+ status: FluidState.KONNECTOR_NOT_FOUND,
+ fluidType: FluidType.WATER,
+ },
+ ] as FluidStatus[]
+ expect(isKonnectorActive(fluidStatus, FluidType.GAS)).toBe(false)
+ expect(isKonnectorActive(fluidStatus, FluidType.WATER)).toBe(false)
+ })
+ it('should return true for a single fluid connected', () => {
+ const fluidStatus = [
+ {
+ status: FluidState.DONE,
+ fluidType: FluidType.ELECTRICITY,
+ },
+ { status: FluidState.ERROR, fluidType: FluidType.WATER },
+ { status: FluidState.ERROR_LOGIN_FAILED, fluidType: FluidType.GAS },
+ ] as FluidStatus[]
+ expect(isKonnectorActive(fluidStatus, FluidType.ELECTRICITY)).toBe(true)
+ expect(isKonnectorActive(fluidStatus, FluidType.GAS)).toBe(true)
+ expect(isKonnectorActive(fluidStatus, FluidType.WATER)).toBe(true)
+ })
+ })
+ })
describe('formatNumberValues test', () => {
it('should return --,-- if there is not value', () => {
@@ -104,4 +186,42 @@ describe('utils test', () => {
expect(getChallengeTitleWithLineReturn('CHALLENGE0000')).toBe(undefined)
})
})
+
+ describe('getMonthFullName', () => {
+ it('should return the name of the month', () => {
+ expect(getMonthFullName(3)).toBe('Mars')
+ })
+ })
+
+ describe('getMonthFullName', () => {
+ it('should return the name of the month', () => {
+ expect(getMonthName(DateTime.local(2023, 6, 1))).toBe('juin')
+ })
+ })
+ describe('getMonthNameWithPrep', () => {
+ it('should return the name of the month with " de " ', () => {
+ const date = DateTime.fromISO('2020-11-29T23:59:59.999Z')
+ expect(getMonthNameWithPrep(date)).toBe('de novembre')
+ })
+
+ it('should return the name of the month with " d\'" ', () => {
+ const date = DateTime.fromISO('2020-10-29T23:59:59.999Z')
+ expect(getMonthNameWithPrep(date)).toBe('d’octobre')
+ })
+ })
+
+ describe('getFluidName', () => {
+ it('should return electricity', () => {
+ expect(getFluidName(FluidType.ELECTRICITY)).toBe('electricity')
+ })
+ it('should return water', () => {
+ expect(getFluidName(FluidType.WATER)).toBe('water')
+ })
+ it('should return gas', () => {
+ expect(getFluidName(FluidType.GAS)).toBe('gas')
+ })
+ it('should return multifluid', () => {
+ expect(getFluidName(FluidType.MULTIFLUID)).toBe('multifluid')
+ })
+ })
})
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index e24d187a25f5e84fc98f436f3c1434fd60aade92..cae5a543900c147b1bf784d9e5b12705af4d3430 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -31,6 +31,13 @@ export function getKonnectorSlug(fluidType: FluidType) {
throw new Error('unknown fluidtype')
}
}
+/** Return lowercase fluidtype
+ * @example FluidType.ELECTRICITY => 'electricity'
+ */
+export function getFluidName(fluidType: FluidType) {
+ return FluidType[fluidType].toLowerCase()
+}
+
export function getKonnectorUpdateError(type: string) {
switch (type.toUpperCase()) {
case 'USER_ACTION_NEEDED.OAUTH_OUTDATED':
@@ -90,7 +97,6 @@ export function formatNumberValues(
/**
* Get one relation in doc
- *
* @param {object} doc - DocumentEntity
* @param {string} relName - Name of the relation
*/
@@ -100,7 +106,6 @@ export function getRelationship<D>(doc: D, relName: string): Relation {
/**
* Get array of items in one relation in doc
- *
* @param {object} doc - DocumentEntity
* @param {string} relName - Name of the relation
*/
@@ -110,7 +115,6 @@ export function getRelationshipHasMany<D>(doc: D, relName: string): Relation[] {
/**
* Get many relations in doc
- *
* @param {object} doc - DocumentEntity
* @param {Array<[relName: string]: Array<Relation>>} relNameList - Array of name of the relations
*/
@@ -124,7 +128,6 @@ export function getRelationships<D>(
}
/**
- *
* @param id
* @param pathType
*/
@@ -142,8 +145,28 @@ export const importIconById = async (id: string, pathType: string) => {
}
}
+export const getMonthFullName = (month: number) => {
+ const monthNames = [
+ 'Janvier',
+ 'Février',
+ 'Mars',
+ 'Avril',
+ 'Mai',
+ 'Juin',
+ 'Juillet',
+ 'Août',
+ 'Septembre',
+ 'Octobre',
+ 'Novembre',
+ 'Décembre',
+ ] as const
+ if (month < 1 || month > 12) throw new Error('Invalid month')
+ return monthNames[month - 1]
+}
+
/**
* Return month string according to month index
+ * @Note Equivalent to date.monthLong
* @param date - DateTime
* @returns month in french
*/
diff --git a/tests/__mocks__/modalStateData.mock.ts b/tests/__mocks__/modalStateData.mock.ts
deleted file mode 100644
index be2d0569a842dda8b09edbef3c6d9e205e202d07..0000000000000000000000000000000000000000
--- a/tests/__mocks__/modalStateData.mock.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { ModalState } from 'models'
-
-export const modalStateData: ModalState = {
- isFeedbacksOpen: false,
- partnersIssueModal: {
- egl: false,
- enedis: false,
- grdf: false,
- },
-}
diff --git a/tests/__mocks__/store.ts b/tests/__mocks__/store.ts
index 02fac12142e08ec8641245a055796d79c2fb189a..d3540b60bbc3d2eecdb72a8a97d28905891c600d 100644
--- a/tests/__mocks__/store.ts
+++ b/tests/__mocks__/store.ts
@@ -298,12 +298,13 @@ export const mockInitialChallengeState: ChallengeState = {
currentDataload: [],
}
-export const mockInitialAnalysisState: AnalysisState = {
+export const mockAnalysisState: AnalysisState = {
period: 'month',
+ analysisMonth: DateTime.local(2023, 1, 1).startOf('day'),
}
export const mockInitialEcolyoState: EcolyoState = {
- analysis: mockInitialAnalysisState,
+ analysis: mockAnalysisState,
challenge: mockInitialChallengeState,
chart: mockInitialChartState,
global: mockInitialGlobalState,