diff --git a/src/assets/icons/ico/wrongAnswer.svg b/src/assets/icons/ico/wrongAnswer.svg
index fe91447b5e325187fad5e0dce9189439ee0d5e76..2caf5462f40f4054ff5a03fb200d376e76848816 100644
--- a/src/assets/icons/ico/wrongAnswer.svg
+++ b/src/assets/icons/ico/wrongAnswer.svg
@@ -1,14 +1,14 @@
-<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M48.2801 30.2343L40 54.5818H49.8344L43.9952 83.9235L34.9424 92.0046C34.547 92.3588 34.0588 92.6012 33.5333 92.7042C33.0078 92.8072 32.466 92.7667 31.9692 92.5873C31.4725 92.408 31.0408 92.0969 30.723 91.6894C30.4052 91.2819 30.2141 90.7943 30.1713 90.2818L28.3016 68.2604L8.39532 57.6442C7.73617 57.2927 7.25421 56.7003 7.05535 55.9971C6.85648 55.294 6.95698 54.5375 7.33476 53.8941C7.64805 53.3648 8.12918 52.942 8.71351 52.6964L29.8939 43.7349L34.6064 21.9803C34.9392 20.484 36.4583 19.4981 38.0011 19.7794C38.6161 19.8907 39.1716 20.196 39.5805 20.6475L48.2801 30.2343Z" fill="url(#paint0_linear)"/>
-<path d="M63.7293 29.0577L57 42.3489H65.1245L46.6145 82.8884L53.759 80.0248L73.1784 92.0028C73.7083 92.3333 74.3437 92.4829 74.9693 92.4331C76.5467 92.3096 77.714 90.9854 77.574 89.471L75.5578 67.4625L93.297 53.5239C93.78 53.1423 94.1221 52.6191 94.263 52.0269C94.6333 50.5478 93.6621 49.0656 92.1171 48.7083L69.6945 43.5951L63.7293 29.0577Z" fill="url(#paint1_linear)"/>
-<defs>
-<linearGradient id="paint0_linear" x1="55.2506" y1="30.5972" x2="51.5507" y2="90.4625" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FF7B7B"/>
-<stop offset="1" stop-color="#BE2121"/>
-</linearGradient>
-<linearGradient id="paint1_linear" x1="55.2506" y1="30.5972" x2="51.5507" y2="90.4625" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FF7B7B"/>
-<stop offset="1" stop-color="#BE2121"/>
-</linearGradient>
-</defs>
-</svg>
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M57.3247 33.5029L49.0446 57.8504H58.8789L53.0398 87.1921L43.987 95.2732C43.5915 95.6274 43.1034 95.8697 42.5779 95.9727C42.0524 96.0757 41.5105 96.0352 41.0138 95.8559C40.5171 95.6765 40.0853 95.3655 39.7675 94.958C39.4498 94.5505 39.2586 94.0628 39.2158 93.5504L37.3461 71.5289L17.4399 60.9127C16.7807 60.5613 16.2988 59.9689 16.0999 59.2657C15.901 58.5625 16.0015 57.8061 16.3793 57.1626C16.6926 56.6334 17.1737 56.2106 17.7581 55.965L38.9385 47.0035L43.651 25.2488C43.9838 23.7526 45.5029 22.7667 47.0457 23.0479C47.6606 23.1592 48.2161 23.4646 48.625 23.916L57.3247 33.5029Z" fill="url(#paint0_linear)"/>
+<path d="M72.7739 32.3263L66.0446 45.6175H74.1691L55.659 86.1569L62.8036 83.2933L82.2229 95.2714C82.7528 95.6019 83.3883 95.7515 84.0139 95.7016C85.5912 95.5782 86.7586 94.2539 86.6186 92.7396L84.6024 70.7311L102.342 56.7924C102.825 56.4109 103.167 55.8877 103.308 55.2954C103.678 53.8163 102.707 52.3342 101.162 51.9769L78.739 46.8637L72.7739 32.3263Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="64.2951" y1="33.8658" x2="60.5952" y2="93.7311" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF7B7B"/>
+<stop offset="1" stop-color="#BE2121"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="64.2951" y1="33.8658" x2="60.5952" y2="93.7311" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF7B7B"/>
+<stop offset="1" stop-color="#BE2121"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/components/Action/ActionBegin.spec.tsx b/src/components/Action/ActionBegin.spec.tsx
index 8c699764c79c307c7576e1016d26bbe15d30a839..e18c61406bef6c49c466f630cd3e9f5afa1198fd 100644
--- a/src/components/Action/ActionBegin.spec.tsx
+++ b/src/components/Action/ActionBegin.spec.tsx
@@ -136,6 +136,7 @@ describe('ActionBegin component', () => {
.first()
.simulate('click')
expect(wrapper.find(ActionModal).exists()).toBeTruthy()
+ expect(wrapper.find(ActionModal).prop('open')).toBeTruthy()
})
it('should go to the list ', async () => {
const store = mockStore({
diff --git a/src/components/Action/ActionBegin.tsx b/src/components/Action/ActionBegin.tsx
index 9ec96b42a1c41a35a0441bb8679df54a088c3e4f..c6e918965aec473d2458ea4c4368a5c90be3eb26 100644
--- a/src/components/Action/ActionBegin.tsx
+++ b/src/components/Action/ActionBegin.tsx
@@ -124,13 +124,12 @@ const ActionBegin: React.FC<ActionBeginProps> = ({
</Button>
</div>
</div>
- {openLaunchModal && (
- <ActionModal
- action={currentAction}
- handleCloseClick={toggleLaunchModal}
- userChallenge={userChallenge}
- />
- )}
+ <ActionModal
+ open={openLaunchModal}
+ action={currentAction}
+ handleCloseClick={toggleLaunchModal}
+ userChallenge={userChallenge}
+ />
</div>
)}
</div>
diff --git a/src/components/Action/ActionCard.tsx b/src/components/Action/ActionCard.tsx
index 6e53ee2d1f6845eef6cee505d8cec7c6300bfd10..ec510ca4ad5b450205ab17f72582ecc2e56b4bae 100644
--- a/src/components/Action/ActionCard.tsx
+++ b/src/components/Action/ActionCard.tsx
@@ -46,8 +46,9 @@ const ActionCard: React.FC<ActionCardProps> = ({
<div className="action-title text-18-bold">{action.shortName}</div>
</Button>
)}
- {openEcogestureModal && action && (
+ {action && (
<EcogestureModal
+ open={openEcogestureModal}
ecogesture={action}
isAction={true}
handleCloseClick={toggleModal}
diff --git a/src/components/Action/ActionModal.spec.tsx b/src/components/Action/ActionModal.spec.tsx
index 4c868735e27fb4dc0d0d4e7e63cf08cf8c73eacd..b39dddcd7873cc4c3407ba564fc398bd6b2bda86 100644
--- a/src/components/Action/ActionModal.spec.tsx
+++ b/src/components/Action/ActionModal.spec.tsx
@@ -43,6 +43,7 @@ describe('ActionModal component', () => {
const wrapper = mount(
<Provider store={store}>
<ActionModal
+ open={true}
handleCloseClick={jest.fn()}
action={defaultEcogestureData[1]}
userChallenge={userChallengeData[1]}
@@ -71,6 +72,7 @@ describe('ActionModal component', () => {
const wrapper = mount(
<Provider store={store}>
<ActionModal
+ open={true}
handleCloseClick={jest.fn()}
action={defaultEcogestureData[1]}
userChallenge={userChallengeData[1]}
diff --git a/src/components/Action/ActionModal.tsx b/src/components/Action/ActionModal.tsx
index c90239f3cfb467d21111fc592bb8de61245d8e16..07819092464f26b180d0a695027d0b90b0a3f100 100644
--- a/src/components/Action/ActionModal.tsx
+++ b/src/components/Action/ActionModal.tsx
@@ -1,24 +1,27 @@
-import React from 'react'
+import React, { useCallback } from 'react'
+import './actionModal.scss'
+import { useClient } from 'cozy-client'
+import { useDispatch } from 'react-redux'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { Ecogesture, UserChallenge } from 'models'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import Modal from 'components/CommonKit/Modal/Modal'
-import { Button } from '@material-ui/core'
-import { useCallback } from 'react'
-import ChallengeService from 'services/challenge.service'
import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
+import ChallengeService from 'services/challenge.service'
+
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
import { updateUserChallengeList } from 'store/challenge/challenge.actions'
-import { useClient } from 'cozy-client'
-import { useDispatch } from 'react-redux'
import chronoMini from 'assets/icons/visu/action/chrono-mini.svg'
-import './actionModal.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+
interface ActionModalProps {
+ open: boolean
action: Ecogesture
handleCloseClick: () => void
userChallenge: UserChallenge
}
const ActionModal: React.FC<ActionModalProps> = ({
+ open,
action,
handleCloseClick,
userChallenge,
@@ -39,9 +42,17 @@ const ActionModal: React.FC<ActionModalProps> = ({
}, [action, client, dispatch, userChallenge])
return (
- <Modal border={false} handleCloseClick={handleCloseClick}>
+ <Dialog
+ open={open}
+ onClose={handleCloseClick}
+ aria-label={t('action_modal.accessibility.window_title')}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper',
+ }}
+ >
<div className="action-modal">
- <StyledIcon icon={chronoMini} size={75} />
+ <Icon icon={chronoMini} size={75} />
<div className="action-title text-16-normal">
{t('action.duration', {
@@ -52,26 +63,28 @@ const ActionModal: React.FC<ActionModalProps> = ({
<div className="action-text text-16-normal">{action.longName}</div>
<div className="buttons">
<Button
+ aria-label={t('action_modal.accessibility.button_accept')}
classes={{
root: 'btn-secondary-negative',
label: 'text-16-normal',
}}
onClick={launchAction}
>
- {t('action.accept')}
+ {t('action_modal.accept')}
</Button>
<Button
+ aria-label={t('action_modal.accessibility.button_refuse')}
classes={{
root: 'btn-secondary-negative',
label: 'text-16-normal',
}}
onClick={handleCloseClick}
>
- {t('action.refuse')}
+ {t('action_modal.refuse')}
</Button>
</div>
</div>
- </Modal>
+ </Dialog>
)
}
diff --git a/src/components/Action/ActionOnGoing.tsx b/src/components/Action/ActionOnGoing.tsx
index cf11105fba598b3fa44fb51ce2ac70f0337a761c..cb7a95266822e7f06bf4e2741315ca009bffb6dc 100644
--- a/src/components/Action/ActionOnGoing.tsx
+++ b/src/components/Action/ActionOnGoing.tsx
@@ -103,13 +103,12 @@ const ActionOnGoing: React.FC<ActionOnGoingProps> = ({
>
{t('action.details')}
</Button>
- {openEcogestureModal && (
- <EcogestureModal
- ecogesture={userAction.ecogesture}
- isAction={false}
- handleCloseClick={toggleEcogestureModal}
- />
- )}
+ <EcogestureModal
+ open={openEcogestureModal}
+ ecogesture={userAction.ecogesture}
+ isAction={false}
+ handleCloseClick={toggleEcogestureModal}
+ />
</>
)}
</div>
diff --git a/src/components/Analysis/AnalysisError.spec.tsx b/src/components/Analysis/AnalysisError.spec.tsx
index 4f4104984a3c60ea152d3ad193af25bd5eb00644..2b44b6209c4fd0b89e34212345f1eca13e96f1a5 100644
--- a/src/components/Analysis/AnalysisError.spec.tsx
+++ b/src/components/Analysis/AnalysisError.spec.tsx
@@ -1,81 +1,81 @@
-import React from 'react'
-import { mount } from 'enzyme'
-import AnalysisError from 'components/Analysis/AnalysisError'
-import configureStore from 'redux-mock-store'
-import { profileData } from '../../../tests/__mocks__/profile.mock'
-import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
-import { Provider } from 'react-redux'
-import MuiButton from '@material-ui/core/Button'
-import Modal from 'components/CommonKit/Modal/Modal'
-
-jest.mock('cozy-ui/transpiled/react/I18n', () => {
- return {
- useI18n: jest.fn(() => {
- return {
- t: (str: string) => str,
- }
- }),
- }
-})
-const mockHistoryPush = jest.fn()
-const mockHistoryGoBack = jest.fn()
-jest.mock('react-router-dom', () => ({
- ...jest.requireActual('react-router-dom'),
- useHistory: () => ({
- push: mockHistoryPush,
- goBack: mockHistoryGoBack,
- }),
-}))
-const mockStore = configureStore([])
-
-describe('AnalysisError component', () => {
- it('should be rendered correctly', () => {
- const store = mockStore({
- ecolyo: {
- profile: profileData,
- global: globalStateData,
- },
- })
- const wrapper = mount(
- <Provider store={store}>
- <AnalysisError />
- </Provider>
- )
- expect(wrapper.find(Modal).exists()).toBeTruthy()
- expect(wrapper.find(MuiButton).exists()).toBeTruthy()
- })
- it('should redirect to previous page', () => {
- const store = mockStore({
- ecolyo: {
- profile: profileData,
- global: globalStateData,
- },
- })
- const wrapper = mount(
- <Provider store={store}>
- <AnalysisError />
- </Provider>
- )
- wrapper
- .find('.btn-secondary-positive')
- .first()
- .simulate('click')
- })
- it('should redirect to options', () => {
- const store = mockStore({
- ecolyo: {
- profile: profileData,
- global: globalStateData,
- },
- })
- const wrapper = mount(
- <Provider store={store}>
- <AnalysisError />
- </Provider>
- )
- wrapper
- .find('.btn-highlight')
- .first()
- .simulate('click')
- })
-})
+import React from 'react'
+import { mount } from 'enzyme'
+import AnalysisErrorModal from 'components/Analysis/AnalysisErrorModal'
+import configureStore from 'redux-mock-store'
+import { profileData } from '../../../tests/__mocks__/profile.mock'
+import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
+import { Provider } from 'react-redux'
+import Dialog from '@material-ui/core/Dialog'
+import Button from '@material-ui/core/Button'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+const mockHistoryPush = jest.fn()
+const mockHistoryGoBack = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useHistory: () => ({
+ push: mockHistoryPush,
+ goBack: mockHistoryGoBack,
+ }),
+}))
+const mockStore = configureStore([])
+
+describe('AnalysisErrorModal component', () => {
+ it('should be rendered correctly', () => {
+ const store = mockStore({
+ ecolyo: {
+ profile: profileData,
+ global: globalStateData,
+ },
+ })
+ const wrapper = mount(
+ <Provider store={store}>
+ <AnalysisErrorModal />
+ </Provider>
+ )
+ expect(wrapper.find(Dialog).exists()).toBeTruthy()
+ expect(wrapper.find(Button).exists()).toBeTruthy()
+ })
+ it('should redirect to previous page', () => {
+ const store = mockStore({
+ ecolyo: {
+ profile: profileData,
+ global: globalStateData,
+ },
+ })
+ const wrapper = mount(
+ <Provider store={store}>
+ <AnalysisErrorModal />
+ </Provider>
+ )
+ wrapper
+ .find('.btn-secondary-positive')
+ .first()
+ .simulate('click')
+ })
+ it('should redirect to options', () => {
+ const store = mockStore({
+ ecolyo: {
+ profile: profileData,
+ global: globalStateData,
+ },
+ })
+ const wrapper = mount(
+ <Provider store={store}>
+ <AnalysisErrorModal />
+ </Provider>
+ )
+ wrapper
+ .find('.btn-highlight')
+ .first()
+ .simulate('click')
+ })
+})
diff --git a/src/components/Analysis/AnalysisError.tsx b/src/components/Analysis/AnalysisError.tsx
deleted file mode 100644
index 5c93f62c8eb5a6a78f5b668495786346546a89bb..0000000000000000000000000000000000000000
--- a/src/components/Analysis/AnalysisError.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useHistory } from 'react-router-dom'
-import MuiButton from '@material-ui/core/Button'
-import './analysisError.scss'
-import Modal from 'components/CommonKit/Modal/Modal'
-
-const AnalysisError: React.FC = () => {
- const { t } = useI18n()
- const history = useHistory()
- const goToOptions = () => {
- history.push('/options')
- }
- const goBack = () => {
- history.goBack()
- }
- return (
- <Modal border={false} handleCloseClick={goBack}>
- <div className="em-root analyis-error-container">
- <div className="em-content">
- <div className="analyis-error-title text-20-bold">
- {t('analysis.error_title')}
- </div>
- <div className="analyis-error-message text-16-normal">
- {t('analysis.error_message')}
- </div>
- <div className="analyis-error-button">
- <MuiButton
- onClick={goBack}
- classes={{
- root: 'btn-secondary-positive',
- label: 'text-16-normal',
- }}
- >
- {t('analysis.go_back')}
- </MuiButton>
- <MuiButton
- onClick={goToOptions}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- >
- {t('analysis.go_to_options')}
- </MuiButton>
- </div>
- </div>
- </div>
- </Modal>
- )
-}
-
-export default AnalysisError
diff --git a/src/components/Analysis/AnalysisErrorModal.tsx b/src/components/Analysis/AnalysisErrorModal.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1d00e925195e39faa02466ef2c4581544b47eeda
--- /dev/null
+++ b/src/components/Analysis/AnalysisErrorModal.tsx
@@ -0,0 +1,69 @@
+import React from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useHistory } from 'react-router-dom'
+import Button from '@material-ui/core/Button'
+import './analysisError.scss'
+import Dialog from '@material-ui/core/Dialog'
+
+const AnalysisErrorModal: React.FC = () => {
+ const { t } = useI18n()
+ const history = useHistory()
+ const goToOptions = () => {
+ history.push('/options')
+ }
+ const goBack = () => {
+ history.goBack()
+ }
+ return (
+ <Dialog
+ open={true}
+ disableBackdropClick
+ disableEscapeKeyDown
+ onClose={goBack}
+ aria-label={t('analysis_error_modal.accessibility.window_title')}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper',
+ }}
+ >
+ <div className="em-root analyis-error-container">
+ <div className="em-content">
+ <div className="analyis-error-title text-20-bold">
+ {t('analysis_error_modal.title')}
+ </div>
+ <div className="analyis-error-message text-16-normal">
+ {t('analysis_error_modal.message')}
+ </div>
+ <div className="analyis-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={goToOptions}
+ 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/MonthlyAnalysis.tsx b/src/components/Analysis/MonthlyAnalysis.tsx
index 520fd87c1e03ab8f2c16efb0023105284d8d5416..2c45553f6d7898797d2dfcbab098ac6e08d58671 100644
--- a/src/components/Analysis/MonthlyAnalysis.tsx
+++ b/src/components/Analysis/MonthlyAnalysis.tsx
@@ -21,7 +21,7 @@ import MuiButton from '@material-ui/core/Button'
import AnalysisConsumption from './AnalysisConsumption'
import { useHistory } from 'react-router-dom'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
-import AnalysisError from './AnalysisError'
+import AnalysisErrorModal from './AnalysisErrorModal'
const MonthlyAnalysis: React.FC = () => {
const { t } = useI18n()
@@ -126,7 +126,7 @@ const MonthlyAnalysis: React.FC = () => {
performanceIndicators={performanceIndicators}
/>
) : (
- <AnalysisError />
+ <AnalysisErrorModal />
)}
</div>
</div>
diff --git a/src/components/Challenge/ChallengeCardOnGoing.tsx b/src/components/Challenge/ChallengeCardOnGoing.tsx
index 45c3de540ff284b643b2e755b7ec968d082b4527..7445f0314964e650406bd5f28d16c927a619a351 100644
--- a/src/components/Challenge/ChallengeCardOnGoing.tsx
+++ b/src/components/Challenge/ChallengeCardOnGoing.tsx
@@ -275,9 +275,10 @@ const ChallengeCardOnGoing: React.FC<ChallengeCardOnGoingProps> = ({
<StyledIcon className="duelLocked" icon={duelLocked} size={60} />
</div>
)}
- {!isOneFluidUp && (
- <ChallengeNoFluidModal handleCloseClick={toggleNoFluidModal} />
- )}
+ <ChallengeNoFluidModal
+ open={!isOneFluidUp}
+ handleCloseClick={toggleNoFluidModal}
+ />
</div>
)
}
diff --git a/src/components/Challenge/ChallengeCardUnlocked.spec.tsx b/src/components/Challenge/ChallengeCardUnlocked.spec.tsx
index e0d0f86a92831c6558632ad68c11da4b8b42d342..cb3cf73832611ea4193bb1c56a2971e0ed381515 100644
--- a/src/components/Challenge/ChallengeCardUnlocked.spec.tsx
+++ b/src/components/Challenge/ChallengeCardUnlocked.spec.tsx
@@ -45,7 +45,8 @@ describe('ChallengeCardUnlocked component', () => {
userChallengeData[0].title
)
expect(wrapper.find('.btn-duel-active').exists()).toBeTruthy()
- expect(wrapper.find(ChallengeNoFluidModal).exists()).toBeFalsy()
+ expect(wrapper.find(ChallengeNoFluidModal).exists()).toBeTruthy()
+ expect(wrapper.find(ChallengeNoFluidModal).prop('open')).toBeFalsy()
})
it('should display ChallengeNoFluidModal when launching challenge without configured fluid', () => {
@@ -64,6 +65,7 @@ describe('ChallengeCardUnlocked component', () => {
.first()
.simulate('click')
expect(wrapper.find(ChallengeNoFluidModal).exists()).toBeTruthy()
+ expect(wrapper.find(ChallengeNoFluidModal).prop('open')).toBeTruthy()
})
it('should not display ChallengeNoFluidModal and update userChallenge when launching challenge with configured fluid', () => {
@@ -85,7 +87,8 @@ describe('ChallengeCardUnlocked component', () => {
.find('.btn-duel-active')
.first()
.simulate('click')
- expect(wrapper.find(ChallengeNoFluidModal).exists()).toBeFalsy()
+ expect(wrapper.find(ChallengeNoFluidModal).exists()).toBeTruthy()
+ expect(wrapper.find(ChallengeNoFluidModal).prop('open')).toBeFalsy()
expect(mockStartUserChallenge).toHaveBeenCalledWith(userChallengeData[0])
})
})
diff --git a/src/components/Challenge/ChallengeCardUnlocked.tsx b/src/components/Challenge/ChallengeCardUnlocked.tsx
index 668892cdc12f7f6c05de76eefed4997f30aa30c6..547d92062df31f14697c186e8148f1631f94d14a 100644
--- a/src/components/Challenge/ChallengeCardUnlocked.tsx
+++ b/src/components/Challenge/ChallengeCardUnlocked.tsx
@@ -67,10 +67,10 @@ const ChallengeCardUnlocked: React.FC<ChallengeCardUnlockedProps> = ({
{t('challenge.card.unlocked.launch')}
</MuiButton>
</div>
-
- {openNoFluidModal && (
- <ChallengeNoFluidModal handleCloseClick={toggleNoFluidModal} />
- )}
+ <ChallengeNoFluidModal
+ open={openNoFluidModal}
+ handleCloseClick={toggleNoFluidModal}
+ />
</>
)
}
diff --git a/src/components/Challenge/ChallengeNoFluidModal.spec.tsx b/src/components/Challenge/ChallengeNoFluidModal.spec.tsx
index 3654d213ee3503b36b77ee4aa070392fca3cb35a..ca1ba37a471045121bec1f1a9d1be1c60d5a0986 100644
--- a/src/components/Challenge/ChallengeNoFluidModal.spec.tsx
+++ b/src/components/Challenge/ChallengeNoFluidModal.spec.tsx
@@ -1,23 +1,23 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-import ChallengeNoFluidModal from './ChallengeNoFluidModal'
-
-jest.mock('cozy-ui/transpiled/react/I18n', () => {
- return {
- useI18n: jest.fn(() => {
- return {
- t: (str: string) => str,
- }
- }),
- }
-})
-
-describe('ChallengeNoFluidModal component', () => {
- it('should be rendered correctly opened', () => {
- const handleClose = jest.fn()
- const component = shallow(
- <ChallengeNoFluidModal handleCloseClick={handleClose} />
- ).getElement()
- expect(component).toMatchSnapshot()
- })
-})
+import React from 'react'
+import { shallow } from 'enzyme'
+import ChallengeNoFluidModal from './ChallengeNoFluidModal'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+
+describe('ChallengeNoFluidModal component', () => {
+ it('should be rendered correctly opened', () => {
+ const handleClose = jest.fn()
+ const component = shallow(
+ <ChallengeNoFluidModal open={true} handleCloseClick={handleClose} />
+ ).getElement()
+ expect(component).toMatchSnapshot()
+ })
+})
diff --git a/src/components/Challenge/ChallengeNoFluidModal.tsx b/src/components/Challenge/ChallengeNoFluidModal.tsx
index 4b614daaee158365b5f82ba6670384dfb44af1ee..989d6ce409d3496ee2392d39efe62a328a090448 100644
--- a/src/components/Challenge/ChallengeNoFluidModal.tsx
+++ b/src/components/Challenge/ChallengeNoFluidModal.tsx
@@ -1,43 +1,53 @@
import React from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Modal from 'components/CommonKit/Modal/Modal'
-import MuiButton from '@material-ui/core/Button'
import './challengeNoFluidModal.scss'
-import { Portal } from '@material-ui/core'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
interface ChallengeNoFluidModalProps {
+ open: boolean
handleCloseClick: () => void
}
const ChallengeNoFluidModal: React.FC<ChallengeNoFluidModalProps> = ({
+ open,
handleCloseClick,
}: ChallengeNoFluidModalProps) => {
const { t } = useI18n()
return (
- <Portal>
- <div className="nofluid-portal">
- <Modal handleCloseClick={handleCloseClick}>
- <div className="noFluidModal">
- <div className="no-fluid-title">
- {t('challenge.noFluidModal.title')}
- </div>
- <div className="no-fluid-content">
- {t('challenge.noFluidModal.content')}
- </div>
- <MuiButton
- onClick={handleCloseClick}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('COMMON.MODAL_OK')}
- </MuiButton>
- </div>
- </Modal>
+ <Dialog
+ open={open}
+ disableBackdropClick
+ disableEscapeKeyDown
+ onClose={handleCloseClick}
+ aria-label={t('challenge_no_fluid_modal.accessibility.window_title')}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper',
+ }}
+ >
+ <div className="noFluidModal">
+ <div className="no-fluid-title">
+ {t('challenge_no_fluid_modal.title')}
+ </div>
+ <div className="no-fluid-content">
+ {t('challenge_no_fluid_modal.content')}
+ </div>
+ <Button
+ aria-label={t(
+ 'challenge_no_fluid_modal.accessibility.button_validate'
+ )}
+ onClick={handleCloseClick}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('challenge_no_fluid_modal.button_validate')}
+ </Button>
</div>
- </Portal>
+ </Dialog>
)
}
diff --git a/src/components/Challenge/__snapshots__/ChallengeNoFluidModal.spec.tsx.snap b/src/components/Challenge/__snapshots__/ChallengeNoFluidModal.spec.tsx.snap
index 3f1249fd49600798a18f3ba205dd8650758473c3..ac84d5728f99ac3a15dbbeec155877b1a6ee7231 100644
--- a/src/components/Challenge/__snapshots__/ChallengeNoFluidModal.spec.tsx.snap
+++ b/src/components/Challenge/__snapshots__/ChallengeNoFluidModal.spec.tsx.snap
@@ -1,39 +1,44 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ChallengeNoFluidModal component should be rendered correctly opened 1`] = `
-<ForwardRef(Portal)>
+<ForwardRef(WithStyles)
+ aria-label="challenge_no_fluid_modal.accessibility.window_title"
+ classes={
+ Object {
+ "paper": "modal-paper",
+ "root": "modal-root",
+ }
+ }
+ disableBackdropClick={true}
+ disableEscapeKeyDown={true}
+ onClose={[MockFunction]}
+ open={true}
+>
<div
- className="nofluid-portal"
+ className="noFluidModal"
>
- <Modal
- handleCloseClick={[MockFunction]}
+ <div
+ className="no-fluid-title"
>
- <div
- className="noFluidModal"
- >
- <div
- className="no-fluid-title"
- >
- challenge.noFluidModal.title
- </div>
- <div
- className="no-fluid-content"
- >
- challenge.noFluidModal.content
- </div>
- <ForwardRef(WithStyles)
- classes={
- Object {
- "label": "text-16-normal",
- "root": "btn-secondary-negative",
- }
- }
- onClick={[MockFunction]}
- >
- COMMON.MODAL_OK
- </ForwardRef(WithStyles)>
- </div>
- </Modal>
+ challenge_no_fluid_modal.title
+ </div>
+ <div
+ className="no-fluid-content"
+ >
+ challenge_no_fluid_modal.content
+ </div>
+ <ForwardRef(WithStyles)
+ aria-label="challenge_no_fluid_modal.accessibility.button_validate"
+ classes={
+ Object {
+ "label": "text-16-normal",
+ "root": "btn-secondary-negative",
+ }
+ }
+ onClick={[MockFunction]}
+ >
+ challenge_no_fluid_modal.button_validate
+ </ForwardRef(WithStyles)>
</div>
-</ForwardRef(Portal)>
+</ForwardRef(WithStyles)>
`;
diff --git a/src/components/CommonKit/Modal/Modal.scss b/src/components/CommonKit/Modal/Modal.scss
deleted file mode 100644
index d39576e95f9934c8d5507e847eaede11294cc45a..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/Modal/Modal.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-@import 'src/styles/base/color';
-@import 'src/styles/base/breakpoint';
-
-.modal-overlay {
- display: none;
- position: fixed;
- z-index: 1000;
- left: 0;
- top: 0;
- width: 100vw;
- height: 100vh;
- overflow: hidden;
- justify-content: center;
- align-items: center;
- background-color: rgba(27, 28, 34, 0.85);
- &.modal-opened {
- display: flex;
- }
- .modal-box {
- background: $grey-linear-gradient-background;
- position: fixed;
- width: 36rem;
- max-width: 100%;
- max-height: 90vh;
- padding: 1rem 0 0 0;
- box-sizing: border-box;
- box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
- border-radius: 4px;
- margin-left: 13.75rem;
- @media #{$tablet} {
- width: 35rem;
- margin-left: 0;
- }
- @media #{$large-phone} {
- width: 85%;
- max-width: 35rem;
- margin-left: 0;
- }
- &.modal-box-bordered {
- border: 1px solid $blue-40;
- }
- &.yellow-border {
- border: 1px solid $gold-40;
- }
- .modal-close-button {
- position: absolute;
- top: 0.5rem;
- right: 0.5rem;
- padding: 5px 5px;
- z-index: 10;
- }
- .modal-content {
- max-height: 85vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- color: $white;
- }
- .button-ok {
- width: 90%;
- margin-bottom: 2rem;
- }
- }
-}
diff --git a/src/components/CommonKit/Modal/Modal.spec.tsx b/src/components/CommonKit/Modal/Modal.spec.tsx
deleted file mode 100644
index c6735a825c251309e125ca929b571ea903e16a30..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/Modal/Modal.spec.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react'
-import { mount } from 'enzyme'
-import Modal from './Modal'
-
-describe('Modal component test', () => {
- const mockHandleCloseClick = jest.fn()
-
- const mockProps = {
- open: true,
- handleCloseClick: mockHandleCloseClick(),
- }
-
- it('should render correctly the open Modal', () => {
- const wrapper = mount(
- <Modal open={true} handleCloseClick={mockProps.handleCloseClick}>
- <></>
- </Modal>
- )
-
- expect(wrapper.getElement()).toMatchSnapshot()
- })
-
- it('should render correctly the closed Modal', () => {
- const wrapper = mount(
- <Modal open={false} handleCloseClick={mockProps.handleCloseClick}>
- <></>
- </Modal>
- )
-
- expect(wrapper.getElement()).toMatchSnapshot()
- })
-
- it('should render correctly Modal without border', () => {
- const wrapper = mount(
- <Modal
- open={true}
- handleCloseClick={mockProps.handleCloseClick}
- border={false}
- >
- <></>
- </Modal>
- )
-
- expect(wrapper.getElement()).toMatchSnapshot()
- })
-
- it('should render correctly the yellow border open Modal', () => {
- const wrapper = mount(
- <Modal
- open={true}
- handleCloseClick={mockProps.handleCloseClick}
- yellowBorder={true}
- >
- <></>
- </Modal>
- )
-
- expect(wrapper.getElement()).toMatchSnapshot()
- })
-})
diff --git a/src/components/CommonKit/Modal/Modal.tsx b/src/components/CommonKit/Modal/Modal.tsx
deleted file mode 100644
index 88e366ea0611331b159fd7784403f33120cb539b..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/Modal/Modal.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, { useEffect, ReactNode } from 'react'
-import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
-import CloseIcon from 'assets/icons/ico/close.svg'
-import './Modal.scss'
-interface ModalProps {
- border?: boolean
- hideClosure?: boolean
- handleCloseClick: () => void
- children: ReactNode
- yellowBorder?: boolean
-}
-
-const Modal: React.FC<ModalProps> = ({
- border,
- hideClosure,
- handleCloseClick,
- children,
- yellowBorder,
-}: ModalProps) => {
- const yellow = yellowBorder ? 'yellow-border' : ''
- const displayCloseButton = hideClosure ? false : true
-
- const disableBackgroundScroll = (disable: boolean) => {
- const backgroundDesktop = document.querySelector(
- '.app-content'
- ) as HTMLElement
- const backgroundMobile = document.querySelector('html') as HTMLElement
- const bgStyleDesktop = backgroundDesktop && backgroundDesktop.style
- const bgStyleMobile = backgroundMobile && backgroundMobile.style
- if (bgStyleDesktop && bgStyleMobile) {
- if (disable) {
- bgStyleDesktop.overflowY = 'hidden'
- bgStyleMobile.overflowY = 'hidden'
- } else {
- bgStyleDesktop.overflowY = 'unset'
- bgStyleMobile.overflowY = 'unset'
- }
- }
- }
-
- const closeClick = () => {
- disableBackgroundScroll(false)
- handleCloseClick()
- }
-
- useEffect(() => {
- disableBackgroundScroll(true)
- return () => {
- disableBackgroundScroll(false)
- }
- }, [])
-
- return (
- <div className={`modal-overlay modal-opened`}>
- <div
- className={`modal-box ${border ? 'modal-box-bordered' : ''} ${yellow}`}
- >
- {displayCloseButton && (
- <StyledIconButton
- className="modal-close-button"
- icon={CloseIcon}
- onClick={closeClick}
- />
- )}
- <div className="modal-content">{children}</div>
- </div>
- </div>
- )
-}
-
-export default Modal
diff --git a/src/components/CommonKit/Modal/__snapshots__/Modal.spec.tsx.snap b/src/components/CommonKit/Modal/__snapshots__/Modal.spec.tsx.snap
deleted file mode 100644
index 4ee6ebb213dd1dc45865e39b4733e3a3da1348e5..0000000000000000000000000000000000000000
--- a/src/components/CommonKit/Modal/__snapshots__/Modal.spec.tsx.snap
+++ /dev/null
@@ -1,35 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Modal component test should render correctly Modal without border 1`] = `
-<Modal
- border={false}
- open={true}
->
- <React.Fragment />
-</Modal>
-`;
-
-exports[`Modal component test should render correctly the closed Modal 1`] = `
-<Modal
- open={false}
->
- <React.Fragment />
-</Modal>
-`;
-
-exports[`Modal component test should render correctly the open Modal 1`] = `
-<Modal
- open={true}
->
- <React.Fragment />
-</Modal>
-`;
-
-exports[`Modal component test should render correctly the yellow border open Modal 1`] = `
-<Modal
- open={true}
- yellowBorder={true}
->
- <React.Fragment />
-</Modal>
-`;
diff --git a/src/components/Connection/ConnectionFormLogin.tsx b/src/components/Connection/ConnectionFormLogin.tsx
index ca445fed04cc79fecef4ac0d9246166122629e26..5f1116848ae4b08a12a78a0934980c687b7f218f 100644
--- a/src/components/Connection/ConnectionFormLogin.tsx
+++ b/src/components/Connection/ConnectionFormLogin.tsx
@@ -82,7 +82,7 @@ const ConnectionFormLogin: React.FC<ConnectionFormLoginProps> = ({
trigger: _trigger,
} = await connectionService.connectNewUser(konnectorSlug, login, password)
if (!_trigger) {
- setError(t('KONNECTORCONFIG.ERROR_ACCOUNT_CREATION'))
+ setError(t('konnector_form.error_account_creation'))
return null
}
const updatedConnection: FluidConnection = {
@@ -124,7 +124,7 @@ const ConnectionFormLogin: React.FC<ConnectionFormLoginProps> = ({
setError('')
setLoading(true)
if (!login || !password) {
- setError(t('KONNECTORCONFIG.ERROR_NO_LOGIN_PASSWORD'))
+ setError(t('konnector_form.error_no_login_password'))
setLoading(false)
return null
}
@@ -145,7 +145,7 @@ const ConnectionFormLogin: React.FC<ConnectionFormLoginProps> = ({
if (authData.login) {
setLogin(authData.login)
}
- setError(t('KONNECTORCONFIG.ERROR_LOGIN_FAILED'))
+ setError(t('konnector_form.error_login_failed'))
}
}, [account, t])
@@ -186,7 +186,7 @@ const ConnectionFormLogin: React.FC<ConnectionFormLoginProps> = ({
: 'form-control form-input --error'
}
aria-describedby="PasswordHelp"
- placeholder="Mot de passe"
+ placeholder={t('auth.password_label')}
name="password"
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
changePassword(e.target.value)
@@ -196,6 +196,7 @@ const ConnectionFormLogin: React.FC<ConnectionFormLoginProps> = ({
<span>
<StyledIconButton
icon={TrailingIcon}
+ aria-label={t('auth.accessibility.button_reveal_password')}
className="form-trailing-icon"
size={22}
onClick={() => revealPassword('idFieldPassword' + fluidName)}
@@ -207,6 +208,7 @@ const ConnectionFormLogin: React.FC<ConnectionFormLoginProps> = ({
<div className="kloginauthform-button">
<MuiButton
type="submit"
+ aria-label={t('auth.accessibility.button_connect')}
disabled={loading}
classes={{
root: 'btn-highlight',
@@ -235,6 +237,7 @@ const ConnectionFormLogin: React.FC<ConnectionFormLoginProps> = ({
<MuiButton
disabled={loading}
+ aria-label={t('auth.accessibility.button_create_account')}
onClick={() => window.open(siteLink, '_blank')}
classes={{
root: 'btn-secondary-positive',
diff --git a/src/components/Connection/ConnectionFormOAuth.tsx b/src/components/Connection/ConnectionFormOAuth.tsx
index 98ae1bb8e543cd046bebfa1681c37faa20d65adb..74b190355e772e827d3a8008a9cc2e93d72951b0 100644
--- a/src/components/Connection/ConnectionFormOAuth.tsx
+++ b/src/components/Connection/ConnectionFormOAuth.tsx
@@ -1,104 +1,105 @@
-import React, { useCallback } from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useClient } from 'cozy-client'
-import { useDispatch } from 'react-redux'
-import './connectionFormOAuth.scss'
-
-import { Konnector, Trigger, FluidStatus, FluidConnection } from 'models'
-import OAuthForm from 'components/Connection/OAuthForm'
-import MuiButton from '@material-ui/core/Button'
-import AccountService from 'services/account.service'
-import TriggerService from 'services/triggers.service'
-import { updatedFluidConnection } from 'store/global/global.actions'
-
-interface ConnectionFormOAuthProps {
- fluidStatus: FluidStatus
- onSuccess: Function
-}
-
-const ConnectionFormOAuth: React.FC<ConnectionFormOAuthProps> = ({
- fluidStatus,
- onSuccess,
-}: ConnectionFormOAuthProps) => {
- const { t } = useI18n()
- const client = useClient()
- const dispatch = useDispatch()
-
- const konnectorSlug: string = fluidStatus.connection.konnectorConfig.slug
- const siteLink: string = fluidStatus.connection.konnectorConfig.siteLink
- const konnector: Konnector | null = fluidStatus.connection.konnector
-
- const handleSuccess = useCallback(
- async (accountId: string) => {
- if (konnector) {
- const accountService = new AccountService(client)
- const account = await accountService.getAccount(accountId)
- if (!account) {
- const updatedConnection: FluidConnection = {
- ...fluidStatus.connection,
- account: null,
- trigger: null,
- }
- dispatch(
- updatedFluidConnection(fluidStatus.fluidType, updatedConnection)
- )
- } else {
- const triggersServices = new TriggerService(client)
- const trigger: Trigger = await triggersServices.createTrigger(
- account,
- konnector
- )
- const updatedConnection: FluidConnection = {
- ...fluidStatus.connection,
- account: account,
- trigger: trigger,
- }
- dispatch(
- updatedFluidConnection(fluidStatus.fluidType, updatedConnection)
- )
- onSuccess()
- }
- }
- },
- [
- client,
- konnector,
- dispatch,
- fluidStatus.fluidType,
- fluidStatus.connection,
- onSuccess,
- ]
- )
-
- return (
- <div className="koauthform">
- <p className="info-provider text-16-normal">
- {t('auth.' + `${konnectorSlug}` + '.connect.info')}
- </p>
- <div className="koauthform-button">
- <OAuthForm konnector={konnector} onSuccess={handleSuccess} />
- </div>
- <div className="koauthform-text text-16-bold">
- <div className="text-16-bold">
- {t('auth.' + konnectorSlug + '.no_account.title')}
- </div>
- <div className="text-16-normal">
- {t('auth.' + konnectorSlug + '.no_account.text')}
- </div>
- </div>
- <div className="koauthform-button">
- <MuiButton
- onClick={() => window.open(siteLink, '_blank')}
- classes={{
- root: 'btn-secondary-positive',
- label: 'text-16-normal',
- }}
- >
- {t('auth.' + konnectorSlug + '.create_account')}
- </MuiButton>
- </div>
- </div>
- )
-}
-
-export default ConnectionFormOAuth
+import React, { useCallback } from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useClient } from 'cozy-client'
+import { useDispatch } from 'react-redux'
+import './connectionFormOAuth.scss'
+
+import { Konnector, Trigger, FluidStatus, FluidConnection } from 'models'
+import OAuthForm from 'components/Connection/OAuthForm'
+import MuiButton from '@material-ui/core/Button'
+import AccountService from 'services/account.service'
+import TriggerService from 'services/triggers.service'
+import { updatedFluidConnection } from 'store/global/global.actions'
+
+interface ConnectionFormOAuthProps {
+ fluidStatus: FluidStatus
+ onSuccess: Function
+}
+
+const ConnectionFormOAuth: React.FC<ConnectionFormOAuthProps> = ({
+ fluidStatus,
+ onSuccess,
+}: ConnectionFormOAuthProps) => {
+ const { t } = useI18n()
+ const client = useClient()
+ const dispatch = useDispatch()
+
+ const konnectorSlug: string = fluidStatus.connection.konnectorConfig.slug
+ const siteLink: string = fluidStatus.connection.konnectorConfig.siteLink
+ const konnector: Konnector | null = fluidStatus.connection.konnector
+
+ const handleSuccess = useCallback(
+ async (accountId: string) => {
+ if (konnector) {
+ const accountService = new AccountService(client)
+ const account = await accountService.getAccount(accountId)
+ if (!account) {
+ const updatedConnection: FluidConnection = {
+ ...fluidStatus.connection,
+ account: null,
+ trigger: null,
+ }
+ dispatch(
+ updatedFluidConnection(fluidStatus.fluidType, updatedConnection)
+ )
+ } else {
+ const triggersServices = new TriggerService(client)
+ const trigger: Trigger = await triggersServices.createTrigger(
+ account,
+ konnector
+ )
+ const updatedConnection: FluidConnection = {
+ ...fluidStatus.connection,
+ account: account,
+ trigger: trigger,
+ }
+ dispatch(
+ updatedFluidConnection(fluidStatus.fluidType, updatedConnection)
+ )
+ onSuccess()
+ }
+ }
+ },
+ [
+ client,
+ konnector,
+ dispatch,
+ fluidStatus.fluidType,
+ fluidStatus.connection,
+ onSuccess,
+ ]
+ )
+
+ return (
+ <div className="koauthform">
+ <p className="info-provider text-16-normal">
+ {t('auth.' + `${konnectorSlug}` + '.connect.info')}
+ </p>
+ <div className="koauthform-button">
+ <OAuthForm konnector={konnector} onSuccess={handleSuccess} />
+ </div>
+ <div className="koauthform-text text-16-bold">
+ <div className="text-16-bold">
+ {t('auth.' + konnectorSlug + '.no_account.title')}
+ </div>
+ <div className="text-16-normal">
+ {t('auth.' + konnectorSlug + '.no_account.text')}
+ </div>
+ </div>
+ <div className="koauthform-button">
+ <MuiButton
+ aria-label={t('auth.accessibility.button_create_account')}
+ onClick={() => window.open(siteLink, '_blank')}
+ classes={{
+ root: 'btn-secondary-positive',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('auth.' + konnectorSlug + '.create_account')}
+ </MuiButton>
+ </div>
+ </div>
+ )
+}
+
+export default ConnectionFormOAuth
diff --git a/src/components/Connection/ConnectionNotFound.tsx b/src/components/Connection/ConnectionNotFound.tsx
index 1019d1dad46dbf8cbd96a20e2eb949ca7753f1c8..9eee50aa1a1310968066eaf09dcbc51884ff169d 100644
--- a/src/components/Connection/ConnectionNotFound.tsx
+++ b/src/components/Connection/ConnectionNotFound.tsx
@@ -1,42 +1,40 @@
-import React from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import MuiButton from '@material-ui/core/Button'
-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('KONNECTORCONFIG.NOT_INSTALLED')}
- </div>
- <div className="knotfound-button">
- <MuiButton
- onClick={openKonnectorURL}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- >
- {t('KONNECTORCONFIG.BTN_INSTALL')}
- </MuiButton>
- </div>
- </div>
- )
-}
-
-export default ConnectionNotFound
+import React from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Button from '@material-ui/core/Button'
+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
diff --git a/src/components/Connection/ConnectionResult.tsx b/src/components/Connection/ConnectionResult.tsx
index c24126040a5c511f2c051edf99fe797c5af5eaba..fdab666cb4de2ab2a9e56b01df2f4acd80709ef3 100644
--- a/src/components/Connection/ConnectionResult.tsx
+++ b/src/components/Connection/ConnectionResult.tsx
@@ -1,150 +1,152 @@
-import React, { useState, useEffect } from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useClient } from 'cozy-client'
-import { useDispatch } from 'react-redux'
-import { updatedFluidConnection } from 'store/global/global.actions'
-
-import { Account, FluidConnection, FluidStatus } from 'models'
-import AccountService from 'services/account.service'
-import { getKonnectorUpdateError } from 'utils/utils'
-
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import warningWhite from 'assets/icons/ico/warning-white.svg'
-import MuiButton from '@material-ui/core/Button'
-import StyledBlackSpinner from 'components/CommonKit/Spinner/StyledBlackSpinner'
-
-import './connectionResult.scss'
-
-interface ConnectionResultProps {
- fluidStatus: FluidStatus
- handleAccountDeletion: Function
-}
-
-const ConnectionResult: React.FC<ConnectionResultProps> = ({
- fluidStatus,
- handleAccountDeletion,
-}: ConnectionResultProps) => {
- const { t } = useI18n()
- const client = useClient()
- const dispatch = useDispatch()
- const account: Account | null = fluidStatus.connection.account
-
- const [updating, setUpdating] = useState<boolean>(false)
- const [lastExecutionDate, setLastExecutionDate] = useState<string>('-')
- const [konnectorError, setKonnectorError] = useState<string>('')
- const [status, setStatus] = useState<string>('')
-
- const updateKonnector = async () => {
- setUpdating(true)
- setStatus('')
- setLastExecutionDate('-')
- setKonnectorError('')
- const updatedConnection: FluidConnection = {
- ...fluidStatus.connection,
- shouldLaunchKonnector: true,
- isUpdating: true,
- }
- dispatch(updatedFluidConnection(fluidStatus.fluidType, updatedConnection))
- setUpdating(false)
- }
-
- const deleteAccount = async () => {
- setUpdating(true)
- try {
- if (account) {
- const accountService = new AccountService(client)
- await accountService.deleteAccount(account)
- await handleAccountDeletion()
- }
- } catch (error) {
- setUpdating(false)
- }
- }
-
- useEffect(() => {
- if (
- fluidStatus.connection.triggerState &&
- fluidStatus.connection.triggerState.last_success
- ) {
- setLastExecutionDate(
- new Date(
- fluidStatus.connection.triggerState.last_success
- ).toLocaleString()
- )
- } else {
- setLastExecutionDate('-')
- }
- if (
- fluidStatus.connection.triggerState &&
- fluidStatus.connection.triggerState.status === 'errored' &&
- fluidStatus.connection.triggerState.last_error
- ) {
- setKonnectorError(
- getKonnectorUpdateError(fluidStatus.connection.triggerState.last_error)
- )
- }
- }, [fluidStatus.connection.triggerState])
-
- return (
- <div className="accordion-update-result">
- <div
- className={
- status === 'errored' ? 'accordion-update-errored' : 'accordion-update'
- }
- >
- {status === 'errored' && (
- <div className="accordion-caption-errored warning-white text-16-normal">
- <StyledIcon
- icon={warningWhite}
- size={36}
- className="warning-icon"
- />
- <div className="text-16-normal">
- {t(`KONNECTORCONFIG.${konnectorError}`)}
- <div className="accordion-caption">
- {t('KONNECTORCONFIG.LABEL_UPDATEDAT')}
- </div>
- <div className="text-16-bold">{lastExecutionDate}</div>
- </div>
- </div>
- )}
- {status !== 'errored' && (
- <div>
- <div className="accordion-caption text-16-normal">
- {t('KONNECTORCONFIG.LABEL_UPDATEDAT')}
- </div>
- <div className="text-16-bold">{lastExecutionDate}</div>
- </div>
- )}
- </div>
- <div className="inline-buttons">
- <MuiButton
- onClick={deleteAccount}
- disabled={updating}
- classes={{
- root: 'btn-secondary-positive',
- label: 'text-16-normal',
- }}
- >
- {t('KONNECTORCONFIG.BTN_DELETE')}
- </MuiButton>
- <MuiButton
- onClick={updateKonnector}
- disabled={updating}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- >
- {updating ? (
- <StyledBlackSpinner size="2em" />
- ) : (
- <div>{t('KONNECTORCONFIG.BTN_UPDATE')}</div>
- )}
- </MuiButton>
- </div>
- </div>
- )
-}
-
-export default ConnectionResult
+import React, { useState, useEffect } from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useClient } from 'cozy-client'
+import { useDispatch } from 'react-redux'
+import { updatedFluidConnection } from 'store/global/global.actions'
+
+import { Account, FluidConnection, FluidStatus } from 'models'
+import AccountService from 'services/account.service'
+import { getKonnectorUpdateError } from 'utils/utils'
+
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import warningWhite from 'assets/icons/ico/warning-white.svg'
+import Button from '@material-ui/core/Button'
+import StyledBlackSpinner from 'components/CommonKit/Spinner/StyledBlackSpinner'
+
+import './connectionResult.scss'
+
+interface ConnectionResultProps {
+ fluidStatus: FluidStatus
+ handleAccountDeletion: Function
+}
+
+const ConnectionResult: React.FC<ConnectionResultProps> = ({
+ fluidStatus,
+ handleAccountDeletion,
+}: ConnectionResultProps) => {
+ const { t } = useI18n()
+ const client = useClient()
+ const dispatch = useDispatch()
+ const account: Account | null = fluidStatus.connection.account
+
+ const [updating, setUpdating] = useState<boolean>(false)
+ const [lastExecutionDate, setLastExecutionDate] = useState<string>('-')
+ const [konnectorError, setKonnectorError] = useState<string>('')
+ const [status, setStatus] = useState<string>('')
+
+ const updateKonnector = async () => {
+ setUpdating(true)
+ setStatus('')
+ setLastExecutionDate('-')
+ setKonnectorError('')
+ const updatedConnection: FluidConnection = {
+ ...fluidStatus.connection,
+ shouldLaunchKonnector: true,
+ isUpdating: true,
+ }
+ dispatch(updatedFluidConnection(fluidStatus.fluidType, updatedConnection))
+ setUpdating(false)
+ }
+
+ const deleteAccount = async () => {
+ setUpdating(true)
+ try {
+ if (account) {
+ const accountService = new AccountService(client)
+ await accountService.deleteAccount(account)
+ await handleAccountDeletion()
+ }
+ } catch (error) {
+ setUpdating(false)
+ }
+ }
+
+ useEffect(() => {
+ if (
+ fluidStatus.connection.triggerState &&
+ fluidStatus.connection.triggerState.last_success
+ ) {
+ setLastExecutionDate(
+ new Date(
+ fluidStatus.connection.triggerState.last_success
+ ).toLocaleString()
+ )
+ } else {
+ setLastExecutionDate('-')
+ }
+ if (
+ fluidStatus.connection.triggerState &&
+ fluidStatus.connection.triggerState.status === 'errored' &&
+ fluidStatus.connection.triggerState.last_error
+ ) {
+ setKonnectorError(
+ getKonnectorUpdateError(fluidStatus.connection.triggerState.last_error)
+ )
+ }
+ }, [fluidStatus.connection.triggerState])
+
+ return (
+ <div className="accordion-update-result">
+ <div
+ className={
+ status === 'errored' ? 'accordion-update-errored' : 'accordion-update'
+ }
+ >
+ {status === 'errored' && (
+ <div className="accordion-caption-errored warning-white text-16-normal">
+ <StyledIcon
+ icon={warningWhite}
+ size={36}
+ className="warning-icon"
+ />
+ <div className="text-16-normal">
+ {t(`konnector_form.${konnectorError}`)}
+ <div className="accordion-caption">
+ {t('konnector_form.label_updated_at')}
+ </div>
+ <div className="text-16-bold">{lastExecutionDate}</div>
+ </div>
+ </div>
+ )}
+ {status !== 'errored' && (
+ <div>
+ <div className="accordion-caption text-16-normal">
+ {t('konnector_form.label_updated_at')}
+ </div>
+ <div className="text-16-bold">{lastExecutionDate}</div>
+ </div>
+ )}
+ </div>
+ <div className="inline-buttons">
+ <Button
+ aria-label={t('konnector_form.accessibility.button_delete')}
+ onClick={deleteAccount}
+ disabled={updating}
+ classes={{
+ root: 'btn-secondary-positive',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('konnector_form.button_delete')}
+ </Button>
+ <Button
+ aria-label={t('konnector_form.accessibility.button_update')}
+ onClick={updateKonnector}
+ disabled={updating}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-16-bold',
+ }}
+ >
+ {updating ? (
+ <StyledBlackSpinner size="2em" />
+ ) : (
+ <div>{t('konnector_form.button_update')}</div>
+ )}
+ </Button>
+ </div>
+ </div>
+ )
+}
+
+export default ConnectionResult
diff --git a/src/components/Connection/ModalGRDF.tsx b/src/components/Connection/ModalGRDF.tsx
index 4e41235adc6bdee205eea02d07c9e6e6e6007a3c..2649b7544664cf39a1aebbe54445e7379f1fa4df 100644
--- a/src/components/Connection/ModalGRDF.tsx
+++ b/src/components/Connection/ModalGRDF.tsx
@@ -1,11 +1,12 @@
import React from 'react'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-
-import Modal from 'components/CommonKit/Modal/Modal'
-import MuiButton from '@material-ui/core/Button'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from '@material-ui/core/IconButton'
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
import switchMobile from 'assets/icons/ico/switchGRDFMobile.svg'
import switchDesktop from 'assets/icons/ico/switchGRDFDesktop.svg'
-
+import CloseIcon from 'assets/icons/ico/close.svg'
import { ScreenType } from 'enum/screen.enum'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import StyledBlackSpinner from 'components/CommonKit/Spinner/StyledBlackSpinner'
@@ -14,12 +15,14 @@ import { AppStore } from 'store'
import './modalGRDF.scss'
interface ModalGRDFProps {
+ open: boolean
isWaiting?: boolean
handleSubmit: () => void
handleCloseClick: () => void
}
const ModalGRDF: React.FC<ModalGRDFProps> = ({
+ open,
handleSubmit,
handleCloseClick,
isWaiting,
@@ -28,7 +31,26 @@ const ModalGRDF: React.FC<ModalGRDFProps> = ({
const { screenType } = useSelector((state: AppStore) => state.ecolyo.global)
return (
- <Modal handleCloseClick={handleCloseClick}>
+ <Dialog
+ open={open}
+ disableBackdropClick
+ disableEscapeKeyDown
+ onClose={handleCloseClick}
+ aria-label={t('auth.grdfgrandlyon.authModal.accessibility.window_title')}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper',
+ }}
+ >
+ <IconButton
+ aria-label={t(
+ 'auth.grdfgrandlyon.authModal.accessibility.button_close'
+ )}
+ className="modal-paper-close-button"
+ onClick={handleCloseClick}
+ >
+ <Icon icon={CloseIcon} size={16} />
+ </IconButton>
{screenType === ScreenType.MOBILE ? (
<StyledIcon icon={switchMobile} size={200} />
) : (
@@ -53,7 +75,10 @@ const ModalGRDF: React.FC<ModalGRDFProps> = ({
</span>
{t('auth.grdfgrandlyon.authModal.endText2')}
</p>
- <MuiButton
+ <Button
+ aria-label={t(
+ 'auth.grdfgrandlyon.authModal.accessibility.button_validate'
+ )}
onClick={handleSubmit}
disabled={isWaiting}
classes={{
@@ -63,9 +88,9 @@ const ModalGRDF: React.FC<ModalGRDFProps> = ({
>
{t('auth.grdfgrandlyon.authModal.buttonText')}
{isWaiting && <StyledBlackSpinner size={30} />}
- </MuiButton>
+ </Button>
</div>
- </Modal>
+ </Dialog>
)
}
diff --git a/src/components/Connection/OAuthForm.tsx b/src/components/Connection/OAuthForm.tsx
index ede56f234af35c056ccd6d5553a1c08e21f77649..fbaffc1bb1b4dfdbfd47e54175b66c7244415ec8 100644
--- a/src/components/Connection/OAuthForm.tsx
+++ b/src/components/Connection/OAuthForm.tsx
@@ -71,6 +71,7 @@ const OAuthForm: React.FC<OAuthFormProps> = ({
return !konnector ? null : (
<>
<MuiButton
+ aria-label={t('auth.accessibility.button_connect')}
onClick={
konnector.slug === fluidconfig[FluidType.GAS].konnectorConfig.slug
? toggleGRDFModal
@@ -106,13 +107,12 @@ const OAuthForm: React.FC<OAuthFormProps> = ({
t={t}
/>
)}
- {openGRDFModal && (
- <ModalGRDF
- handleSubmit={handleSubmit}
- handleCloseClick={toggleGRDFModal}
- isWaiting={isWaiting}
- />
- )}
+ <ModalGRDF
+ open={openGRDFModal}
+ handleSubmit={handleSubmit}
+ handleCloseClick={toggleGRDFModal}
+ isWaiting={isWaiting}
+ />
</>
)
}
diff --git a/src/components/Connection/__snapshots__/ConnectionNotFound.spec.tsx.snap b/src/components/Connection/__snapshots__/ConnectionNotFound.spec.tsx.snap
index 0a3712fecb34dcc00cf316f08f4e9bfc172b549d..8821ad55083244187ac6922d74806523884bb09b 100644
--- a/src/components/Connection/__snapshots__/ConnectionNotFound.spec.tsx.snap
+++ b/src/components/Connection/__snapshots__/ConnectionNotFound.spec.tsx.snap
@@ -8,12 +8,13 @@ exports[`ConnectionNotFound component test should correctly render connection no
className="knotfound-text"
>
- KONNECTORCONFIG.NOT_INSTALLED
+ konnector_form.not_installed
</div>
<div
className="knotfound-button"
>
<ForwardRef(WithStyles)
+ aria-label="konnector_form.accessibility.button_install"
classes={
Object {
"label": "text-16-bold",
@@ -22,7 +23,7 @@ exports[`ConnectionNotFound component test should correctly render connection no
}
onClick={[Function]}
>
- KONNECTORCONFIG.BTN_INSTALL
+ konnector_form.button_install
</ForwardRef(WithStyles)>
</div>
</div>
diff --git a/src/components/Connection/modalGRDF.scss b/src/components/Connection/modalGRDF.scss
index 5972a0c39952c525fcd835f98f5ec08094c08ba0..703f45081562e58cc4daa06c34820f269444e889 100644
--- a/src/components/Connection/modalGRDF.scss
+++ b/src/components/Connection/modalGRDF.scss
@@ -1,20 +1,20 @@
-@import 'src/styles/base/color';
-
-.grdfAuthModal {
- padding: 0 1.5rem;
- p {
- color: white;
- }
- .yellowText {
- color: $gold-shadow;
- }
- button.btn-highlight {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-evenly;
- margin: 1.5rem auto;
- padding: 1rem 2rem;
- transition: all 300ms ease;
- }
-}
+@import 'src/styles/base/color';
+
+.grdfAuthModal {
+ padding: 0 0.5rem;
+ p {
+ color: white;
+ }
+ .yellowText {
+ color: $gold-shadow;
+ }
+ button.btn-highlight {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-evenly;
+ margin: 1.5rem 0 1rem;
+ padding: 1rem 2rem;
+ transition: all 300ms ease;
+ }
+}
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
index 14e1b15e1cc46d956c0693c6ae0ebd42a481dad8..74b734a2a61f1669d14c678da88ec2c397afd35d 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
@@ -1,205 +1,205 @@
-import React from 'react'
-import './dataloadConsumptionVisualizer.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useSelector } from 'react-redux'
-import { AppStore } from 'store'
-import { NavLink } from 'react-router-dom'
-import { DateTime } from 'luxon'
-import { formatNumberValues } from 'utils/utils'
-
-import { Dataload } from 'models'
-import { FluidType } from 'enum/fluid.enum'
-import ConverterService from 'services/converter.service'
-import DateChartService from 'services/dateChart.service'
-import { getPicto } from 'utils/picto'
-
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-
-interface DataloadConsumptionVisualizerProps {
- fluidType: FluidType
- dataload: Dataload
- compareDataload: Dataload | null
- showCompare: boolean
- lastDataDate: DateTime | null
-}
-const DataloadConsumptionVisualizer = ({
- fluidType,
- dataload,
- compareDataload,
- showCompare,
- lastDataDate,
-}: DataloadConsumptionVisualizerProps) => {
- const { t } = useI18n()
- const { loading } = useSelector((state: AppStore) => state.ecolyo.chart)
- const converterService = new ConverterService()
- const fluidStyle =
- fluidType === FluidType.MULTIFLUID ? 'MULTIFLUID' : FluidType[fluidType]
- const multiFluid = fluidType === FluidType.MULTIFLUID
- const dateChartService = new DateChartService()
-
- return (
- <div className="dataloadvisualizer-root">
- {!loading && dataload && dataload.value > -1 ? (
- <div className="dataloadvisualizer-content">
- {showCompare && !multiFluid && compareDataload && (
- <>
- {compareDataload.value === -1 ? (
- <div className="dataloadvisualizer-section dataloadvisualizer-section-left-novalue">
- <div
- className={`dataloadvisualizer-novalue ${fluidStyle.toLowerCase()}-compare text-20-normal`}
- >
- {t('COMMON.NODATA')}
- </div>
- </div>
- ) : (
- <div className="dataloadvisualizer-section dataloadvisualizer-section-left">
- <div
- className={`dataloadvisualizer-value ${fluidStyle.toLowerCase()}-compare text-36-bold`}
- >
- {formatNumberValues(compareDataload.value)}
- <span className="text-18-normal">{`${t(
- 'FLUID.' + fluidStyle + '.UNIT'
- )}`}</span>
- </div>
- <div
- className={`dataloadvisualizer-euro ${fluidStyle.toLowerCase()}-compare text-16-normal`}
- >
- {`${formatNumberValues(
- converterService.LoadToEuro(
- compareDataload.value,
- fluidType
- )
- )} €`}
- </div>
- </div>
- )}
- </>
- )}
- <div
- className={
- showCompare
- ? 'dataloadvisualizer-section dataloadvisualizer-section-right'
- : 'dataloadvisualizer-section'
- }
- >
- <div
- className={`dataloadvisualizer-value ${fluidStyle.toLowerCase()} text-36-bold`}
- >
- {fluidStyle &&
- formatNumberValues(dataload.value, fluidStyle, true) >= 1000 &&
- fluidStyle !== 'MULTIFLUID' ? (
- <>
- {formatNumberValues(dataload.value, fluidStyle)}
- <span className="text-18-normal">
- {`${t('FLUID.' + fluidStyle + '.MEGAUNIT')}`}
- </span>
- </>
- ) : (
- <>
- {formatNumberValues(dataload.value)}
- <span className="text-18-normal">
- {`${t('FLUID.' + fluidStyle + '.UNIT')}`}
- </span>
- </>
- )}
- </div>
- {!multiFluid ? (
- <div
- className={`dataloadvisualizer-euro ${fluidStyle.toLowerCase()} text-16-normal`}
- >
- {`${formatNumberValues(
- converterService.LoadToEuro(dataload.value, fluidType)
- )} €`}
- </div>
- ) : (
- <div className="dataloadvisualizer-euro text-16-normal">
- {dataload.valueDetail ? (
- dataload.valueDetail.map((load, index) => {
- return (
- <NavLink
- key={index}
- to={`/consumption/${t(
- 'FLUID.' + FluidType[index] + '.NAME'
- ).toLowerCase()}`}
- className="dataloadvisualizer-euro-link"
- >
- <div
- className={
- load === -1 &&
- !dateChartService.isDataToCome(dataload, index)
- ? 'dataloadvisualizer-euro-fluid error'
- : `dataloadvisualizer-euro-fluid ${FluidType[
- index
- ].toLowerCase()}`
- }
- >
- <StyledIcon
- className="dataloadvisualizer-euro-fluid-icon"
- icon={getPicto(index)}
- size={22}
- />
- <div>
- {!dateChartService.isDataToCome(dataload, index) &&
- load !== -1
- ? `${formatNumberValues(load)} €`
- : dateChartService.isDataToCome(dataload, index)
- ? t('COMMON.DATATOCOME')
- : '---- €'}
- </div>
- </div>
- </NavLink>
- )
- })
- ) : (
- <NavLink
- to={`/consumption/${t(
- 'FLUID.' + FluidType[fluidType] + '.NAME'
- ).toLowerCase()}`}
- className="dataloadvisualizer-euro-link"
- >
- <div
- className={`dataloadvisualizer-euro-fluid ${FluidType[
- fluidType
- ].toLowerCase()}`}
- >
- <StyledIcon
- className="dataloadvisualizer-euro-fluid-icon"
- icon={getPicto(fluidType)}
- size={22}
- />
- <div>{`${formatNumberValues(
- converterService.LoadToEuro(dataload.value, fluidType)
- )} €`}</div>
- </div>
- </NavLink>
- )}
- </div>
- )}
- </div>
- </div>
- ) : (
- <>
- {!dataload ? null : dataload &&
- lastDataDate &&
- dataload.date > lastDataDate ? (
- <div
- className={`dataloadvisualizer-content ${fluidStyle.toLowerCase()} text-22-normal`}
- >
- {`${t('COMMON.LASTDATA')} : ${lastDataDate.toFormat(
- "dd'/'MM'/'yy"
- )}`}
- </div>
- ) : (
- <div
- className={`dataloadvisualizer-content ${fluidStyle.toLowerCase()} text-22-normal`}
- >
- {`${t('COMMON.NODATA')}`}
- </div>
- )}
- </>
- )}
- </div>
- )
-}
-
-export default DataloadConsumptionVisualizer
+import React from 'react'
+import './dataloadConsumptionVisualizer.scss'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useSelector } from 'react-redux'
+import { AppStore } from 'store'
+import { NavLink } from 'react-router-dom'
+import { DateTime } from 'luxon'
+import { formatNumberValues } from 'utils/utils'
+
+import { Dataload } from 'models'
+import { FluidType } from 'enum/fluid.enum'
+import ConverterService from 'services/converter.service'
+import DateChartService from 'services/dateChart.service'
+import { getPicto } from 'utils/picto'
+
+import Icon from 'cozy-ui/transpiled/react/Icon'
+
+interface DataloadConsumptionVisualizerProps {
+ fluidType: FluidType
+ dataload: Dataload
+ compareDataload: Dataload | null
+ showCompare: boolean
+ lastDataDate: DateTime | null
+}
+const DataloadConsumptionVisualizer = ({
+ fluidType,
+ dataload,
+ compareDataload,
+ showCompare,
+ lastDataDate,
+}: DataloadConsumptionVisualizerProps) => {
+ const { t } = useI18n()
+ const { loading } = useSelector((state: AppStore) => state.ecolyo.chart)
+ const converterService = new ConverterService()
+ const fluidStyle =
+ fluidType === FluidType.MULTIFLUID ? 'MULTIFLUID' : FluidType[fluidType]
+ const multiFluid = fluidType === FluidType.MULTIFLUID
+ const dateChartService = new DateChartService()
+
+ return (
+ <div className="dataloadvisualizer-root">
+ {!loading && dataload && dataload.value > -1 ? (
+ <div className="dataloadvisualizer-content">
+ {showCompare && !multiFluid && compareDataload && (
+ <>
+ {compareDataload.value === -1 ? (
+ <div className="dataloadvisualizer-section dataloadvisualizer-section-left-novalue">
+ <div
+ className={`dataloadvisualizer-novalue ${fluidStyle.toLowerCase()}-compare text-20-normal`}
+ >
+ {t('COMMON.NODATA')}
+ </div>
+ </div>
+ ) : (
+ <div className="dataloadvisualizer-section dataloadvisualizer-section-left">
+ <div
+ className={`dataloadvisualizer-value ${fluidStyle.toLowerCase()}-compare text-36-bold`}
+ >
+ {formatNumberValues(compareDataload.value)}
+ <span className="text-18-normal">{`${t(
+ 'FLUID.' + fluidStyle + '.UNIT'
+ )}`}</span>
+ </div>
+ <div
+ className={`dataloadvisualizer-euro ${fluidStyle.toLowerCase()}-compare text-16-normal`}
+ >
+ {`${formatNumberValues(
+ converterService.LoadToEuro(
+ compareDataload.value,
+ fluidType
+ )
+ )} €`}
+ </div>
+ </div>
+ )}
+ </>
+ )}
+ <div
+ className={
+ showCompare
+ ? 'dataloadvisualizer-section dataloadvisualizer-section-right'
+ : 'dataloadvisualizer-section'
+ }
+ >
+ <div
+ className={`dataloadvisualizer-value ${fluidStyle.toLowerCase()} text-36-bold`}
+ >
+ {fluidStyle &&
+ formatNumberValues(dataload.value, fluidStyle, true) >= 1000 &&
+ fluidStyle !== 'MULTIFLUID' ? (
+ <>
+ {formatNumberValues(dataload.value, fluidStyle)}
+ <span className="text-18-normal">
+ {`${t('FLUID.' + fluidStyle + '.MEGAUNIT')}`}
+ </span>
+ </>
+ ) : (
+ <>
+ {formatNumberValues(dataload.value)}
+ <span className="text-18-normal">
+ {`${t('FLUID.' + fluidStyle + '.UNIT')}`}
+ </span>
+ </>
+ )}
+ </div>
+ {!multiFluid ? (
+ <div
+ className={`dataloadvisualizer-euro ${fluidStyle.toLowerCase()} text-16-normal`}
+ >
+ {`${formatNumberValues(
+ converterService.LoadToEuro(dataload.value, fluidType)
+ )} €`}
+ </div>
+ ) : (
+ <div className="dataloadvisualizer-euro text-16-normal">
+ {dataload.valueDetail ? (
+ dataload.valueDetail.map((load, index) => {
+ return (
+ <NavLink
+ key={index}
+ to={`/consumption/${t(
+ 'FLUID.' + FluidType[index] + '.NAME'
+ ).toLowerCase()}`}
+ className="dataloadvisualizer-euro-link"
+ >
+ <div
+ className={
+ load === -1 &&
+ !dateChartService.isDataToCome(dataload, index)
+ ? 'dataloadvisualizer-euro-fluid error'
+ : `dataloadvisualizer-euro-fluid ${FluidType[
+ index
+ ].toLowerCase()}`
+ }
+ >
+ <Icon
+ className="dataloadvisualizer-euro-fluid-icon"
+ icon={getPicto(index)}
+ size={22}
+ />
+ <div>
+ {!dateChartService.isDataToCome(dataload, index) &&
+ load !== -1
+ ? `${formatNumberValues(load)} €`
+ : dateChartService.isDataToCome(dataload, index)
+ ? t('COMMON.DATATOCOME')
+ : '---- €'}
+ </div>
+ </div>
+ </NavLink>
+ )
+ })
+ ) : (
+ <NavLink
+ to={`/consumption/${t(
+ 'FLUID.' + FluidType[fluidType] + '.NAME'
+ ).toLowerCase()}`}
+ className="dataloadvisualizer-euro-link"
+ >
+ <div
+ className={`dataloadvisualizer-euro-fluid ${FluidType[
+ fluidType
+ ].toLowerCase()}`}
+ >
+ <Icon
+ className="dataloadvisualizer-euro-fluid-icon"
+ icon={getPicto(fluidType)}
+ size={22}
+ />
+ <div>{`${formatNumberValues(
+ converterService.LoadToEuro(dataload.value, fluidType)
+ )} €`}</div>
+ </div>
+ </NavLink>
+ )}
+ </div>
+ )}
+ </div>
+ </div>
+ ) : (
+ <>
+ {!dataload ? null : dataload &&
+ lastDataDate &&
+ dataload.date > lastDataDate ? (
+ <div
+ className={`dataloadvisualizer-content ${fluidStyle.toLowerCase()} text-22-normal`}
+ >
+ {`${t('COMMON.LASTDATA')} : ${lastDataDate.toFormat(
+ "dd'/'MM'/'yy"
+ )}`}
+ </div>
+ ) : (
+ <div
+ className={`dataloadvisualizer-content ${fluidStyle.toLowerCase()} text-22-normal`}
+ >
+ {`${t('COMMON.NODATA')}`}
+ </div>
+ )}
+ </>
+ )}
+ </div>
+ )
+}
+
+export default DataloadConsumptionVisualizer
diff --git a/src/components/ConsumptionVisualizer/LastDataConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/LastDataConsumptionVisualizer.tsx
index 6165c3fa9c652005461d76439175a8352f910661..6d2a32803b236744154d7fe2efe78c50f53d5fd5 100644
--- a/src/components/ConsumptionVisualizer/LastDataConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/LastDataConsumptionVisualizer.tsx
@@ -1,44 +1,44 @@
-import React from 'react'
-import './lastDataConsumptionVisualizer.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useDispatch, useSelector } from 'react-redux'
-import { AppStore } from 'store'
-import { setCurrentIndex, setSelectedDate } from 'store/chart/chart.actions'
-import { DateTime } from 'luxon'
-import DateChartService from 'services/dateChart.service'
-
-interface LastDataConsumptionVisualizerProps {
- lastDataDate: DateTime | null
-}
-
-const LastDataConsumptionVisualizer: React.FC<LastDataConsumptionVisualizerProps> = ({
- lastDataDate,
-}: LastDataConsumptionVisualizerProps) => {
- const { t } = useI18n()
- const dispatch = useDispatch()
- const { currentTimeStep } = useSelector(
- (state: AppStore) => state.ecolyo.chart
- )
-
- const moveToDate = () => {
- if (lastDataDate) {
- const dateChartService = new DateChartService()
- const updatedIndex: number = dateChartService.defineDateIndex(
- currentTimeStep,
- lastDataDate
- )
- dispatch(setSelectedDate(lastDataDate))
- dispatch(setCurrentIndex(updatedIndex))
- }
- }
-
- return (
- <div>
- <button className="lastdatavisualizer-button" onClick={moveToDate}>
- {t('CONSUMPTION.DISPLAY_LAST_DATA')}
- </button>
- </div>
- )
-}
-
-export default LastDataConsumptionVisualizer
+import React from 'react'
+import './lastDataConsumptionVisualizer.scss'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useDispatch, useSelector } from 'react-redux'
+import { AppStore } from 'store'
+import { setCurrentIndex, setSelectedDate } from 'store/chart/chart.actions'
+import { DateTime } from 'luxon'
+import DateChartService from 'services/dateChart.service'
+
+interface LastDataConsumptionVisualizerProps {
+ lastDataDate: DateTime | null
+}
+
+const LastDataConsumptionVisualizer: React.FC<LastDataConsumptionVisualizerProps> = ({
+ lastDataDate,
+}: LastDataConsumptionVisualizerProps) => {
+ const { t } = useI18n()
+ const dispatch = useDispatch()
+ const { currentTimeStep } = useSelector(
+ (state: AppStore) => state.ecolyo.chart
+ )
+
+ const moveToDate = () => {
+ if (lastDataDate) {
+ const dateChartService = new DateChartService()
+ const updatedIndex: number = dateChartService.defineDateIndex(
+ currentTimeStep,
+ lastDataDate
+ )
+ dispatch(setSelectedDate(lastDataDate))
+ dispatch(setCurrentIndex(updatedIndex))
+ }
+ }
+
+ return (
+ <div>
+ <button className="lastdatavisualizer-button" onClick={moveToDate}>
+ {t('consumption.display_last_data')}
+ </button>
+ </div>
+ )
+}
+
+export default LastDataConsumptionVisualizer
diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
index 9caa4c3460fc847f599263a9e9a98c32490af399..dad91485624f2be5de3258f192ec0ff3d621103d 100644
--- a/src/components/Content/Content.tsx
+++ b/src/components/Content/Content.tsx
@@ -1,128 +1,130 @@
-import React, { useCallback, useEffect } from 'react'
-import { useClient } from 'cozy-client'
-import { history } from 'components/App'
-import { useSelector, useDispatch } from 'react-redux'
-import { AppStore } from 'store'
-import { changeScreenType } from 'store/global/global.actions'
-import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
-import { updateProfile } from 'store/profile/profile.actions'
-
-import MailService from 'services/mail.service'
-import { ScreenType } from 'enum/screen.enum'
-import get from 'lodash/get'
-
-import WelcomeModal from 'components/Welcome/WelcomeModal'
-import FeedbackModal from 'components/Feedback/FeedbackModal'
-
-interface ContentProps {
- children?: React.ReactNode
- height?: number
- background?: string
-}
-
-const Content: React.FC<ContentProps> = ({
- children,
- height = 0,
- background = 'inherit',
-}: ContentProps) => {
- const client = useClient()
- const dispatch = useDispatch()
- const { screenType } = useSelector((state: AppStore) => state.ecolyo.global)
- const profile = useSelector((state: AppStore) => state.ecolyo.profile)
- const modalState = useSelector((state: AppStore) => state.ecolyo.modal)
-
- const cozyBarHeight = 48
- const cozyNavHeight = 56
-
- const setWelcomeModalViewed = useCallback(async () => {
- const mailService = new MailService()
- let username = ''
- // TODO Move this code to Mail Service
- const settings = await client
- .getStackClient()
- .fetchJSON('GET', '/settings/instance')
- const publicName = get(settings, 'data.attributes.public_name')
- if (publicName) {
- username = publicName
- }
- const bodyWelcome = mailService.CreateBodyWelcome(
- username,
- window.location.href
- )
- const mailData = {
- mode: 'noreply',
- subject: '[Ecolyo] - Bienvenue',
- parts: [
- {
- type: 'text/html',
- body: bodyWelcome,
- },
- ],
- }
- mailService.SendMail(client, mailData)
- dispatch(
- updateProfile({
- isFirstConnection: false,
- })
- )
- }, [client, dispatch])
-
- const handleFeedbackModalClose = useCallback(() => {
- dispatch(updateModalIsFeedbacksOpen(false))
- }, [dispatch])
-
- useEffect(() => {
- const unlisten = history.listen(() => {
- window.scrollTo(0, 0)
- })
- return () => {
- unlisten()
- }
- }, [children])
-
- useEffect(() => {
- function handleResize() {
- if (innerWidth <= 768) {
- dispatch(changeScreenType(ScreenType.MOBILE))
- } else if (innerWidth <= 1024) {
- dispatch(changeScreenType(ScreenType.TABLET))
- } else {
- dispatch(changeScreenType(ScreenType.DESKTOP))
- }
- }
- handleResize()
- window.addEventListener('resize', handleResize)
- return () => {
- window.removeEventListener('resize', handleResize)
- }
- }, [dispatch])
-
- const { isFirstConnection } = profile
- const { isFeedbacksOpen } = modalState
- return (
- <>
- {isFirstConnection && (
- <WelcomeModal handleCloseClick={setWelcomeModalViewed} />
- )}
- {isFeedbacksOpen && (
- <FeedbackModal handleCloseClick={handleFeedbackModalClose} />
- )}
- <div
- className="content-view"
- style={{
- marginTop: height,
- paddingBottom: 0,
- minHeight:
- screenType !== ScreenType.DESKTOP
- ? `calc(100vh - ${height}px - ${cozyBarHeight}px - ${cozyNavHeight}px)`
- : `unset`,
- background: background,
- }}
- >
- {children}
- </div>
- </>
- )
-}
-
-export default Content
+import React, { useCallback, useEffect } from 'react'
+import { useClient } from 'cozy-client'
+import { history } from 'components/App'
+import { useSelector, useDispatch } from 'react-redux'
+import { AppStore } from 'store'
+import { changeScreenType } from 'store/global/global.actions'
+import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
+import { updateProfile } from 'store/profile/profile.actions'
+
+import MailService from 'services/mail.service'
+import { ScreenType } from 'enum/screen.enum'
+import get from 'lodash/get'
+
+import WelcomeModal from 'components/Welcome/WelcomeModal'
+import FeedbackModal from 'components/Feedback/FeedbackModal'
+
+interface ContentProps {
+ children?: React.ReactNode
+ height?: number
+ background?: string
+}
+
+const Content: React.FC<ContentProps> = ({
+ children,
+ height = 0,
+ background = 'inherit',
+}: ContentProps) => {
+ const client = useClient()
+ const dispatch = useDispatch()
+ const { screenType } = useSelector((state: AppStore) => state.ecolyo.global)
+ const profile = useSelector((state: AppStore) => state.ecolyo.profile)
+ const modalState = useSelector((state: AppStore) => state.ecolyo.modal)
+
+ const cozyBarHeight = 48
+ const cozyNavHeight = 56
+
+ const setWelcomeModalViewed = useCallback(async () => {
+ const mailService = new MailService()
+ let username = ''
+ // TODO Move this code to Mail Service
+ const settings = await client
+ .getStackClient()
+ .fetchJSON('GET', '/settings/instance')
+ const publicName = get(settings, 'data.attributes.public_name')
+ if (publicName) {
+ username = publicName
+ }
+ const bodyWelcome = mailService.CreateBodyWelcome(
+ username,
+ window.location.href
+ )
+ const mailData = {
+ mode: 'noreply',
+ subject: '[Ecolyo] - Bienvenue',
+ parts: [
+ {
+ type: 'text/html',
+ body: bodyWelcome,
+ },
+ ],
+ }
+ mailService.SendMail(client, mailData)
+ dispatch(
+ updateProfile({
+ isFirstConnection: false,
+ })
+ )
+ }, [client, dispatch])
+
+ const handleFeedbackModalClose = useCallback(() => {
+ dispatch(updateModalIsFeedbacksOpen(false))
+ }, [dispatch])
+
+ useEffect(() => {
+ const unlisten = history.listen(() => {
+ window.scrollTo(0, 0)
+ })
+ return () => {
+ unlisten()
+ }
+ }, [children])
+
+ useEffect(() => {
+ function handleResize() {
+ if (innerWidth <= 768) {
+ dispatch(changeScreenType(ScreenType.MOBILE))
+ } else if (innerWidth <= 1024) {
+ dispatch(changeScreenType(ScreenType.TABLET))
+ } else {
+ dispatch(changeScreenType(ScreenType.DESKTOP))
+ }
+ }
+ handleResize()
+ window.addEventListener('resize', handleResize)
+ return () => {
+ window.removeEventListener('resize', handleResize)
+ }
+ }, [dispatch])
+
+ const { isFirstConnection } = profile
+ const { isFeedbacksOpen } = modalState
+ return (
+ <>
+ <WelcomeModal
+ open={isFirstConnection}
+ handleCloseClick={setWelcomeModalViewed}
+ />
+ <FeedbackModal
+ open={isFeedbacksOpen}
+ handleCloseClick={handleFeedbackModalClose}
+ />
+ <div
+ className="content-view"
+ style={{
+ marginTop: height,
+ paddingBottom: 0,
+ minHeight:
+ screenType !== ScreenType.DESKTOP
+ ? `calc(100vh - ${height}px - ${cozyBarHeight}px - ${cozyNavHeight}px)`
+ : `unset`,
+ background: background,
+ }}
+ >
+ {children}
+ </div>
+ </>
+ )
+}
+
+export default Content
diff --git a/src/components/DateNavigator/DateNavigator.tsx b/src/components/DateNavigator/DateNavigator.tsx
index 1f312ce80d3847fe3791dc332e97f821d0b1fe21..daa227f34c790ecd60ac6794415108c0e577c4c1 100644
--- a/src/components/DateNavigator/DateNavigator.tsx
+++ b/src/components/DateNavigator/DateNavigator.tsx
@@ -1,129 +1,136 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { AppStore } from 'store'
-import { setCurrentIndex, setSelectedDate } from 'store/chart/chart.actions'
-import { DateTime } from 'luxon'
-import classNames from 'classnames'
-import './datenavigator.scss'
-
-import DateChartService from 'services/dateChart.service'
-import { isLastDateReached, isLastPeriodReached } from 'utils/date'
-
-import DateNavigatorFormat from 'components/DateNavigator/DateNavigatorFormat'
-import StyledIconbutton from 'components/CommonKit/IconButton/StyledIconButton'
-import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
-import RigthArrowIcon from 'assets/icons/ico/right-arrow.svg'
-import DoubleRightArrowIcon from 'assets/icons/ico/double-right-arrow.svg'
-import DoubleLeftArrowIcon from 'assets/icons/ico/double-left-arrow.svg'
-
-const DateNavigator: React.FC = () => {
- const dispatch = useDispatch()
- const { currentTimeStep, selectedDate, currentIndex } = useSelector(
- (state: AppStore) => state.ecolyo.chart
- )
- const disablePrev =
- selectedDate <
- DateTime.local(0, 1, 1).setZone('utc', {
- keepLocalTime: true,
- })
- const disableNext: boolean = isLastDateReached(selectedDate, currentTimeStep)
- const disableNextSlide: boolean = isLastPeriodReached(
- selectedDate,
- currentTimeStep
- )
- const dateChartService = new DateChartService()
-
- const handleClickMove = (increment: number) => {
- const updatedDate: DateTime = dateChartService.incrementeDate(
- currentTimeStep,
- selectedDate,
- increment
- )
- const updatedIndex: number = dateChartService.defineDateIndex(
- currentTimeStep,
- updatedDate
- )
- dispatch(setSelectedDate(updatedDate))
- dispatch(setCurrentIndex(updatedIndex))
- }
-
- const handleChangePrevIndex = () => {
- if (!disablePrev) {
- const increment: number = dateChartService.defineIncrementForPreviousIndex(
- currentTimeStep,
- selectedDate,
- currentIndex
- )
- handleClickMove(increment)
- }
- }
- const handleChangeNextIndex = () => {
- if (!disableNextSlide) {
- const increment: number = dateChartService.defineIncrementForNextIndex(
- currentTimeStep,
- selectedDate,
- currentIndex
- )
- handleClickMove(increment)
- }
- }
- const handleClickPrev = () => {
- if (!disablePrev) {
- handleClickMove(-1)
- }
- }
- const handleClickNext = () => {
- if (!disableNext) {
- handleClickMove(1)
- }
- }
-
- return (
- <div className="date-navigator">
- <div>
- <StyledIconbutton
- className={classNames('date-navigator-button', {
- ['disable']: disablePrev,
- })}
- onClick={() => handleChangePrevIndex()}
- icon={DoubleLeftArrowIcon}
- size={16}
- />
- </div>
- <div>
- <StyledIconbutton
- className={classNames('date-navigator-button', {
- ['disable']: disablePrev,
- })}
- onClick={() => handleClickPrev()}
- icon={LeftArrowIcon}
- size={16}
- />
- </div>
- <DateNavigatorFormat timeStep={currentTimeStep} date={selectedDate} />
-
- <div>
- <StyledIconbutton
- className={classNames('date-navigator-button', {
- ['disable']: disableNext,
- })}
- onClick={() => handleClickNext()}
- icon={RigthArrowIcon}
- size={16}
- />
- </div>
- <div>
- <StyledIconbutton
- className={classNames('date-navigator-button', {
- ['disable']: disableNext || disableNextSlide,
- })}
- onClick={() => handleChangeNextIndex()}
- icon={DoubleRightArrowIcon}
- size={16}
- />
- </div>
- </div>
- )
-}
-
-export default DateNavigator
+import React from 'react'
+import './datenavigator.scss'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useDispatch, useSelector } from 'react-redux'
+import { AppStore } from 'store'
+import { setCurrentIndex, setSelectedDate } from 'store/chart/chart.actions'
+import { DateTime } from 'luxon'
+import classNames from 'classnames'
+
+import DateChartService from 'services/dateChart.service'
+import { isLastDateReached, isLastPeriodReached } from 'utils/date'
+
+import DateNavigatorFormat from 'components/DateNavigator/DateNavigatorFormat'
+import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
+import RigthArrowIcon from 'assets/icons/ico/right-arrow.svg'
+import DoubleRightArrowIcon from 'assets/icons/ico/double-right-arrow.svg'
+import DoubleLeftArrowIcon from 'assets/icons/ico/double-left-arrow.svg'
+import IconButton from '@material-ui/core/IconButton'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+
+const DateNavigator: React.FC = () => {
+ const { t } = useI18n()
+ const dispatch = useDispatch()
+ const { currentTimeStep, selectedDate, currentIndex } = useSelector(
+ (state: AppStore) => state.ecolyo.chart
+ )
+ const disablePrev =
+ selectedDate <
+ DateTime.local(0, 1, 1).setZone('utc', {
+ keepLocalTime: true,
+ })
+ const disableNext: boolean = isLastDateReached(selectedDate, currentTimeStep)
+ const disableNextSlide: boolean = isLastPeriodReached(
+ selectedDate,
+ currentTimeStep
+ )
+ const dateChartService = new DateChartService()
+
+ const handleClickMove = (increment: number) => {
+ const updatedDate: DateTime = dateChartService.incrementeDate(
+ currentTimeStep,
+ selectedDate,
+ increment
+ )
+ const updatedIndex: number = dateChartService.defineDateIndex(
+ currentTimeStep,
+ updatedDate
+ )
+ dispatch(setSelectedDate(updatedDate))
+ dispatch(setCurrentIndex(updatedIndex))
+ }
+
+ const handleChangePrevIndex = () => {
+ if (!disablePrev) {
+ const increment: number = dateChartService.defineIncrementForPreviousIndex(
+ currentTimeStep,
+ selectedDate,
+ currentIndex
+ )
+ handleClickMove(increment)
+ }
+ }
+ const handleChangeNextIndex = () => {
+ if (!disableNextSlide) {
+ const increment: number = dateChartService.defineIncrementForNextIndex(
+ currentTimeStep,
+ selectedDate,
+ currentIndex
+ )
+ handleClickMove(increment)
+ }
+ }
+ const handleClickPrev = () => {
+ if (!disablePrev) {
+ handleClickMove(-1)
+ }
+ }
+ const handleClickNext = () => {
+ if (!disableNext) {
+ handleClickMove(1)
+ }
+ }
+
+ return (
+ <div className="date-navigator">
+ <div>
+ <IconButton
+ aria-label={t('consumption.accessibility.button_previous_period')}
+ className={classNames('date-navigator-button', {
+ ['disable']: disablePrev,
+ })}
+ onClick={() => handleChangePrevIndex()}
+ >
+ <Icon icon={DoubleLeftArrowIcon} size={16} />
+ </IconButton>
+ </div>
+ <div>
+ <IconButton
+ aria-label={t('consumption.accessibility.button_previous_value')}
+ className={classNames('date-navigator-button', {
+ ['disable']: disablePrev,
+ })}
+ onClick={() => handleClickPrev()}
+ >
+ <Icon icon={LeftArrowIcon} size={16} />
+ </IconButton>
+ </div>
+ <DateNavigatorFormat timeStep={currentTimeStep} date={selectedDate} />
+
+ <div>
+ <IconButton
+ aria-label={t('consumption.accessibility.button_next_value')}
+ className={classNames('date-navigator-button', {
+ ['disable']: disableNext,
+ })}
+ onClick={() => handleClickNext()}
+ >
+ <Icon icon={RigthArrowIcon} size={16} />
+ </IconButton>
+ </div>
+ <div>
+ <IconButton
+ aria-label={t('consumption.accessibility.button_next_period')}
+ className={classNames('date-navigator-button', {
+ ['disable']: disableNext || disableNextSlide,
+ })}
+ onClick={() => handleChangeNextIndex()}
+ >
+ <Icon icon={DoubleRightArrowIcon} size={16} />
+ </IconButton>
+ </div>
+ </div>
+ )
+}
+
+export default DateNavigator
diff --git a/src/components/Duel/DuelEmptyValueModal.tsx b/src/components/Duel/DuelEmptyValueModal.tsx
index ccc340d074bfc2b37850ab7ed125fa9a4dfdaa69..e9b0bd9c8b3c6d72c16b476a654f274f9042dd5f 100644
--- a/src/components/Duel/DuelEmptyValueModal.tsx
+++ b/src/components/Duel/DuelEmptyValueModal.tsx
@@ -1,51 +1,65 @@
-import React, { useEffect, useState } from 'react'
-import './duelEmptyValueModal.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Modal from 'components/CommonKit/Modal/Modal'
-import MuiButton from '@material-ui/core/Button'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-
-import defaultIcon from 'assets/icons/visu/duelResult/default.svg'
-import { importIconbyId } from 'utils/utils'
-
-interface DuelEmptyValueModalProps {
- handleCloseClick: () => void
-}
-
-const DuelEmptyValueModal: React.FC<DuelEmptyValueModalProps> = ({
- handleCloseClick,
-}: DuelEmptyValueModalProps) => {
- const { t } = useI18n()
- const [emptyIcon, setEmptyIcon] = useState<string>(defaultIcon)
- useEffect(() => {
- importIconbyId('emptyValue', 'duel').then(icon => {
- icon ? setEmptyIcon(icon) : setEmptyIcon(defaultIcon)
- })
- }, [])
-
- return (
- <Modal border={true} handleCloseClick={handleCloseClick}>
- <div className="em-root modal-empty-value">
- <div className="em-content">
- <StyledIcon className="imgResult" icon={emptyIcon} size={208} />
- <div className="text-28-normal-uppercase title">
- {t('duel.empty_value.title')}
- </div>
- <div className="text-18-normal">{t('duel.empty_value.message1')}</div>
- <div className="text-18-normal">{t('duel.empty_value.message2')}</div>
- <MuiButton
- onClick={handleCloseClick}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('duel.empty_value.button')}
- </MuiButton>
- </div>
- </div>
- </Modal>
- )
-}
-
-export default DuelEmptyValueModal
+import React, { useEffect, useState } from 'react'
+import './duelEmptyValueModal.scss'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import Dialog from '@material-ui/core/Dialog'
+import Button from '@material-ui/core/Button'
+
+import defaultIcon from 'assets/icons/visu/duelResult/default.svg'
+import { importIconbyId } from 'utils/utils'
+
+interface DuelEmptyValueModalProps {
+ open: boolean
+ handleCloseClick: () => void
+}
+
+const DuelEmptyValueModal: React.FC<DuelEmptyValueModalProps> = ({
+ open,
+ handleCloseClick,
+}: DuelEmptyValueModalProps) => {
+ const { t } = useI18n()
+ const [emptyIcon, setEmptyIcon] = useState<string>(defaultIcon)
+ useEffect(() => {
+ importIconbyId('emptyValue', 'duel').then(icon => {
+ icon ? setEmptyIcon(icon) : setEmptyIcon(defaultIcon)
+ })
+ }, [])
+
+ return (
+ <Dialog
+ open={open}
+ onClose={handleCloseClick}
+ aria-label={t('duel_empty_value_modal.accessibility.window_title')}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper blue-border',
+ }}
+ >
+ <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.message1')}
+ </div>
+ <div className="text-18-normal">
+ {t('duel_empty_value_modal.message2')}
+ </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/DuelOngoing.tsx b/src/components/Duel/DuelOngoing.tsx
index 9363749906c104d64eadfa687a4e7d688f796efb..ef3a1cb146cec90daaac01d174983dfdad899aad 100644
--- a/src/components/Duel/DuelOngoing.tsx
+++ b/src/components/Duel/DuelOngoing.tsx
@@ -163,13 +163,12 @@ const DuelOngoing: React.FC<DuelOngoingProps> = ({
</div>
</div>
</div>
- {resultModal && (
- <DuelResultModal
- userChallenge={userChallenge}
- win={winChallenge}
- handleCloseClick={setResult}
- />
- )}
+ <DuelResultModal
+ open={resultModal}
+ userChallenge={userChallenge}
+ win={winChallenge}
+ handleCloseClick={setResult}
+ />
</>
)
}
diff --git a/src/components/Duel/DuelResultModal.tsx b/src/components/Duel/DuelResultModal.tsx
index efccd255ac5a97fb2195d712d163cd2940ff76f0..8bddbf7d553c329d132ab7bdac8aa9e3994b78a8 100644
--- a/src/components/Duel/DuelResultModal.tsx
+++ b/src/components/Duel/DuelResultModal.tsx
@@ -1,78 +1,92 @@
-import React, { useEffect, useState } from 'react'
-import './duelResultModal.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { formatNumberValues, importIconbyId } from 'utils/utils'
-
-import { UserChallenge } from 'models/challenge.model'
-import Modal from 'components/CommonKit/Modal/Modal'
-import MuiButton from '@material-ui/core/Button'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-
-import defaultIcon from 'assets/icons/visu/duelResult/default.svg'
-
-interface DuelResultModalProps {
- userChallenge: UserChallenge
- win: boolean
- handleCloseClick: () => void
-}
-
-const DuelResultModal: React.FC<DuelResultModalProps> = ({
- 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(() => {
- importIconbyId(userChallenge.id + '-1', 'duelResult').then(icon => {
- icon ? setWinIcon(icon) : setWinIcon(defaultIcon)
- })
- importIconbyId(userChallenge.id + '-0', 'duelResult').then(icon => {
- icon ? setLossIcon(icon) : setLossIcon(defaultIcon)
- })
- }, [userChallenge])
-
- return (
- <Modal border={true} handleCloseClick={handleCloseClick}>
- <div className="em-root modal-congrats">
- <div className="em-content">
- <StyledIcon
- className="imgResult"
- icon={win ? winIcon : lossIcon}
- size={208}
- />
- <div className="text-28-normal-uppercase title">
- {win ? t('duel.sucess.title') : t('duel.lost.title')}
- </div>
- <div className="text-18-normal">
- {win
- ? t('duel.sucess.message1') + result + ' €'
- : t('duel.lost.message1') + result + ' €'}
- </div>
- <div className="text-18-normal">
- {win
- ? t('duel.sucess.message2') + userChallenge.title
- : t('duel.lost.message2') + userChallenge.title + '...'}
- </div>
- <MuiButton
- className="button"
- onClick={handleCloseClick}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {win ? t('duel.sucess.button') : t('duel.lost.button')}
- </MuiButton>
- </div>
- </div>
- </Modal>
- )
-}
-
-export default DuelResultModal
+import React, { useEffect, useState } from 'react'
+import './duelResultModal.scss'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { formatNumberValues, importIconbyId } from 'utils/utils'
+import { UserChallenge } from 'models/challenge.model'
+
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
+import defaultIcon from 'assets/icons/visu/duelResult/default.svg'
+
+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(() => {
+ importIconbyId(userChallenge.id + '-1', 'duelResult').then(icon => {
+ icon ? setWinIcon(icon) : setWinIcon(defaultIcon)
+ })
+ importIconbyId(userChallenge.id + '-0', 'duelResult').then(icon => {
+ icon ? setLossIcon(icon) : setLossIcon(defaultIcon)
+ })
+ }, [userChallenge])
+
+ return (
+ <Dialog
+ open={open}
+ onClose={handleCloseClick}
+ aria-label={t('duel_result_modal.accessibility.window_title')}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper blue-border',
+ }}
+ >
+ <div className="duel-result-modal-root ">
+ <Icon
+ className="imgResult"
+ icon={win ? winIcon : lossIcon}
+ size={208}
+ />
+ <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/DuelView.tsx b/src/components/Duel/DuelView.tsx
index d454f5acc948cab6782d73727e4c35f3f135f827..436dbba00d23a788432c157aab2bd149b7231a20 100644
--- a/src/components/Duel/DuelView.tsx
+++ b/src/components/Duel/DuelView.tsx
@@ -1,64 +1,69 @@
-import React, { useCallback, useState } from 'react'
-import { useSelector } from 'react-redux'
-import { AppStore } from 'store'
-import CozyBar from 'components/Header/CozyBar'
-import Content from 'components/Content/Content'
-import Header from 'components/Header/Header'
-import { UserChallengeState } from 'enum/userChallenge.enum'
-
-import DuelError from 'components/Duel/DuelError'
-import DuelUnlocked from 'components/Duel/DuelUnlocked'
-import { UserDuelState } from 'enum/userDuel.enum'
-import { UserChallenge } from 'models'
-import DuelOngoing from './DuelOngoing'
-import DuelEmptyValueModal from './DuelEmptyValueModal'
-import { useHistory } from 'react-router-dom'
-
-const DuelView: React.FC = () => {
- const [headerHeight, setHeaderHeight] = useState<number>(0)
- const { currentChallenge } = useSelector(
- (state: AppStore) => state.ecolyo.challenge
- )
- const history = useHistory()
- const defineHeaderHeight = useCallback((height: number) => {
- setHeaderHeight(height)
- }, [])
- const goBackToChallenge = () => {
- history.push('/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.NO_REF_PERIOD_VALID:
- return <DuelEmptyValueModal handleCloseClick={goBackToChallenge} />
- default:
- return <DuelError />
- }
- }
-
- return (
- <>
- <CozyBar titleKey={'COMMON.APP_DUEL_TITLE'} displayBackArrow={true} />
- <Header
- setHeaderHeight={defineHeaderHeight}
- desktopTitleKey={'COMMON.APP_DUEL_TITLE'}
- displayBackArrow={true}
- ></Header>
- <Content height={headerHeight}>
- <div>
- {currentChallenge &&
- currentChallenge.state === UserChallengeState.DUEL ? (
- renderDuel(currentChallenge)
- ) : (
- <DuelError />
- )}
- </div>
- </Content>
- </>
- )
-}
-
-export default DuelView
+import React, { useCallback, useState } from 'react'
+import { useSelector } from 'react-redux'
+import { AppStore } from 'store'
+import CozyBar from 'components/Header/CozyBar'
+import Content from 'components/Content/Content'
+import Header from 'components/Header/Header'
+import { UserChallengeState } from 'enum/userChallenge.enum'
+
+import DuelError from 'components/Duel/DuelError'
+import DuelUnlocked from 'components/Duel/DuelUnlocked'
+import { UserDuelState } from 'enum/userDuel.enum'
+import { UserChallenge } from 'models'
+import DuelOngoing from './DuelOngoing'
+import DuelEmptyValueModal from './DuelEmptyValueModal'
+import { useHistory } from 'react-router-dom'
+
+const DuelView: React.FC = () => {
+ const [headerHeight, setHeaderHeight] = useState<number>(0)
+ const { currentChallenge } = useSelector(
+ (state: AppStore) => state.ecolyo.challenge
+ )
+ const history = useHistory()
+ const defineHeaderHeight = useCallback((height: number) => {
+ setHeaderHeight(height)
+ }, [])
+ const goBackToChallenge = () => {
+ history.push('/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.NO_REF_PERIOD_VALID:
+ return (
+ <DuelEmptyValueModal
+ open={true}
+ handleCloseClick={goBackToChallenge}
+ />
+ )
+ default:
+ return <DuelError />
+ }
+ }
+
+ return (
+ <>
+ <CozyBar titleKey={'COMMON.APP_DUEL_TITLE'} displayBackArrow={true} />
+ <Header
+ setHeaderHeight={defineHeaderHeight}
+ desktopTitleKey={'COMMON.APP_DUEL_TITLE'}
+ displayBackArrow={true}
+ ></Header>
+ <Content height={headerHeight}>
+ <div>
+ {currentChallenge &&
+ currentChallenge.state === UserChallengeState.DUEL ? (
+ renderDuel(currentChallenge)
+ ) : (
+ <DuelError />
+ )}
+ </div>
+ </Content>
+ </>
+ )
+}
+
+export default DuelView
diff --git a/src/components/Duel/duelEmptyValueModal.scss b/src/components/Duel/duelEmptyValueModal.scss
index ad4be6ec65bef58d3ca0dd6759fcebc3ce33851c..f5e9172167801afd048e6920cf3d0fccdc66f589 100644
--- a/src/components/Duel/duelEmptyValueModal.scss
+++ b/src/components/Duel/duelEmptyValueModal.scss
@@ -1,13 +1,17 @@
-.modal-empty-value {
- text-align: center;
- overflow-x: hidden;
- .em-content {
- padding: 1.5rem 2.5rem;
- }
- .title {
- margin: 2rem 0 1rem;
- }
- button.btn-secondary-negative {
- margin: 2rem 0.25rem 1.5rem;
- }
-}
+@import '../../styles/base/color';
+
+.modal-empty-value-root {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 1.5rem 0.5rem;
+ text-align: center;
+ .modal-empty-value-title{
+ margin: 2rem 0 1rem;
+ }
+
+ button.btn-secondary-negative {
+ margin: 2rem 0.25rem 1.5rem;
+ }
+}
diff --git a/src/components/Duel/duelResultModal.scss b/src/components/Duel/duelResultModal.scss
index 3bac30f6dec013cfab4e3c8152abeb78ed28c92a..28a988fa6b7b886f04c488f5afa946a9952e98ab 100644
--- a/src/components/Duel/duelResultModal.scss
+++ b/src/components/Duel/duelResultModal.scss
@@ -1,13 +1,11 @@
-.modal-congrats {
- text-align: center;
- overflow-x: hidden;
- .em-content {
- padding: 1.5rem 2.5rem;
- }
- .title {
- margin: 2rem 0 1rem;
- }
- button.btn-secondary-negative {
- margin: 2rem 0.25rem 0.5rem;
- }
-}
+.duel-result-modal-root {
+ text-align: center;
+ overflow-x: hidden;
+ padding: 1rem 1.5rem 0.5rem;
+ .title {
+ margin: 2rem 0 1rem;
+ }
+ button.btn-secondary-negative {
+ margin: 2rem 0.25rem 0.5rem;
+ }
+}
diff --git a/src/components/Ecogesture/EcogestureInfoModal.spec.tsx b/src/components/Ecogesture/EcogestureInfoModal.spec.tsx
index ee0377571b88305afd4a18a69695e0fa30400c15..e6f7bc0acb97f3be4bebe5ac1704e3017a6b202e 100644
--- a/src/components/Ecogesture/EcogestureInfoModal.spec.tsx
+++ b/src/components/Ecogesture/EcogestureInfoModal.spec.tsx
@@ -1,7 +1,7 @@
import React from 'react'
import { mount } from 'enzyme'
import EcogestureInfoModal from './EcogestureInfoModal'
-import MuiButton from '@material-ui/core/Button'
+import Button from '@material-ui/core/Button'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -18,20 +18,26 @@ const mockHandleCloseClick = jest.fn()
describe('EcogestureInfoModal component', () => {
it('should be rendered correctly', () => {
const wrapper = mount(
- <EcogestureInfoModal handleCloseClick={mockHandleCloseClick} />
+ <EcogestureInfoModal
+ open={true}
+ handleCloseClick={mockHandleCloseClick}
+ />
)
expect(wrapper.find('.info-header').exists()).toBeTruthy()
expect(wrapper.find('.info-title').exists()).toBeTruthy()
expect(wrapper.find('.info-detail').exists()).toBeTruthy()
- expect(wrapper.find(MuiButton).exists()).toBeTruthy()
+ expect(wrapper.find(Button).exists()).toBeTruthy()
})
it('should be call handleCloseClick when click on button', () => {
const wrapper = mount(
- <EcogestureInfoModal handleCloseClick={mockHandleCloseClick} />
+ <EcogestureInfoModal
+ open={true}
+ handleCloseClick={mockHandleCloseClick}
+ />
)
wrapper
- .find(MuiButton)
+ .find(Button)
.first()
.simulate('click')
expect(mockHandleCloseClick).toHaveBeenCalled()
diff --git a/src/components/Ecogesture/EcogestureInfoModal.tsx b/src/components/Ecogesture/EcogestureInfoModal.tsx
index 9b97593924762834e0881b7f3da0d991170ff7f5..6a36660a38c58b421b72b0862d5ddb10c9834008 100644
--- a/src/components/Ecogesture/EcogestureInfoModal.tsx
+++ b/src/components/Ecogesture/EcogestureInfoModal.tsx
@@ -1,42 +1,54 @@
import React from 'react'
import './ecogestureInfoModal.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Modal from 'components/CommonKit/Modal/Modal'
-import MuiButton from '@material-ui/core/Button'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
import HeaderQuestion from 'assets/icons/ico/header-question.svg'
interface EcogestureInfoModalProps {
+ open: boolean
handleCloseClick: () => void
}
const EcogestureInfoModal: React.FC<EcogestureInfoModalProps> = ({
+ open,
handleCloseClick,
}: EcogestureInfoModalProps) => {
const { t } = useI18n()
return (
- <Modal handleCloseClick={handleCloseClick}>
+ <Dialog
+ open={open}
+ onClose={handleCloseClick}
+ aria-label={t('ecogesture_info_modal.accessibility.window_title')}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper',
+ }}
+ >
<div className="info-header">
- <StyledIcon icon={HeaderQuestion} size={80} />
+ <Icon icon={HeaderQuestion} size={80} />
</div>
<div className="info-content">
<div className="info-title text-20-bold">
- {t('ECOGESTURE.INFO.HEADER')}
+ {t('ecogesture_info_modal.header')}
</div>
<div className="info-detail text-16-normal">
- {t('ECOGESTURE.INFO.TEXT')}
+ {t('ecogesture_info_modal.text')}
</div>
- <MuiButton
+ <Button
+ aria-label={t('ecogesture_info_modal.accessibility.button_close')}
onClick={handleCloseClick}
classes={{
root: 'btn-secondary-negative',
label: 'text-14-normal',
}}
>
- {t('ECOGESTURE.INFO.BUTTONTEXT')}
- </MuiButton>
+ {t('ecogesture_info_modal.button_close')}
+ </Button>
</div>
- </Modal>
+ </Dialog>
)
}
diff --git a/src/components/Ecogesture/EcogestureList.tsx b/src/components/Ecogesture/EcogestureList.tsx
index 0f543a6b1f9c54283140f2ffe41f126a191af481..641297978cd1f4d8beb8a3828f4b9bfa223f8d01 100644
--- a/src/components/Ecogesture/EcogestureList.tsx
+++ b/src/components/Ecogesture/EcogestureList.tsx
@@ -225,16 +225,18 @@ const EcogestureList: React.FC<EcogestureListProps> = ({
</div>
</>
- {openEcogestureModal && selectedEcogesture && (
+ {selectedEcogesture && (
<EcogestureModal
+ open={openEcogestureModal}
ecogesture={selectedEcogesture}
isAction={false}
handleCloseClick={handleCloseClick}
/>
)}
- {openInfoModal && (
- <EcogestureInfoModal handleCloseClick={toggleInfoModal} />
- )}
+ <EcogestureInfoModal
+ open={openInfoModal}
+ handleCloseClick={toggleInfoModal}
+ />
</div>
)
}
diff --git a/src/components/Ecogesture/EcogestureModal.spec.tsx b/src/components/Ecogesture/EcogestureModal.spec.tsx
index b0fbc7280cf463b2a7a78a9199b9a4d3a9ad1826..1dc3fd65d8c84634b1c08b95fa558ac0889c52e7 100644
--- a/src/components/Ecogesture/EcogestureModal.spec.tsx
+++ b/src/components/Ecogesture/EcogestureModal.spec.tsx
@@ -1,43 +1,44 @@
-import React from 'react'
-import { mount } from 'enzyme'
-import EcogestureModal from 'components/Ecogesture/EcogestureModal'
-import { ecogesturesData } from '../../../tests/__mocks__/ecogesturesData.mock'
-import configureStore from 'redux-mock-store'
-import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
-import { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock'
-import { Provider } from 'react-redux'
-
-jest.mock('cozy-ui/transpiled/react/I18n', () => {
- return {
- useI18n: jest.fn(() => {
- return {
- t: (str: string) => str,
- }
- }),
- }
-})
-
-const mockStore = configureStore([])
-
-describe('EcogestureModal component', () => {
- it('should be rendered correctly', () => {
- const store = mockStore({
- ecolyo: {
- global: globalStateData,
- challenge: challengeStateData,
- },
- })
- const wrapper = mount(
- <Provider store={store}>
- <EcogestureModal
- ecogesture={ecogesturesData[0]}
- isAction={false}
- handleCloseClick={jest.fn()}
- />
- </Provider>
- )
- expect(wrapper.find('.em-title').text()).toEqual(
- ecogesturesData[0].shortName
- )
- })
-})
+import React from 'react'
+import { mount } from 'enzyme'
+import EcogestureModal from 'components/Ecogesture/EcogestureModal'
+import { ecogesturesData } from '../../../tests/__mocks__/ecogesturesData.mock'
+import configureStore from 'redux-mock-store'
+import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
+import { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock'
+import { Provider } from 'react-redux'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+
+const mockStore = configureStore([])
+
+describe('EcogestureModal component', () => {
+ it('should be rendered correctly', () => {
+ const store = mockStore({
+ ecolyo: {
+ global: globalStateData,
+ challenge: challengeStateData,
+ },
+ })
+ const wrapper = mount(
+ <Provider store={store}>
+ <EcogestureModal
+ open={true}
+ ecogesture={ecogesturesData[0]}
+ isAction={false}
+ handleCloseClick={jest.fn()}
+ />
+ </Provider>
+ )
+ expect(wrapper.find('.em-title').text()).toEqual(
+ ecogesturesData[0].shortName
+ )
+ })
+})
diff --git a/src/components/Ecogesture/EcogestureModal.tsx b/src/components/Ecogesture/EcogestureModal.tsx
index c8982edb74e2febac050a1d349eccf942087e56f..b157ad8200be49fa4fe8f36f5cc4364070619e8c 100644
--- a/src/components/Ecogesture/EcogestureModal.tsx
+++ b/src/components/Ecogesture/EcogestureModal.tsx
@@ -1,22 +1,26 @@
import React, { useState, useEffect } from 'react'
+import './ecogestureModal.scss'
+import classNames from 'classnames'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { AppStore } from 'store'
+import { useSelector } from 'react-redux'
import { getPicto } from 'utils/picto'
+import useExploration from 'components/Hooks/useExploration'
+import { importIconbyId } from 'utils/utils'
import { Ecogesture } from 'models'
-import Modal from 'components/CommonKit/Modal/Modal'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { importIconbyId } from 'utils/utils'
-import './ecogestureModal.scss'
-import useExploration from 'components/Hooks/useExploration'
-import { AppStore } from 'store'
-import { useSelector } from 'react-redux'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import Dialog from '@material-ui/core/Dialog'
+import IconButton from '@material-ui/core/IconButton'
import MuiButton from '@material-ui/core/Button'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import EfficientyRating from './EfficientyRating'
-import classNames from 'classnames'
+import CloseIcon from 'assets/icons/ico/close.svg'
import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
interface EcogestureModalProps {
+ open: boolean
ecogesture: Ecogesture
isAction: boolean
handleCloseClick: () => void
@@ -24,6 +28,7 @@ interface EcogestureModalProps {
}
const EcogestureModal: React.FC<EcogestureModalProps> = ({
+ open,
ecogesture,
isAction,
handleCloseClick,
@@ -55,10 +60,32 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
}, [ecogesture, setValidExploration, currentChallenge])
return (
- <Modal border={true} handleCloseClick={handleCloseClick}>
+ <Dialog
+ open={open}
+ onClose={handleCloseClick}
+ aria-label={
+ isAction
+ ? t('ecogesture_modal.accessibility.window_title_action')
+ : t('ecogesture_modal.accessibility.window_title_ecogesture')
+ }
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper no-padding blue-border',
+ }}
+ >
+ <IconButton
+ aria-label={t('ecogesture_modal.accessibility.button_close')}
+ className="modal-paper-close-button"
+ onClick={handleCloseClick}
+ >
+ <Icon icon={CloseIcon} size={16} />
+ </IconButton>
<div className="em-header text-14-normal-uppercase">
- {isAction ? t('action.title_action') : t('ECOGESTURE.TITLE_ECOGESTURE')}
+ {isAction
+ ? t('ecogesture_modal.title_action')
+ : t('ecogesture_modal.title_ecogesture')}
</div>
+
<div className="em-root ecogesture-modal">
<div className="em-content">
<div className="em-content-box-img">
@@ -70,7 +97,7 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
<div className="em-detail">
<div className="em-detail-efficiency">
<span className="em-efficiency">
- {t('ECOGESTURE.EFFICIENCY')}
+ {t('ecogesture_modal.efficiency')}
</span>
<EfficientyRating result={Math.round(ecogesture.efficiency)} />
</div>
@@ -89,13 +116,16 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
<div className="long-name">{ecogesture.longName}</div>
{isAction ? (
<MuiButton
+ aria-label={t(
+ 'ecogesture_modal.accessibility.button_select_action'
+ )}
classes={{
root: 'btn-action-launch',
label: 'text-16-bold',
}}
onClick={selectEcogesture}
>
- {t('action.select_action')}
+ {t('ecogesture_modal.select_action')}
</MuiButton>
) : (
<>
@@ -107,6 +137,9 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
{ecogesture.longDescription}
</div>
<MuiButton
+ aria-label={t(
+ 'ecogesture_modal.accessibility.button_see_more_detail'
+ )}
onClick={toggleMoreDetail}
classes={{
root: 'btn-secondary-negative',
@@ -114,14 +147,14 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
}}
>
{isMoreDetail
- ? t('ECOGESTURE.SHOW_LESS')
- : t('ECOGESTURE.SHOW_MORE')}
+ ? t('ecogesture_modal.show_less')
+ : t('ecogesture_modal.show_more')}
</MuiButton>
</>
)}
</div>
</div>
- </Modal>
+ </Dialog>
)
}
diff --git a/src/components/Ecogesture/ecogestureModal.scss b/src/components/Ecogesture/ecogestureModal.scss
index 66dc8063090782561bf339ced77de5af4f5535e1..ec332bd67bda03bce772145245e77d8ac1948e69 100644
--- a/src/components/Ecogesture/ecogestureModal.scss
+++ b/src/components/Ecogesture/ecogestureModal.scss
@@ -4,7 +4,7 @@
.em-header {
color: $grey-bright;
border-bottom: 1px solid rgba(163, 163, 163, 0.4);
- padding-bottom: 1em;
+ padding: 1em 0;
width: 100%;
display: flex;
justify-content: center;
diff --git a/src/components/Feedback/FeedbackModal.spec.tsx b/src/components/Feedback/FeedbackModal.spec.tsx
index 0e970edd6dacc89d47424b2b7294ca12dec826b6..fc0a400a2acc8843116cbd24fb25b0b0e3ac1bd3 100644
--- a/src/components/Feedback/FeedbackModal.spec.tsx
+++ b/src/components/Feedback/FeedbackModal.spec.tsx
@@ -4,8 +4,6 @@ import { shallow } from 'enzyme'
import FeedbackModal from 'components/Feedback/FeedbackModal'
import MuiButton from '@material-ui/core/Button'
-import Modal from 'components/CommonKit/Modal/Modal'
-import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
import { userChallengeExplo1OnGoing } from '../../../tests/__mocks__/userChallengeData.mock'
const mockSendMail = jest.fn()
@@ -37,7 +35,7 @@ describe('FeedbackModal component', () => {
mockUseDispatch.mockReturnValue(jest.fn())
mockUseSelector.mockReturnValue(userChallengeExplo1OnGoing)
const component = shallow(
- <FeedbackModal handleCloseClick={handleFeedbackModalClose} />
+ <FeedbackModal open={true} handleCloseClick={handleFeedbackModalClose} />
).getElement()
expect(component).toMatchSnapshot()
})
@@ -48,7 +46,7 @@ describe('FeedbackModal functionnalities', () => {
mockUseSelector.mockReturnValue(userChallengeExplo1OnGoing)
const wrapper = shallow(
- <FeedbackModal handleCloseClick={handleFeedbackModalClose} />
+ <FeedbackModal open={true} handleCloseClick={handleFeedbackModalClose} />
)
const mockPlatform = 'platform'
@@ -106,16 +104,12 @@ describe('FeedbackModal functionnalities', () => {
mockUseDispatch.mockReturnValue(jest.fn())
mockUseSelector.mockReturnValue(userChallengeExplo1OnGoing)
const wrapper = shallow(
- <FeedbackModal handleCloseClick={handleFeedbackModalClose} />
+ <FeedbackModal open={true} handleCloseClick={handleFeedbackModalClose} />
)
wrapper
.find('#idFeedbackDescription')
.simulate('change', { target: { value: 'La description' } })
- wrapper
- .find(Modal)
- .dive()
- .find(StyledIconButton)
- .simulate('click')
+ wrapper.find('.modal-paper-close-button').simulate('click')
expect(handleFeedbackModalClose).toHaveBeenCalledTimes(1)
setTimeout(() => {
expect(wrapper.find('#idFeedbackDescription').prop('value')).toBeNull()
diff --git a/src/components/Feedback/FeedbackModal.tsx b/src/components/Feedback/FeedbackModal.tsx
index 9e8a7f09689c7be765056eca082e9a77f7436b93..29802cb8cab46156549458b4e5c2a2a6bf5b0584 100644
--- a/src/components/Feedback/FeedbackModal.tsx
+++ b/src/components/Feedback/FeedbackModal.tsx
@@ -1,234 +1,267 @@
-import React, { useState } from 'react'
-import { IuseI18n, useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { Client, useClient } from 'cozy-client'
-import { detect } from 'detect-browser'
-
-import Modal from 'components/CommonKit/Modal/Modal'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import MuiButton from '@material-ui/core/Button'
-import StyledIconBorderedButton from 'components/CommonKit/IconButton/StyledIconBorderedButton'
-
-import BugOnIcon from 'assets/icons/visu/feedback/bug-on.svg'
-import BugOffIcon from 'assets/icons/visu/feedback/bug-off.svg'
-import IdeaOnIcon from 'assets/icons/visu/feedback/idea-on.svg'
-import IdeaOffIcon from 'assets/icons/visu/feedback/idea-off.svg'
-import OtherOnIcon from 'assets/icons/visu/feedback/other-on.svg'
-import OtherOffIcon from 'assets/icons/visu/feedback/other-off.svg'
-import warningIcon from 'assets/icons/ico/warning-yellow.svg'
-import successIcon from 'assets/icons/visu/data-ok.svg'
-import MailService from 'services/mail.service'
-import './feedbackModal.scss'
-import useExploration from 'components/Hooks/useExploration'
-import { UserExplorationID } from 'enum/userExploration.enum'
-
-const FEEDBACK_EMAIL = 'ecolyo@grandlyon.com'
-const browser = detect()
-
-interface FeedbackModalProps {
- handleCloseClick: () => void
-}
-
-const FeedbackModal: React.FC<FeedbackModalProps> = ({
- handleCloseClick,
-}: FeedbackModalProps) => {
- const { t }: IuseI18n = useI18n()
- const client: Client = useClient()
- const [type, setType] = useState<string>('bug')
- const [description, setDescription] = useState<string>('')
- const [sending, setSending] = useState<boolean>(false)
- const [sent, setSent] = useState<boolean>(false)
- const [error, setError] = useState<string>('')
-
- const [, setValidExploration] = useExploration()
-
- const resetInputs = () => {
- setType('bug')
- setDescription('')
- setSent(false)
- setError('')
- }
-
- const closeModal = () => {
- resetInputs()
- handleCloseClick()
- }
-
- const sendEmail = async () => {
- setSending(true)
- if (description === '') {
- setError(t('feedback.error_empty_description'))
- } else {
- setValidExploration(UserExplorationID.EXPLORATION005)
- const envInfo =
- `Ecolyo` +
- `\nv${client.appMetadata.version}` +
- `\n\nLocation: ${window.location}` +
- '\n\nBrowser:' +
- `\nOn ${browser && browser.os}` +
- `\nFrom ${browser && browser.name}` +
- `\n${browser && browser.version}` +
- '\n\nNavigator:' +
- `\nOn ${navigator.platform}` +
- `\nFrom ${navigator.vendor}` +
- `\n${navigator.userAgent}`
-
- const mailContent =
- 'Type: ' +
- t('feedback.type_' + type) +
- '\n\nDescription:\n' +
- description +
- '\n' +
- envInfo
-
- const mailData = {
- mode: 'from',
- to: [{ name: 'Support', email: FEEDBACK_EMAIL }],
- subject: '[Ecolyo] - Feedbacks - ' + t('feedback.type_' + type),
- parts: [{ type: 'text/plain', body: mailContent }],
- }
- try {
- const mailService = new MailService()
- mailService.SendMail(client, mailData)
- } catch (e) {
- // eslint-disable-next-line no-console
- console.error(e)
- setError(t('feedback.error_sending'))
- }
- }
- setSending(false)
- setSent(true)
- }
-
- const validResult = () => {
- setSent(false)
- setError('')
- if (error === '') {
- resetInputs()
- closeModal()
- }
- }
-
- const getOnIcon = (_type: string) => {
- switch (_type) {
- case 'bug':
- return BugOnIcon
- case 'idea':
- return IdeaOnIcon
- case 'other':
- return OtherOnIcon
- default:
- return BugOnIcon
- }
- }
- const getOffIcon = (_type: string) => {
- switch (_type) {
- case 'bug':
- return BugOffIcon
- case 'idea':
- return IdeaOffIcon
- case 'other':
- return OtherOffIcon
- default:
- return BugOffIcon
- }
- }
-
- const selectorItem = (itemType: string) => {
- const selected = type === itemType
- return (
- <div className="fb-selector-item">
- <StyledIconBorderedButton
- icon={selected ? getOnIcon(itemType) : getOffIcon(itemType)}
- selected={selected}
- size={36}
- onClick={() => setType(itemType)}
- >
- <div
- className={
- selected
- ? 'fb-selector-item-selectedlabel text-10-bold'
- : 'fb-selector-item-label text-10-normal'
- }
- >
- {t('feedback.type_' + itemType)}
- </div>
- </StyledIconBorderedButton>
- </div>
- )
- }
-
- return (
- <Modal yellowBorder={true} handleCloseClick={closeModal}>
- {sent ? (
- <div className="fb-root">
- <div className="fb-content">
- {error === '' ? (
- <div className="fb-content-success">
- <div className="fb-icon">
- <StyledIcon icon={successIcon} size={48} />
- </div>
- <div>{t('feedback.success_sending')}</div>
- </div>
- ) : (
- <div className="fb-content-error">
- <div className="fb-icon">
- <StyledIcon icon={warningIcon} size={48} />
- </div>
- <div>{t('feedback.warning')}</div>
- <div>{error}</div>
- </div>
- )}
- <MuiButton
- onClick={validResult}
- variant={'contained'}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- >
- {t('feedback.ok')}
- </MuiButton>
- </div>
- </div>
- ) : (
- <div className="fb-root">
- <div className="fb-header text-18-bold">{t('feedback.title')}</div>
- <div className="fb-content">
- <div className="fb-label text-16-bold">{t('feedback.type')}</div>
- <div className="fb-selector">
- {selectorItem('bug')}
- {selectorItem('idea')}
- {selectorItem('other')}
- </div>
- <div className="fb-label text-16-bold">
- {t('feedback.description')}
- </div>
- <textarea
- id="idFeedbackDescription"
- className="fb-form fb-textarea"
- aria-describedby="Feedbacks description"
- placeholder={t('feedback.description_placeholder')}
- name="description"
- onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
- setDescription(e.target.value)
- }
- value={description}
- ></textarea>
- <MuiButton
- onClick={sendEmail}
- disabled={sending}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- >
- {t('feedback.send')}
- </MuiButton>
- </div>
- </div>
- )}
- </Modal>
- )
-}
-
-export default FeedbackModal
+import React, { useState } from 'react'
+import { IuseI18n, useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import { Client, useClient } from 'cozy-client'
+import { detect } from 'detect-browser'
+
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import IconButton from '@material-ui/core/IconButton'
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
+import StyledIconBorderedButton from 'components/CommonKit/IconButton/StyledIconBorderedButton'
+
+import BugOnIcon from 'assets/icons/visu/feedback/bug-on.svg'
+import BugOffIcon from 'assets/icons/visu/feedback/bug-off.svg'
+import IdeaOnIcon from 'assets/icons/visu/feedback/idea-on.svg'
+import IdeaOffIcon from 'assets/icons/visu/feedback/idea-off.svg'
+import OtherOnIcon from 'assets/icons/visu/feedback/other-on.svg'
+import OtherOffIcon from 'assets/icons/visu/feedback/other-off.svg'
+import WarningIcon from 'assets/icons/ico/warning-yellow.svg'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import SuccessIcon from 'assets/icons/visu/data-ok.svg'
+import MailService from 'services/mail.service'
+import './feedbackModal.scss'
+import useExploration from 'components/Hooks/useExploration'
+import { UserExplorationID } from 'enum/userExploration.enum'
+
+const FEEDBACK_EMAIL = 'ecolyo@grandlyon.com'
+const browser = detect()
+
+interface FeedbackModalProps {
+ open: boolean
+ handleCloseClick: () => void
+}
+
+const FeedbackModal: React.FC<FeedbackModalProps> = ({
+ open,
+ handleCloseClick,
+}: FeedbackModalProps) => {
+ const { t }: IuseI18n = useI18n()
+ const client: Client = useClient()
+ const [type, setType] = useState<string>('bug')
+ const [description, setDescription] = useState<string>('')
+ const [sending, setSending] = useState<boolean>(false)
+ const [sent, setSent] = useState<boolean>(false)
+ const [error, setError] = useState<string>('')
+
+ const [, setValidExploration] = useExploration()
+
+ const resetInputs = () => {
+ setType('bug')
+ setDescription('')
+ setSent(false)
+ setError('')
+ }
+
+ const closeModal = () => {
+ resetInputs()
+ handleCloseClick()
+ }
+
+ const sendEmail = async () => {
+ setSending(true)
+ if (description === '') {
+ setError(t('feedback.error_empty_description'))
+ } else {
+ setValidExploration(UserExplorationID.EXPLORATION005)
+ const envInfo =
+ `Ecolyo` +
+ `\nv${client.appMetadata.version}` +
+ `\n\nLocation: ${window.location}` +
+ '\n\nBrowser:' +
+ `\nOn ${browser && browser.os}` +
+ `\nFrom ${browser && browser.name}` +
+ `\n${browser && browser.version}` +
+ '\n\nNavigator:' +
+ `\nOn ${navigator.platform}` +
+ `\nFrom ${navigator.vendor}` +
+ `\n${navigator.userAgent}`
+
+ const mailContent =
+ 'Type: ' +
+ t('feedback.type_' + type) +
+ '\n\nDescription:\n' +
+ description +
+ '\n' +
+ envInfo
+
+ const mailData = {
+ mode: 'from',
+ to: [{ name: 'Support', email: FEEDBACK_EMAIL }],
+ subject: '[Ecolyo] - Feedbacks - ' + t('feedback.type_' + type),
+ parts: [{ type: 'text/plain', body: mailContent }],
+ }
+ try {
+ const mailService = new MailService()
+ mailService.SendMail(client, mailData)
+ } catch (e) {
+ // eslint-disable-next-line no-console
+ console.error(e)
+ setError(t('feedback.error_sending'))
+ }
+ }
+ setSending(false)
+ setSent(true)
+ }
+
+ const validResult = () => {
+ setSent(false)
+ setError('')
+ if (error === '') {
+ resetInputs()
+ closeModal()
+ }
+ }
+
+ const getOnIcon = (_type: string) => {
+ switch (_type) {
+ case 'bug':
+ return BugOnIcon
+ case 'idea':
+ return IdeaOnIcon
+ case 'other':
+ return OtherOnIcon
+ default:
+ return BugOnIcon
+ }
+ }
+ const getOffIcon = (_type: string) => {
+ switch (_type) {
+ case 'bug':
+ return BugOffIcon
+ case 'idea':
+ return IdeaOffIcon
+ case 'other':
+ return OtherOffIcon
+ default:
+ return BugOffIcon
+ }
+ }
+
+ const selectorItem = (itemType: string) => {
+ const selected = type === itemType
+ return (
+ <div className="fb-selector-item">
+ <StyledIconBorderedButton
+ aria-label={t('feedback.accessibility.select_type_' + itemType)}
+ icon={selected ? getOnIcon(itemType) : getOffIcon(itemType)}
+ selected={selected}
+ autoFocus={selected}
+ size={36}
+ onClick={() => setType(itemType)}
+ >
+ <div
+ className={
+ selected
+ ? 'fb-selector-item-selectedlabel text-10-bold'
+ : 'fb-selector-item-label text-10-normal'
+ }
+ >
+ {t('feedback.type_' + itemType)}
+ </div>
+ </StyledIconBorderedButton>
+ </div>
+ )
+ }
+
+ return (
+ <Dialog
+ open={open}
+ disableBackdropClick
+ disableEscapeKeyDown
+ onClose={closeModal}
+ aria-label={t('feedback.accessibility.window_title')}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper yellow-border',
+ }}
+ >
+ <IconButton
+ aria-label={t('feedback.accessibility.button_close')}
+ className="modal-paper-close-button"
+ onClick={closeModal}
+ >
+ <Icon icon={CloseIcon} size={16} />
+ </IconButton>
+ <div className="fb-root">
+ {sent ? (
+ <>
+ <div className="fb-content">
+ {error === '' ? (
+ <div className="fb-content-success">
+ <div className="fb-icon">
+ <StyledIcon icon={SuccessIcon} size={48} />
+ </div>
+ <div>{t('feedback.success_sending')}</div>
+ </div>
+ ) : (
+ <div className="fb-content-error">
+ <div className="fb-icon">
+ <StyledIcon icon={WarningIcon} size={48} />
+ </div>
+ <div>{t('feedback.warning')}</div>
+ <div>{error}</div>
+ </div>
+ )}
+ <Button
+ aria-label={t('feedback.accessibility.button_ok')}
+ onClick={validResult}
+ variant={'contained'}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-16-bold',
+ }}
+ >
+ {t('feedback.ok')}
+ </Button>
+ </div>
+ </>
+ ) : (
+ <>
+ <div className="fb-header text-18-bold">{t('feedback.title')}</div>
+ <form className="fb-content">
+ <label htmlFor="feedbackType" className="fb-label text-16-bold">
+ {t('feedback.type')}
+ </label>
+ <fieldset id="feedbackType" className="fb-selector">
+ {selectorItem('bug')}
+ {selectorItem('idea')}
+ {selectorItem('other')}
+ </fieldset>
+ <label
+ htmlFor="idFeedbackDescription"
+ className="fb-label text-16-bold"
+ >
+ {t('feedback.description')}
+ </label>
+ <textarea
+ id="idFeedbackDescription"
+ className="fb-form fb-textarea"
+ placeholder={t('feedback.description_placeholder')}
+ name="description"
+ onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+ setDescription(e.target.value)
+ }
+ value={description}
+ ></textarea>
+ <Button
+ aria-label={t('feedback.accessibility.button_send')}
+ onClick={sendEmail}
+ disabled={sending}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-16-bold',
+ }}
+ type="submit"
+ >
+ {t('feedback.send')}
+ </Button>
+ </form>
+ </>
+ )}
+ </div>
+ </Dialog>
+ )
+}
+
+export default FeedbackModal
diff --git a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
index 586eeec339215514c5de391884be73fbade4bccd..f8ba0aaaf80bc0723d250f3109eb88bcd42b82aa 100644
--- a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
+++ b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
@@ -1,105 +1,137 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`FeedbackModal component should render the component 1`] = `
-<Modal
- handleCloseClick={[Function]}
- yellowBorder={true}
+<ForwardRef(WithStyles)
+ aria-label="feedback.accessibility.window_title"
+ classes={
+ Object {
+ "paper": "modal-paper yellow-border",
+ "root": "modal-root",
+ }
+ }
+ disableBackdropClick={true}
+ disableEscapeKeyDown={true}
+ onClose={[Function]}
+ open={true}
>
+ <ForwardRef(WithStyles)
+ aria-label="feedback.accessibility.button_close"
+ className="modal-paper-close-button"
+ onClick={[Function]}
+ >
+ <Icon
+ icon="test-file-stub"
+ size={16}
+ spin={false}
+ />
+ </ForwardRef(WithStyles)>
<div
className="fb-root"
>
- <div
- className="fb-header text-18-bold"
- >
- feedback.title
- </div>
- <div
- className="fb-content"
- >
+ <React.Fragment>
<div
- className="fb-label text-16-bold"
+ className="fb-header text-18-bold"
>
- feedback.type
+ feedback.title
</div>
- <div
- className="fb-selector"
+ <form
+ className="fb-content"
>
- <div
- className="fb-selector-item"
+ <label
+ className="fb-label text-16-bold"
+ htmlFor="feedbackType"
+ >
+ feedback.type
+ </label>
+ <fieldset
+ className="fb-selector"
+ id="feedbackType"
>
- <StyledIconBorderedButton
- icon="test-file-stub"
- onClick={[Function]}
- selected={true}
- size={36}
+ <div
+ className="fb-selector-item"
>
- <div
- className="fb-selector-item-selectedlabel text-10-bold"
+ <StyledIconBorderedButton
+ aria-label="feedback.accessibility.select_type_bug"
+ autoFocus={true}
+ icon="test-file-stub"
+ onClick={[Function]}
+ selected={true}
+ size={36}
>
- feedback.type_bug
- </div>
- </StyledIconBorderedButton>
- </div>
- <div
- className="fb-selector-item"
- >
- <StyledIconBorderedButton
- icon="test-file-stub"
- onClick={[Function]}
- selected={false}
- size={36}
+ <div
+ className="fb-selector-item-selectedlabel text-10-bold"
+ >
+ feedback.type_bug
+ </div>
+ </StyledIconBorderedButton>
+ </div>
+ <div
+ className="fb-selector-item"
>
- <div
- className="fb-selector-item-label text-10-normal"
+ <StyledIconBorderedButton
+ aria-label="feedback.accessibility.select_type_idea"
+ autoFocus={false}
+ icon="test-file-stub"
+ onClick={[Function]}
+ selected={false}
+ size={36}
>
- feedback.type_idea
- </div>
- </StyledIconBorderedButton>
- </div>
- <div
- className="fb-selector-item"
- >
- <StyledIconBorderedButton
- icon="test-file-stub"
- onClick={[Function]}
- selected={false}
- size={36}
+ <div
+ className="fb-selector-item-label text-10-normal"
+ >
+ feedback.type_idea
+ </div>
+ </StyledIconBorderedButton>
+ </div>
+ <div
+ className="fb-selector-item"
>
- <div
- className="fb-selector-item-label text-10-normal"
+ <StyledIconBorderedButton
+ aria-label="feedback.accessibility.select_type_other"
+ autoFocus={false}
+ icon="test-file-stub"
+ onClick={[Function]}
+ selected={false}
+ size={36}
>
- feedback.type_other
- </div>
- </StyledIconBorderedButton>
- </div>
- </div>
- <div
- className="fb-label text-16-bold"
- >
- feedback.description
- </div>
- <textarea
- aria-describedby="Feedbacks description"
- className="fb-form fb-textarea"
- id="idFeedbackDescription"
- name="description"
- onChange={[Function]}
- placeholder="feedback.description_placeholder"
- value=""
- />
- <ForwardRef(WithStyles)
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
+ <div
+ className="fb-selector-item-label text-10-normal"
+ >
+ feedback.type_other
+ </div>
+ </StyledIconBorderedButton>
+ </div>
+ </fieldset>
+ <label
+ className="fb-label text-16-bold"
+ htmlFor="idFeedbackDescription"
+ >
+ feedback.description
+ </label>
+ <textarea
+ className="fb-form fb-textarea"
+ id="idFeedbackDescription"
+ name="description"
+ onChange={[Function]}
+ placeholder="feedback.description_placeholder"
+ value=""
+ />
+ <ForwardRef(WithStyles)
+ aria-label="feedback.accessibility.button_send"
+ classes={
+ Object {
+ "label": "text-16-bold",
+ "root": "btn-highlight",
+ }
}
- }
- disabled={false}
- onClick={[Function]}
- >
- feedback.send
- </ForwardRef(WithStyles)>
- </div>
+ disabled={false}
+ onClick={[Function]}
+ type="submit"
+ >
+ feedback.send
+ </ForwardRef(WithStyles)>
+ </form>
+ </React.Fragment>
</div>
-</Modal>
+</ForwardRef(WithStyles)>
`;
diff --git a/src/components/Feedback/feedbackModal.scss b/src/components/Feedback/feedbackModal.scss
index 0c9e8a0e1abfd70da32f4fe070631743ba40ebfa..e41fdb4bc2732b42edf47d1659c284791efe2fc8 100644
--- a/src/components/Feedback/feedbackModal.scss
+++ b/src/components/Feedback/feedbackModal.scss
@@ -1,82 +1,85 @@
-@import 'src/styles/base/color';
-
-.fb-root {
- overflow-y: auto;
- min-width: 70%;
- .fb-header {
- color: $gold-shadow;
- padding: 1.5rem 1.5rem 0rem 1.5rem;
- display: flex;
- justify-content: center;
- }
-
- .fb-content {
- padding: 1rem 1.5rem 1.5rem 1.5rem;
- display: flex;
- flex-direction: column;
- .fb-content-success {
- color: $grey-bright;
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
- }
- .fb-content-error {
- color: $grey-bright;
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
- }
- .fb-icon {
- display: flex;
- justify-content: center;
- margin: 0 0 1.5rem 0;
- }
- .fb-label {
- margin: 0.5rem 0 0 0;
- }
- .fb-selector {
- margin: 0.5rem 0;
- display: flex;
- flex-direction: row;
- align-content: space-around;
- justify-content: space-around;
- .fb-selector-item {
- height: 3.125rem;
- width: 3.125rem;
- .fb-selector-item-label {
- color: $grey-bright;
- }
- .fb-selector-item-selectedlabel {
- color: $white;
- }
- }
- }
- .fb-form {
- margin: 0.5rem 0;
- border: 1px solid $grey-dark;
- border-radius: 4px;
- color: $grey-bright;
- background: rgba(0, 0, 0, 0.3);
- padding: 0 1rem;
- outline: none;
- }
- .fb-form:focus {
- border: 1px solid $gold-shadow;
- }
- .fb-textarea {
- height: 8.725rem;
- padding: 0.5rem 1rem;
- resize: none;
- }
- .fb-input {
- height: 2rem;
- }
- button.btn-highlight {
- max-width: 9.375rem;
- align-self: center;
- margin-top: 1rem;
- }
- }
-}
+@import 'src/styles/base/color';
+
+.fb-root {
+ overflow-y: auto;
+ min-width: 70%;
+ margin: 1rem 0;
+ .fb-header {
+ color: $gold-shadow;
+ padding: 0.5rem 0.5rem 0rem 0.5rem;
+ display: flex;
+ justify-content: center;
+ }
+
+ .fb-content {
+ padding: 1rem 0.5rem 0.5rem 0.5rem;
+ display: flex;
+ flex-direction: column;
+ .fb-content-success {
+ color: $grey-bright;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ }
+ .fb-content-error {
+ color: $grey-bright;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ }
+ .fb-icon {
+ display: flex;
+ justify-content: center;
+ margin: 0 0 1.5rem 0;
+ }
+ .fb-label {
+ margin: 0.5rem 0 0 0;
+ }
+ .fb-selector {
+ margin: 0.5rem 0;
+ display: flex;
+ flex-direction: row;
+ align-content: space-around;
+ justify-content: space-around;
+ padding: 0;
+ border: none;
+ .fb-selector-item {
+ height: 3.125rem;
+ width: 3.125rem;
+ .fb-selector-item-label {
+ color: $grey-bright;
+ }
+ .fb-selector-item-selectedlabel {
+ color: $white;
+ }
+ }
+ }
+ .fb-form {
+ margin: 0.5rem 0;
+ border: 1px solid $grey-dark;
+ border-radius: 4px;
+ color: $grey-bright;
+ background: rgba(0, 0, 0, 0.3);
+ padding: 0 1rem;
+ outline: none;
+ }
+ .fb-form:focus {
+ border: 1px solid $gold-shadow;
+ }
+ .fb-textarea {
+ height: 8.725rem;
+ padding: 0.5rem 1rem;
+ resize: none;
+ }
+ .fb-input {
+ height: 2rem;
+ }
+ button.btn-highlight {
+ max-width: 9.375rem;
+ align-self: center;
+ margin-top: 1rem;
+ }
+ }
+}
diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx
index 17b76108f3128d5be62d8615d0bf34beb168851b..88f3f6f74e403f61d84d3dcdba78dbeac7896106 100644
--- a/src/components/FluidChart/FluidChart.tsx
+++ b/src/components/FluidChart/FluidChart.tsx
@@ -148,8 +148,9 @@ const FluidChart: React.FC<FluidChartProps> = ({
</div>
) : null}
</div>
- {fluidStatus.length > 0 && openOldFluidDataModal && (
+ {fluidStatus.length > 0 && (
<OldFluidDataModal
+ open={openOldFluidDataModal}
fluidStatus={fluidStatus}
fluidOldData={fluidOldData}
handleCloseClick={handleCloseClick}
diff --git a/src/components/Header/CozyBar.tsx b/src/components/Header/CozyBar.tsx
index 6abfa5911f80ea028c5ab5c3af93a7dd43884be4..4923fc89839aaa54a88c31f754b978e515c7c74b 100644
--- a/src/components/Header/CozyBar.tsx
+++ b/src/components/Header/CozyBar.tsx
@@ -1,72 +1,74 @@
-import React from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useSelector, useDispatch } from 'react-redux'
-import { AppStore } from 'store'
-import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
-import { useHistory } from 'react-router-dom'
-
-import { ScreenType } from 'enum/screen.enum'
-
-import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
-import FeedbacksIcon from 'assets/icons/ico/feedbacks.svg'
-import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
-
-interface CozyBarProps {
- titleKey?: string
- displayBackArrow?: boolean
-}
-
-const CozyBar = ({
- titleKey = 'COMMON.APP_TITLE',
- displayBackArrow = false,
-}: CozyBarProps) => {
- const { t } = useI18n()
- const history = useHistory()
- const dispatch = useDispatch()
- const { BarLeft, BarCenter, BarRight } = cozy.bar
- const { screenType } = useSelector((state: AppStore) => state.ecolyo.global)
-
- const handleClickBack = () => {
- history.goBack()
- }
-
- const handleClickFeedbacks = () => {
- dispatch(updateModalIsFeedbacksOpen(true))
- }
-
- const cozyBarCustom = (screen?: ScreenType) => {
- if (screen === ScreenType.MOBILE) {
- return (
- <React.Fragment>
- {displayBackArrow && (
- <BarLeft>
- <StyledIconButton
- className="cv-button"
- icon={BackArrowIcon}
- onClick={() => handleClickBack()}
- />
- </BarLeft>
- )}
- <BarCenter>
- <div className="cozy-bar">
- <span className="app-title">{t(titleKey)}</span>
- </div>
- </BarCenter>
- <BarRight>
- <StyledIconButton
- className="cv-button"
- icon={FeedbacksIcon}
- size={40}
- onClick={() => handleClickFeedbacks()}
- />
- </BarRight>
- </React.Fragment>
- )
- }
- return null
- }
-
- return cozyBarCustom(screenType)
-}
-
-export default CozyBar
+import React from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useSelector, useDispatch } from 'react-redux'
+import { AppStore } from 'store'
+import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
+import { useHistory } from 'react-router-dom'
+
+import { ScreenType } from 'enum/screen.enum'
+
+import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
+import FeedbacksIcon from 'assets/icons/ico/feedbacks.svg'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+
+interface CozyBarProps {
+ titleKey?: string
+ displayBackArrow?: boolean
+}
+
+const CozyBar = ({
+ titleKey = 'COMMON.APP_TITLE',
+ displayBackArrow = false,
+}: CozyBarProps) => {
+ const { t } = useI18n()
+ const history = useHistory()
+ const dispatch = useDispatch()
+ const { BarLeft, BarCenter, BarRight } = cozy.bar
+ const { screenType } = useSelector((state: AppStore) => state.ecolyo.global)
+
+ const handleClickBack = () => {
+ history.goBack()
+ }
+
+ const handleClickFeedbacks = () => {
+ dispatch(updateModalIsFeedbacksOpen(true))
+ }
+
+ const cozyBarCustom = (screen?: ScreenType) => {
+ if (screen === ScreenType.MOBILE) {
+ return (
+ <React.Fragment>
+ {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>
+ <StyledIconButton
+ aria-label={t('header.accessibility.button_open_feedbacks')}
+ className="cv-button"
+ icon={FeedbacksIcon}
+ size={40}
+ onClick={handleClickFeedbacks}
+ />
+ </BarRight>
+ </React.Fragment>
+ )
+ }
+ return null
+ }
+
+ return cozyBarCustom(screenType)
+}
+
+export default CozyBar
diff --git a/src/components/Header/Header.spec.tsx b/src/components/Header/Header.spec.tsx
index 60c6c69a1753df29da79b1d88dd872bc2f4ed080..5e59a39939b69721ba9c81c757ca166267182c7d 100644
--- a/src/components/Header/Header.spec.tsx
+++ b/src/components/Header/Header.spec.tsx
@@ -7,6 +7,7 @@ import Header from 'components/Header/Header'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { ScreenType } from 'enum/screen.enum'
+import IconButton from '@material-ui/core/IconButton'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -85,7 +86,7 @@ describe('Header component', () => {
).toEqual('KEY')
expect(
wrapper
- .find('StyledIconButton')
+ .find(IconButton)
.find('.header-back-button')
.first()
).toHaveLength(1)
@@ -107,7 +108,7 @@ describe('Header component', () => {
</Provider>
)
wrapper
- .find('StyledIconButton')
+ .find(IconButton)
.find('.header-back-button')
.first()
.simulate('click')
@@ -130,7 +131,7 @@ describe('Header component', () => {
)
const updateModalSpy = jest.spyOn(ModalAction, 'updateModalIsFeedbacksOpen')
wrapper
- .find('StyledIconButton')
+ .find(IconButton)
.find('.header-feedbacks-button')
.first()
.simulate('click')
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 6fc25e105a761d99a59e0d05309112f49e8642cf..038b0178973e916eb127df1eaf37c0ef042d2bc7 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,119 +1,123 @@
-import React, { useCallback, useEffect, useRef } from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useSelector, useDispatch } from 'react-redux'
-import { AppStore } from 'store'
-import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
-import { useHistory } from 'react-router-dom'
-
-import { ScreenType } from 'enum/screen.enum'
-
-import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
-import FeedbacksIcon from 'assets/icons/ico/feedbacks.svg'
-import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
-
-interface HeaderProps {
- textKey?: string
- desktopTitleKey?: string
- displayBackArrow?: boolean
- children?: React.ReactNode
- setHeaderHeight(height: number): void
-}
-
-const Header: React.FC<HeaderProps> = ({
- textKey,
- desktopTitleKey,
- displayBackArrow,
- children,
- setHeaderHeight,
-}: HeaderProps) => {
- const { t } = useI18n()
- const history = useHistory()
- const header = useRef(null)
- const dispatch = useDispatch()
- const { screenType } = useSelector((state: AppStore) => state.ecolyo.global)
-
- const cozyBarHeight = 48
- const headerBottomHeight = 8
-
- const handleClickBack = useCallback(() => {
- history.goBack()
- }, [history])
-
- const handleClickFeedbacks = () => {
- dispatch(updateModalIsFeedbacksOpen(true))
- }
-
- useEffect(() => {
- if (screenType === ScreenType.MOBILE) {
- setHeaderHeight(
- header.current
- ? header.current.clientHeight - cozyBarHeight - headerBottomHeight
- : 0
- )
- } else {
- setHeaderHeight(
- header.current ? header.current.clientHeight - headerBottomHeight : 0
- )
- }
- }, [screenType, children, setHeaderHeight])
-
- return (
- <div className="header" ref={header}>
- <div className="header-top">
- <div className="header-content">
- <div
- className={
- !textKey && !desktopTitleKey
- ? 'header-content-top header-content-top-right'
- : 'header-content-top'
- }
- >
- {textKey && (
- <div
- className={`header-text ${
- screenType === ScreenType.MOBILE
- ? 'text-14-normal-uppercase'
- : 'text-22-bold'
- }`}
- >
- {t(textKey)}
- </div>
- )}
- {desktopTitleKey && (
- <div
- className={`header-text-desktop ${
- screenType === ScreenType.MOBILE
- ? 'text-14-normal-uppercase'
- : 'text-22-bold'
- }`}
- >
- {displayBackArrow && (
- <StyledIconButton
- className="header-back-button"
- icon={BackArrowIcon}
- onClick={handleClickBack}
- />
- )}
- {t(desktopTitleKey)}
- </div>
- )}
- <StyledIconButton
- className={
- !textKey && !desktopTitleKey
- ? 'header-feedbacks-button right'
- : 'header-feedbacks-button'
- }
- icon={FeedbacksIcon}
- size={40}
- onClick={handleClickFeedbacks}
- />
- </div>
- {children}
- </div>
- </div>
- <div className="header-bar"></div>
- </div>
- )
-}
-
-export default Header
+import React, { useCallback, useEffect, useRef } from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useSelector, useDispatch } from 'react-redux'
+import { AppStore } from 'store'
+import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
+import { useHistory } from 'react-router-dom'
+
+import { ScreenType } from 'enum/screen.enum'
+
+import IconButton from '@material-ui/core/IconButton'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
+import FeedbacksIcon from 'assets/icons/ico/feedbacks.svg'
+
+interface HeaderProps {
+ textKey?: string
+ desktopTitleKey?: string
+ displayBackArrow?: boolean
+ children?: React.ReactNode
+ setHeaderHeight(height: number): void
+}
+
+const Header: React.FC<HeaderProps> = ({
+ textKey,
+ desktopTitleKey,
+ displayBackArrow,
+ children,
+ setHeaderHeight,
+}: HeaderProps) => {
+ const { t } = useI18n()
+ const history = useHistory()
+ const header = useRef(null)
+ const dispatch = useDispatch()
+ const { screenType } = useSelector((state: AppStore) => state.ecolyo.global)
+
+ const cozyBarHeight = 48
+ const headerBottomHeight = 8
+
+ const handleClickBack = useCallback(() => {
+ history.goBack()
+ }, [history])
+
+ const handleClickFeedbacks = () => {
+ dispatch(updateModalIsFeedbacksOpen(true))
+ }
+
+ useEffect(() => {
+ if (screenType === ScreenType.MOBILE) {
+ setHeaderHeight(
+ header.current
+ ? header.current.clientHeight - cozyBarHeight - headerBottomHeight
+ : 0
+ )
+ } else {
+ setHeaderHeight(
+ header.current ? header.current.clientHeight - headerBottomHeight : 0
+ )
+ }
+ }, [screenType, children, setHeaderHeight])
+
+ return (
+ <div className="header" ref={header}>
+ <div className="header-top">
+ <div className="header-content">
+ <div
+ className={
+ !textKey && !desktopTitleKey
+ ? 'header-content-top header-content-top-right'
+ : 'header-content-top'
+ }
+ >
+ {textKey && (
+ <div
+ className={`header-text ${
+ screenType === ScreenType.MOBILE
+ ? 'text-14-normal-uppercase'
+ : 'text-22-bold'
+ }`}
+ >
+ {t(textKey)}
+ </div>
+ )}
+ {desktopTitleKey && (
+ <div
+ className={`header-text-desktop ${
+ screenType === ScreenType.MOBILE
+ ? 'text-14-normal-uppercase'
+ : 'text-22-bold'
+ }`}
+ >
+ {displayBackArrow && (
+ <IconButton
+ aria-label={t('header.accessibility.button_back')}
+ className="header-back-button"
+ onClick={handleClickBack}
+ >
+ <Icon icon={BackArrowIcon} size={16} />
+ </IconButton>
+ )}
+ {t(desktopTitleKey)}
+ </div>
+ )}
+ <IconButton
+ aria-label={t('header.accessibility.button_open_feedbacks')}
+ className={
+ !textKey && !desktopTitleKey
+ ? 'header-feedbacks-button right'
+ : 'header-feedbacks-button'
+ }
+ onClick={handleClickFeedbacks}
+ >
+ <Icon icon={FeedbacksIcon} size={40} />
+ </IconButton>
+ </div>
+ {children}
+ </div>
+ </div>
+ <div className="header-bar"></div>
+ </div>
+ )
+}
+
+export default Header
diff --git a/src/components/Home/OldFluidDataModal.spec.tsx b/src/components/Home/OldFluidDataModal.spec.tsx
index bd1fb404da77168006c0185f40a9186c101d9ce6..19af0e9fc5f9f2914f53a1f2d0b8b30a25cbf421 100644
--- a/src/components/Home/OldFluidDataModal.spec.tsx
+++ b/src/components/Home/OldFluidDataModal.spec.tsx
@@ -1,52 +1,55 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-import OldFluidDataModal from 'components/Home/OldFluidDataModal'
-import { FluidType } from 'enum/fluid.enum'
-
-jest.mock('cozy-ui/transpiled/react/I18n', () => {
- return {
- useI18n: jest.fn(() => {
- return {
- t: (str: string) => str,
- }
- }),
- }
-})
-const handleCloseClick = jest.fn()
-
-describe('OldFluidDataModal component', () => {
- it('should be rendered correctly', () => {
- const component = shallow(
- <OldFluidDataModal
- handleCloseClick={handleCloseClick}
- fluidStatus={[]}
- fluidOldData={[FluidType.ELECTRICITY, FluidType.GAS]}
- />
- ).getElement()
- expect(component).toMatchSnapshot()
- })
- it('should render errored konnectors', () => {
- //TODO Change useState konnectorError in order to test the other part of component
- const wrapper = shallow(
- <OldFluidDataModal
- handleCloseClick={handleCloseClick}
- fluidStatus={[]}
- fluidOldData={[FluidType.ELECTRICITY, FluidType.GAS]}
- />
- )
-
- setTimeout(() => {
- expect(wrapper.find('.buttons').find('.btn-highlight').length).toEqual(1)
- }, 300)
- })
- it('should render fluid provider error', () => {
- const wrapper = shallow(
- <OldFluidDataModal
- handleCloseClick={handleCloseClick}
- fluidStatus={[]}
- fluidOldData={[FluidType.ELECTRICITY, FluidType.GAS]}
- />
- )
- expect(wrapper.exists('.providerProblem')).toEqual(true)
- })
-})
+import React from 'react'
+import { shallow } from 'enzyme'
+import OldFluidDataModal from 'components/Home/OldFluidDataModal'
+import { FluidType } from 'enum/fluid.enum'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+const handleCloseClick = jest.fn()
+
+describe('OldFluidDataModal component', () => {
+ it('should be rendered correctly', () => {
+ const component = shallow(
+ <OldFluidDataModal
+ open={true}
+ handleCloseClick={handleCloseClick}
+ fluidStatus={[]}
+ fluidOldData={[FluidType.ELECTRICITY, FluidType.GAS]}
+ />
+ ).getElement()
+ expect(component).toMatchSnapshot()
+ })
+ it('should render errored konnectors', () => {
+ //TODO Change useState konnectorError in order to test the other part of component
+ const wrapper = shallow(
+ <OldFluidDataModal
+ open={true}
+ handleCloseClick={handleCloseClick}
+ fluidStatus={[]}
+ fluidOldData={[FluidType.ELECTRICITY, FluidType.GAS]}
+ />
+ )
+
+ setTimeout(() => {
+ expect(wrapper.find('.buttons').find('.btn-highlight').length).toEqual(1)
+ }, 300)
+ })
+ it('should render fluid provider error', () => {
+ const wrapper = shallow(
+ <OldFluidDataModal
+ open={true}
+ handleCloseClick={handleCloseClick}
+ fluidStatus={[]}
+ fluidOldData={[FluidType.ELECTRICITY, FluidType.GAS]}
+ />
+ )
+ expect(wrapper.exists('.providerProblem')).toEqual(true)
+ })
+})
diff --git a/src/components/Home/OldFluidDataModal.tsx b/src/components/Home/OldFluidDataModal.tsx
index 5b4043c643dfbdc0e6a26af0bc0de99828567a2d..638133612ec6f4b2bd7b6b2e86448ae97fef7da0 100644
--- a/src/components/Home/OldFluidDataModal.tsx
+++ b/src/components/Home/OldFluidDataModal.tsx
@@ -1,21 +1,24 @@
import React, { useState, useEffect, useCallback } from 'react'
+import './oldFluidDataModal.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Modal from 'components/CommonKit/Modal/Modal'
-import WarnCross from 'assets/icons/ico/warn-cross.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import MuiButton from '@material-ui/core/Button'
import { useHistory } from 'react-router-dom'
-import { FluidState, FluidType } from 'enum/fluid.enum'
import { FluidStatus } from 'models'
-import './oldFluidDataModal.scss'
+import { FluidState, FluidType } from 'enum/fluid.enum'
+import WarnCross from 'assets/icons/ico/warn-cross.svg'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import Dialog from '@material-ui/core/Dialog'
+import Button from '@material-ui/core/Button'
+
interface OldFluidDataModalProps {
+ open: boolean
fluidStatus: FluidStatus[]
fluidOldData: FluidType[]
handleCloseClick: () => void
}
const OldFluidDataModal: React.FC<OldFluidDataModalProps> = ({
+ open,
fluidStatus,
fluidOldData,
handleCloseClick,
@@ -47,16 +50,27 @@ const OldFluidDataModal: React.FC<OldFluidDataModalProps> = ({
}, [checkFluidDataDate])
return (
- <Modal handleCloseClick={handleCloseClick}>
+ <Dialog
+ open={open}
+ onClose={handleCloseClick}
+ aria-label={t('old_fluid_data_modal.accessibility.window_title')}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper',
+ }}
+ >
<div className="od-content">
<div className="od-warning">
- <StyledIcon icon={WarnCross} size={40} />
- <p className="text-20-bold">{t('modalOldData.errorTxt')}</p>
+ <Icon icon={WarnCross} size={40} />
+ <p className="text-20-bold">{t('old_fluid_data_modal.errorTxt')}</p>
</div>
- <p className="od-main text-16-bold"> {t('modalOldData.oldData')}</p>
+ <p className="od-main text-16-bold">
+ {' '}
+ {t('old_fluid_data_modal.oldData')}
+ </p>
{konnectorError ? (
<div className="verifyState">
- <p className="text-16-normal">{t('modalOldData.verify')}</p>
+ <p className="text-16-normal">{t('old_fluid_data_modal.verify')}</p>
<ul className="od-konnectorsList">
{erroredKonnectors.map((err, index) => {
return (
@@ -70,29 +84,37 @@ const OldFluidDataModal: React.FC<OldFluidDataModalProps> = ({
})}
</ul>
<div className="buttons">
- <MuiButton
+ <Button
+ aria-label={t(
+ 'old_fluid_data_modal.accessibility.button_later'
+ )}
onClick={handleCloseClick}
classes={{
root: 'btn-secondary-positive',
label: 'text-16-normal',
}}
>
- {t('modalOldData.later')}
- </MuiButton>
- <MuiButton
+ {t('old_fluid_data_modal.later')}
+ </Button>
+ <Button
+ aria-label={t(
+ 'old_fluid_data_modal.accessibility.button_goto_konnector'
+ )}
onClick={redirectToKonnectors}
classes={{
root: 'btn-highlight',
label: 'text-16-bold',
}}
>
- {t('modalOldData.accessButton')}
- </MuiButton>
+ {t('old_fluid_data_modal.accessButton')}
+ </Button>
</div>
</div>
) : (
<div className="providerProblem">
- <p className="text-16-normal">{t('modalOldData.problem')}</p>
+ <p className="text-16-normal">
+ {t('old_fluid_data_modal.problem')}
+ </p>
<ul className="od-konnectorsList">
{fluidOldData.map((err, index) => {
return (
@@ -105,20 +127,23 @@ const OldFluidDataModal: React.FC<OldFluidDataModalProps> = ({
)
})}
</ul>
- <p className="text-16-normal">{t('modalOldData.contact')}</p>
- <MuiButton
+ <p className="text-16-normal">
+ {t('old_fluid_data_modal.contact')}
+ </p>
+ <Button
+ aria-label={t('old_fluid_data_modal.accessibility.button_ok')}
onClick={handleCloseClick}
classes={{
root: 'btn-highlight',
label: 'text-16-bold',
}}
>
- {t('modalOldData.ok')}
- </MuiButton>
+ {t('old_fluid_data_modal.ok')}
+ </Button>
</div>
)}
</div>
- </Modal>
+ </Dialog>
)
}
diff --git a/src/components/Home/__snapshots__/OldFluidDataModal.spec.tsx.snap b/src/components/Home/__snapshots__/OldFluidDataModal.spec.tsx.snap
index aea1d8052528da633ccffe5a230a2934fc7d3072..8e2c5195e579f68fa54ac957e37ce4ccf92fc771 100644
--- a/src/components/Home/__snapshots__/OldFluidDataModal.spec.tsx.snap
+++ b/src/components/Home/__snapshots__/OldFluidDataModal.spec.tsx.snap
@@ -1,8 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`OldFluidDataModal component should be rendered correctly 1`] = `
-<Modal
- handleCloseClick={[MockFunction]}
+<ForwardRef(WithStyles)
+ aria-label="old_fluid_data_modal.accessibility.window_title"
+ classes={
+ Object {
+ "paper": "modal-paper",
+ "root": "modal-root",
+ }
+ }
+ onClose={[MockFunction]}
+ open={true}
>
<div
className="od-content"
@@ -10,21 +18,22 @@ exports[`OldFluidDataModal component should be rendered correctly 1`] = `
<div
className="od-warning"
>
- <StyledIcon
+ <Icon
icon="test-file-stub"
size={40}
+ spin={false}
/>
<p
className="text-20-bold"
>
- modalOldData.errorTxt
+ old_fluid_data_modal.errorTxt
</p>
</div>
<p
className="od-main text-16-bold"
>
- modalOldData.oldData
+ old_fluid_data_modal.oldData
</p>
<div
className="providerProblem"
@@ -32,7 +41,7 @@ exports[`OldFluidDataModal component should be rendered correctly 1`] = `
<p
className="text-16-normal"
>
- modalOldData.problem
+ old_fluid_data_modal.problem
</p>
<ul
className="od-konnectorsList"
@@ -47,9 +56,10 @@ exports[`OldFluidDataModal component should be rendered correctly 1`] = `
<p
className="text-16-normal"
>
- modalOldData.contact
+ old_fluid_data_modal.contact
</p>
<ForwardRef(WithStyles)
+ aria-label="old_fluid_data_modal.accessibility.button_ok"
classes={
Object {
"label": "text-16-bold",
@@ -58,9 +68,9 @@ exports[`OldFluidDataModal component should be rendered correctly 1`] = `
}
onClick={[MockFunction]}
>
- modalOldData.ok
+ old_fluid_data_modal.ok
</ForwardRef(WithStyles)>
</div>
</div>
-</Modal>
+</ForwardRef(WithStyles)>
`;
diff --git a/src/components/Konnector/KonnectorModal.tsx b/src/components/Konnector/KonnectorModal.tsx
index 262d4ea734b77180bacb129abf726fad36a09915..999c156aaa943c466a832a29a1cb4a53d30fa1c5 100644
--- a/src/components/Konnector/KonnectorModal.tsx
+++ b/src/components/Konnector/KonnectorModal.tsx
@@ -1,154 +1,161 @@
-import React, { useEffect, useRef } from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import './konnectorModal.scss'
-
-import { ERROR_EVENT } from 'cozy-harvest-lib/dist/models/ConnectionFlow'
-
-import Lottie from 'react-lottie'
-import * as loadingData from 'assets/anims/bounceloading.json'
-
-import MuiButton from '@material-ui/core/Button'
-import Modal from 'components/CommonKit/Modal/Modal'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import errorIcon from 'assets/icons/visu/data-nok.svg'
-import successIcon from 'assets/icons/visu/data-ok.svg'
-import connectionWaitingText from 'constants/connectionWaitingText.json'
-import firstConnectionWaitingText from 'constants/firstConnectionWaitingText.json'
-import { FluidType } from 'enum/fluid.enum'
-
-const loadingOptions = {
- loop: true,
- autoplay: true,
- animationData: loadingData,
- rendererSettings: {
- preserveAspectRatio: 'xMidYMid slice',
- },
-}
-
-interface KonnectorModalProps {
- isUpdating: boolean
- state: string | null
- fluidType: FluidType
- handleCloseClick: Function
-}
-
-const KonnectorModal: React.FC<KonnectorModalProps> = ({
- isUpdating,
- state,
- fluidType,
- handleCloseClick,
-}: KonnectorModalProps) => {
- const { t } = useI18n()
- const fluidName: string = FluidType[fluidType]
-
- const index = useRef(0)
- const parentWaitingTextRef = useRef<HTMLDivElement>(null)
-
- useEffect(() => {
- const childrensText = parentWaitingTextRef.current
- ? Array.from(parentWaitingTextRef.current.children)
- : []
- childrensText[index.current % childrensText.length].classList.add('show')
- const interval = setInterval(() => {
- index.current += 1
- childrensText.forEach(child => child.classList.remove('show'))
- childrensText[index.current % childrensText.length].classList.add('show')
- }, 8000)
-
- return () => {
- clearInterval(interval)
- }
- }, [])
-
- return (
- <Modal
- hideClosure={true}
- handleCloseClick={() => handleCloseClick()}
- border={false}
- >
- <div className="kmodal-content">
- {!state ? (
- <>
- <Lottie options={loadingOptions} height={50} width={50} speed={2} />
- <div className="kmodal-content-text kmodal-content-text-center text-16-normal">
- <div className="kc-wait text-16-bold">
- {t(
- `KONNECTORCONFIG.LOADING_DATA${isUpdating ? '_UPDATE' : ''}`
- )}
- </div>
- </div>
- {isUpdating ? (
- <div
- className="kmodal-waiting-text text-18-italic"
- ref={parentWaitingTextRef}
- >
- {connectionWaitingText.map((text, idx) => (
- <div key={idx} className="waiting-text">
- <p>{text.first}</p>
- <p>{text.second}</p>
- </div>
- ))}
- </div>
- ) : (
- <div
- className="kmodal-waiting-text text-18-italic"
- ref={parentWaitingTextRef}
- >
- {firstConnectionWaitingText.map((text, idx) => (
- <div key={idx} className="waiting-text">
- <p>{text.first}</p>
- <p>{text.second}</p>
- </div>
- ))}
- </div>
- )}
- </>
- ) : (
- <>
- <div className="kmodal-info">
- {state === ERROR_EVENT ? (
- <div className="konnector-config">
- <StyledIcon icon={errorIcon} size={48} />
- <div className="kce-picto-txt text-20-bold">
- {t('KONNECTORCONFIG.ERROR_TXT')}
- </div>
- <div>
- {t(
- `KONNECTORCONFIG.ERROR_DATA_${
- isUpdating ? 'UPDATE_' : ''
- }${fluidName}`
- )}
- </div>
- <div>{t('KONNECTORCONFIG.ERROR_DATA_2')}</div>
- </div>
- ) : (
- <div className="konnector-config">
- <StyledIcon icon={successIcon} size={48} />
- <div className="kcs-picto-txt text-20-bold">
- {t('KONNECTORCONFIG.SUCCESS_TXT')}
- </div>
- {t(
- `KONNECTORCONFIG.SUCCESS_DATA_${
- isUpdating ? 'UPDATE_' : ''
- }${fluidName}`
- )}
- </div>
- )}
- <MuiButton
- onClick={() => handleCloseClick()}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- >
- <div>{t('KONNECTORCONFIG.OK')}</div>
- </MuiButton>
- </div>
- </>
- )}
- </div>
- </Modal>
- )
-}
-
-export default KonnectorModal
+import React, { useEffect, useState } from 'react'
+import './konnectorModal.scss'
+import classNames from 'classnames'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Lottie from 'react-lottie'
+import * as loadingData from 'assets/anims/bounceloading.json'
+
+import { ERROR_EVENT } from 'cozy-harvest-lib/dist/models/ConnectionFlow'
+import { FluidType } from 'enum/fluid.enum'
+
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
+import errorIcon from 'assets/icons/visu/data-nok.svg'
+import successIcon from 'assets/icons/visu/data-ok.svg'
+import connectionWaitingText from 'constants/connectionWaitingText.json'
+import firstConnectionWaitingText from 'constants/firstConnectionWaitingText.json'
+
+const loadingOptions = {
+ loop: true,
+ autoplay: true,
+ animationData: loadingData,
+ rendererSettings: {
+ preserveAspectRatio: 'xMidYMid slice',
+ },
+}
+
+interface KonnectorModalProps {
+ open: boolean
+ isUpdating: boolean
+ state: string | null
+ fluidType: FluidType
+ handleCloseClick: () => void
+}
+
+const KonnectorModal: React.FC<KonnectorModalProps> = ({
+ open,
+ isUpdating,
+ state,
+ fluidType,
+ handleCloseClick,
+}: KonnectorModalProps) => {
+ const { t } = useI18n()
+ const fluidName: string = FluidType[fluidType]
+ const [index, setIndex] = useState<number>(0)
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ if (open && !state) {
+ setIndex((prev: number) => prev + 1)
+ }
+ }, 8000)
+ return () => {
+ clearInterval(interval)
+ }
+ }, [open, state])
+
+ return (
+ <Dialog
+ open={open}
+ disableBackdropClick
+ disableEscapeKeyDown
+ onClose={handleCloseClick}
+ aria-label={t('konnector_modal.accessibility.window_title')}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper',
+ }}
+ >
+ <div className="kmodal-content">
+ {open && !state ? (
+ <>
+ <Lottie options={loadingOptions} height={50} width={50} speed={2} />
+ <div className="kmodal-content-text kmodal-content-text-center text-16-normal">
+ <div className="kc-wait text-16-bold">
+ {t(
+ `konnector_modal.loading_data${isUpdating ? '_update' : ''}`
+ )}
+ </div>
+ </div>
+ {isUpdating ? (
+ <div className="kmodal-waiting-text text-18-italic">
+ {connectionWaitingText.map((text, idx) => (
+ <div
+ key={idx}
+ className={classNames('waiting-text', {
+ ['show']: idx === index % connectionWaitingText.length,
+ })}
+ >
+ <p>{text.first}</p>
+ <p>{text.second}</p>
+ </div>
+ ))}
+ </div>
+ ) : (
+ <div className="kmodal-waiting-text text-18-italic">
+ {firstConnectionWaitingText.map((text, idx) => (
+ <div
+ key={idx}
+ className={classNames('waiting-text', {
+ ['show']:
+ idx === index % firstConnectionWaitingText.length,
+ })}
+ >
+ <p>{text.first}</p>
+ <p>{text.second}</p>
+ </div>
+ ))}
+ </div>
+ )}
+ </>
+ ) : (
+ <>
+ <div className="kmodal-info">
+ {state === ERROR_EVENT ? (
+ <div className="konnector-config">
+ <Icon icon={errorIcon} size={48} />
+ <div className="kce-picto-txt text-20-bold">
+ {t('konnector_modal.error_txt')}
+ </div>
+ <div>
+ {t(
+ `konnector_modal.error_data_${
+ isUpdating ? 'update_' : ''
+ }${fluidName.toLowerCase()}`
+ )}
+ </div>
+ <div>{t('konnector_modal.error_data_2')}</div>
+ </div>
+ ) : (
+ <div className="konnector-config">
+ <Icon icon={successIcon} size={48} />
+ <div className="kcs-picto-txt text-20-bold">
+ {t('konnector_modal.success_txt')}
+ </div>
+ {t(
+ `konnector_modal.success_data_${
+ isUpdating ? 'update_' : ''
+ }${fluidName.toLowerCase()}`
+ )}
+ </div>
+ )}
+ <Button
+ aria-label={t('konnector_modal.accessibility.button_close')}
+ onClick={() => handleCloseClick()}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-16-bold',
+ }}
+ >
+ <div>{t('konnector_modal.button_validate')}</div>
+ </Button>
+ </div>
+ </>
+ )}
+ </div>
+ </Dialog>
+ )
+}
+
+export default KonnectorModal
diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx
index 0f31e8c1d4ecc8cbb3117c09d89e7cd9db029456..9020e296f3727a8089cbc01fa8083bde8d05287b 100644
--- a/src/components/Konnector/KonnectorViewerCard.tsx
+++ b/src/components/Konnector/KonnectorViewerCard.tsx
@@ -30,8 +30,8 @@ import ChallengeService from 'services/challenge.service'
import chevronDown from 'assets/icons/ico/chevron-down.svg'
import chevronUp from 'assets/icons/ico/chevron-up.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from '@material-ui/core/IconButton'
import failurePicto from 'assets/png/picto/picto-failure.png'
import ConnectionNotFound from 'components/Connection/ConnectionNotFound'
import ConnectionForm from 'components/Connection/ConnectionForm'
@@ -272,9 +272,9 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
<div className="accordion-icon">
{fluidStatus.connection.account &&
fluidStatus.status !== FluidState.ERROR_LOGIN_FAILED ? (
- <StyledIcon className="icon" icon={iconType} size={49} />
+ <Icon className="icon" icon={iconType} size={49} />
) : (
- <StyledIcon className="icon" icon={iconAddType} size={49} />
+ <Icon className="icon" icon={iconAddType} size={49} />
)}
</div>
<div className="state-picto">
@@ -295,12 +295,29 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
fluidStatus.status !== FluidState.ERROR_LOGIN_FAILED
? t('FLUID.' + FluidType[fluidStatus.fluidType] + '.LABEL')
: t(
- 'KONNECTORCONFIG.LABEL_CONNECTTO_' +
- FluidType[fluidStatus.fluidType]
+ `konnector_options.label_connect_to_${FluidType[
+ fluidStatus.fluidType
+ ].toLowerCase()}`
)}
</div>
</div>
- <StyledIconButton icon={active ? chevronUp : chevronDown} />
+ <IconButton
+ aria-label={
+ active
+ ? t(
+ `konnector_options.accessibility.button_hide_detail_${FluidType[
+ fluidStatus.fluidType
+ ].toLowerCase()}`
+ )
+ : t(
+ `konnector_options.accessibility.button_show_detail_${FluidType[
+ fluidStatus.fluidType
+ ].toLowerCase()}`
+ )
+ }
+ >
+ <Icon icon={active ? chevronUp : chevronDown} size={16} />
+ </IconButton>
</div>
<div
@@ -316,14 +333,13 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
</div>
</div>
</div>
- {openModal && (
- <KonnectorModal
- isUpdating={isUpdating}
- state={konnectorState}
- fluidType={fluidStatus.fluidType}
- handleCloseClick={handleConnectionEnd}
- />
- )}
+ <KonnectorModal
+ open={openModal}
+ isUpdating={isUpdating}
+ state={konnectorState}
+ fluidType={fluidStatus.fluidType}
+ handleCloseClick={handleConnectionEnd}
+ />
</>
)
}
diff --git a/src/components/Konnector/KonnectorViewerList.tsx b/src/components/Konnector/KonnectorViewerList.tsx
index bbb298916f6ccbd774d98f907ab5739a5bec1cc5..e6027b64ac870a6600a5d23cb109aa6d4c773dc2 100644
--- a/src/components/Konnector/KonnectorViewerList.tsx
+++ b/src/components/Konnector/KonnectorViewerList.tsx
@@ -1,42 +1,42 @@
-import React from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useSelector } from 'react-redux'
-import { AppStore } from 'store'
-import './konnectorViewerList.scss'
-
-import { FluidStatus } from 'models'
-import KonnectorViewerCard from 'components/Konnector/KonnectorViewerCard'
-
-interface KonnectorViewerListProps {
- isParam: boolean
-}
-
-const KonnectorViewerList: React.FC<KonnectorViewerListProps> = ({
- isParam = false,
-}: KonnectorViewerListProps) => {
- const { t } = useI18n()
- const { fluidStatus } = useSelector((state: AppStore) => state.ecolyo.global)
-
- return (
- <div className="kv-root">
- <div className="kv-content">
- <div className="kv-header text-16-normal-uppercase">
- {t('KONNECTORCONFIG.TITLE_CONNECTION')}
- </div>
- <div className="accordion-container">
- {fluidStatus.map((fluidStatusItem: FluidStatus, index: number) => {
- return (
- <KonnectorViewerCard
- key={index}
- isParam={isParam}
- fluidStatus={fluidStatusItem}
- />
- )
- })}
- </div>
- </div>
- </div>
- )
-}
-
-export default KonnectorViewerList
+import React from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useSelector } from 'react-redux'
+import { AppStore } from 'store'
+import './konnectorViewerList.scss'
+
+import { FluidStatus } from 'models'
+import KonnectorViewerCard from 'components/Konnector/KonnectorViewerCard'
+
+interface KonnectorViewerListProps {
+ isParam: boolean
+}
+
+const KonnectorViewerList: React.FC<KonnectorViewerListProps> = ({
+ isParam = false,
+}: KonnectorViewerListProps) => {
+ const { t } = useI18n()
+ const { fluidStatus } = useSelector((state: AppStore) => state.ecolyo.global)
+
+ return (
+ <div className="kv-root">
+ <div className="kv-content">
+ <div className="kv-header text-16-normal-uppercase">
+ {t('konnector_form.title')}
+ </div>
+ <div className="accordion-container">
+ {fluidStatus.map((fluidStatusItem: FluidStatus, index: number) => {
+ return (
+ <KonnectorViewerCard
+ key={index}
+ isParam={isParam}
+ fluidStatus={fluidStatusItem}
+ />
+ )
+ })}
+ </div>
+ </div>
+ </div>
+ )
+}
+
+export default KonnectorViewerList
diff --git a/src/components/Quiz/QuizCustomQuestionContent.spec.tsx b/src/components/Quiz/QuizCustomQuestionContent.spec.tsx
index 0df56a35cce0ee9e6d8cfbf1125394473648ee2e..142f27a6a84defc05699af44f62534d221a84136 100644
--- a/src/components/Quiz/QuizCustomQuestionContent.spec.tsx
+++ b/src/components/Quiz/QuizCustomQuestionContent.spec.tsx
@@ -130,5 +130,6 @@ describe('QuizCustomQuestionContent component', () => {
questionEntity.answers[0].isTrue
)
expect(wrapper.find(QuizExplanationModal).exists()).toBeTruthy()
+ expect(wrapper.find(QuizExplanationModal).prop('open')).toBeTruthy()
})
})
diff --git a/src/components/Quiz/QuizCustomQuestionContent.tsx b/src/components/Quiz/QuizCustomQuestionContent.tsx
index 3d2ab6a1b74f998c79e73f878b4cafe64f41d479..f1f2ff7ef279af0c526789a9c2022a620e6f99ef 100644
--- a/src/components/Quiz/QuizCustomQuestionContent.tsx
+++ b/src/components/Quiz/QuizCustomQuestionContent.tsx
@@ -126,14 +126,13 @@ const QuizCustomQuestionContent: React.FC<QuizCustomQuestionContent> = ({
{t('quiz.confirm')}
</MuiButton>
)}
- {openModal && (
- <QuizExplanationModal
- answerIndex={answerIndex}
- question={question}
- goNext={finishQuiz}
- handleCloseClick={() => setOpenModal(false)}
- />
- )}
+ <QuizExplanationModal
+ open={openModal}
+ answerIndex={answerIndex}
+ question={question}
+ goNext={finishQuiz}
+ handleCloseClick={() => setOpenModal(false)}
+ />
</div>
)
}
diff --git a/src/components/Quiz/QuizExplanationModal.tsx b/src/components/Quiz/QuizExplanationModal.tsx
index 091a40eb8c11611d5ce685da107926281c0cbd6b..3a36e65db2e1f0dbc2cbeb577011c03b1eaaab82 100644
--- a/src/components/Quiz/QuizExplanationModal.tsx
+++ b/src/components/Quiz/QuizExplanationModal.tsx
@@ -6,11 +6,12 @@ import { QuestionEntity } from 'models'
import correctAnswer from 'assets/icons/ico/correctAnswer.svg'
import wrongAnswer from 'assets/icons/ico/wrongAnswer.svg'
-import Modal from 'components/CommonKit/Modal/Modal'
-import MuiButton from '@material-ui/core/Button'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
interface QuizExplanationModalProps {
+ open: boolean
question: QuestionEntity | undefined
answerIndex: number
goNext: () => void
@@ -18,6 +19,7 @@ interface QuizExplanationModalProps {
}
const QuizExplanationModal: React.FC<QuizExplanationModalProps> = ({
+ open,
answerIndex,
question,
goNext,
@@ -34,42 +36,49 @@ const QuizExplanationModal: React.FC<QuizExplanationModalProps> = ({
}
}, [question])
return (
- <Modal border={true} handleCloseClick={handleCloseClick}>
- <div className="em-root modal-congrats">
- <div className="em-content">
- {question && (
- <>
- {question.answers[answerIndex].isTrue ? (
- <div>
- <StyledIcon icon={correctAnswer} size={100} />
- <p className="answer-result correct">{t('quiz.correct')}</p>
- </div>
- ) : (
- <div>
- <StyledIcon icon={wrongAnswer} size={100} />
- <p className="answer-result wrong">{t('quiz.wrong')}</p>
- </div>
- )}
- <div className="text-20-normal answer-label">
- {t('quiz.rightAnswer')} <br />
- <strong>{question.answers[validAnswer].answerLabel}</strong>
+ <Dialog
+ open={open}
+ onClose={handleCloseClick}
+ aria-label={t('quiz.accessibility.window_title')}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper',
+ }}
+ >
+ <div className="quiz-modal-root">
+ {question && (
+ <>
+ {question.answers[answerIndex].isTrue ? (
+ <div>
+ <Icon icon={correctAnswer} size={100} />
+ <p className="quiz-modal-answer correct">{t('quiz.correct')}</p>
</div>
- <div className="text-16-normal">{question.explanation}</div>
- </>
- )}
+ ) : (
+ <div>
+ <Icon icon={wrongAnswer} size={100} />
+ <p className="quiz-modal-answer wrong">{t('quiz.wrong')}</p>
+ </div>
+ )}
+ <div className="text-20-normal answer-label">
+ {t('quiz.rightAnswer')} <br />
+ <strong>{question.answers[validAnswer].answerLabel}</strong>
+ </div>
+ <div className="text-16-normal">{question.explanation}</div>
+ </>
+ )}
- <MuiButton
- onClick={goNext}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('quiz.next')}
- </MuiButton>
- </div>
+ <Button
+ aria-label={t('quiz.accessibility.button_go_next')}
+ onClick={goNext}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('quiz.next')}
+ </Button>
</div>
- </Modal>
+ </Dialog>
)
}
diff --git a/src/components/Quiz/QuizQuestionContent.tsx b/src/components/Quiz/QuizQuestionContent.tsx
index 6c236ac9bda4c5ba161e619459950c024bef24bc..a54c710a275fd6a584a5867e2130c16cae5787ee 100644
--- a/src/components/Quiz/QuizQuestionContent.tsx
+++ b/src/components/Quiz/QuizQuestionContent.tsx
@@ -1,141 +1,140 @@
-import React, { Dispatch, SetStateAction, useEffect, useState } from 'react'
-import './quizQuestion.scss'
-import CloseIcon from 'assets/icons/ico/close.svg'
-import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
-import MuiButton from '@material-ui/core/Button'
-import QuizExplanationModal from 'components/Quiz/QuizExplanationModal'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { Answer, UserChallenge, UserQuiz } from 'models'
-import ChallengeService from 'services/challenge.service'
-import QuizService from 'services/quiz.service'
-import { Client, useClient } from 'cozy-client'
-import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
-import { updateUserChallengeList } from 'store/challenge/challenge.actions'
-import { useDispatch } from 'react-redux'
-
-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 [enableNextQuest, setEnableNextQuest] = useState<boolean>(false)
-
- const client: Client = useClient()
- const dispatch = useDispatch()
-
- 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 = async () => {
- setEnableNextQuest(true)
- setOpenModal(false)
- if (questionIndex === userChallenge.quiz.questions.length - 1) {
- setIsCustomQuest(true)
- }
- }
- useEffect(() => {
- if (enableNextQuest) {
- if (questionIndex !== userChallenge.quiz.questions.length - 1) {
- setQuestionIndex(questionIndex + 1)
- }
- setEnableNextQuest(false)
- setUserChoice('')
- }
- }, [enableNextQuest, questionIndex, userChallenge, userChoice])
- 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) => {
- return (
- <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>
- {userChoice && (
- <MuiButton
- onClick={validateQuestion}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('quiz.confirm')}
- </MuiButton>
- )}
- {openModal && (
- <QuizExplanationModal
- answerIndex={answerIndex}
- question={userChallenge.quiz.questions[questionIndex]}
- goNext={goNextQuestion}
- handleCloseClick={() => setOpenModal(false)}
- />
- )}
- </div>
- )
-}
-
-export default QuizQuestionContent
+import React, { Dispatch, SetStateAction, useEffect, useState } from 'react'
+import './quizQuestion.scss'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+import MuiButton from '@material-ui/core/Button'
+import QuizExplanationModal from 'components/Quiz/QuizExplanationModal'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { Answer, UserChallenge, UserQuiz } from 'models'
+import ChallengeService from 'services/challenge.service'
+import QuizService from 'services/quiz.service'
+import { Client, useClient } from 'cozy-client'
+import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
+import { updateUserChallengeList } from 'store/challenge/challenge.actions'
+import { useDispatch } from 'react-redux'
+
+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 [enableNextQuest, setEnableNextQuest] = useState<boolean>(false)
+
+ const client: Client = useClient()
+ const dispatch = useDispatch()
+
+ 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 = async () => {
+ setEnableNextQuest(true)
+ setOpenModal(false)
+ if (questionIndex === userChallenge.quiz.questions.length - 1) {
+ setIsCustomQuest(true)
+ }
+ }
+ useEffect(() => {
+ if (enableNextQuest) {
+ if (questionIndex !== userChallenge.quiz.questions.length - 1) {
+ setQuestionIndex(questionIndex + 1)
+ }
+ setEnableNextQuest(false)
+ setUserChoice('')
+ }
+ }, [enableNextQuest, questionIndex, userChallenge, userChoice])
+ 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) => {
+ return (
+ <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>
+ {userChoice && (
+ <MuiButton
+ onClick={validateQuestion}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('quiz.confirm')}
+ </MuiButton>
+ )}
+ <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/quizExplanationModal.scss b/src/components/Quiz/quizExplanationModal.scss
index 3b10c759872e3c7d8294cf3c696b4b85e2420188..7bdcd672213f2ccc0bf1f462eee397028968faa5 100644
--- a/src/components/Quiz/quizExplanationModal.scss
+++ b/src/components/Quiz/quizExplanationModal.scss
@@ -1,35 +1,35 @@
-@import '../../styles/base/color';
-
-.quiz-container {
- .modal-close-button {
- display: none;
- }
- .modal-overlay {
- .modal-box {
- text-align: center;
- padding: 1rem 0;
- &.modal-box-bordered {
- border: none;
- }
- }
- .modal-congrats .em-content {
- padding: 1.5rem;
- }
- .answer-result {
- font-weight: bold;
- font-size: 1.7rem;
- text-transform: uppercase;
- margin-top: 0;
- margin-bottom: 1rem;
- &.correct {
- color: $blue-light;
- }
- &.wrong {
- color: $red-primary;
- }
- }
- .answer-label {
- margin-bottom: 1.5rem;
- }
- }
-}
+@import '../../styles/base/color';
+
+.quiz-modal-root {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 1.5rem 0.5rem;
+ text-align: center;
+ .quiz-modal-answer{
+ font-weight: bold;
+ font-size: 1.7rem;
+ text-transform: uppercase;
+ margin-top: 0;
+ margin-bottom: 1rem;
+ &.correct {
+ color: $blue-light;
+ }
+ &.wrong {
+ color: $red-primary;
+ }
+ }
+ .answer-label {
+ margin-bottom: 1.5rem;
+ }
+
+ button.btn-secondary-negative {
+ width: auto;
+ padding: 0.5rem 3rem;
+ margin: 2rem 0.25rem 0.5rem;
+ border-color: $grey-bright;
+ }
+}
+
+
diff --git a/src/components/Welcome/WelcomeModal.spec.tsx b/src/components/Welcome/WelcomeModal.spec.tsx
index 80ae7c41399259beb4ea5f25695e2f33ea08ca61..abe196d9bd1e43e0ccb516f74cdab5e24745abea 100644
--- a/src/components/Welcome/WelcomeModal.spec.tsx
+++ b/src/components/Welcome/WelcomeModal.spec.tsx
@@ -1,31 +1,31 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-import WelcomeModal from './WelcomeModal'
-
-jest.mock('cozy-ui/transpiled/react/I18n', () => {
- return {
- useI18n: jest.fn(() => {
- return {
- t: (str: string) => str,
- }
- }),
- }
-})
-
-jest.mock('components/Hooks/userInstanceSettings', () =>
- jest.fn().mockReturnValue({
- // eslint-disable-next-line @typescript-eslint/camelcase
- data: { public_name: 'User' },
- fetchStatus: 'loaded',
- })
-)
-
-describe('WelcomeModal component', () => {
- it('should be rendered correctly opened', () => {
- const handleClose = jest.fn()
- const component = shallow(
- <WelcomeModal handleCloseClick={handleClose} />
- ).getElement()
- expect(component).toMatchSnapshot()
- })
-})
+import React from 'react'
+import { shallow } from 'enzyme'
+import WelcomeModal from './WelcomeModal'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+
+jest.mock('components/Hooks/userInstanceSettings', () =>
+ jest.fn().mockReturnValue({
+ // eslint-disable-next-line @typescript-eslint/camelcase
+ data: { public_name: 'User' },
+ fetchStatus: 'loaded',
+ })
+)
+
+describe('WelcomeModal component', () => {
+ it('should be rendered correctly opened', () => {
+ const handleClose = jest.fn()
+ const component = shallow(
+ <WelcomeModal open={true} handleCloseClick={handleClose} />
+ ).getElement()
+ expect(component).toMatchSnapshot()
+ })
+})
diff --git a/src/components/Welcome/WelcomeModal.tsx b/src/components/Welcome/WelcomeModal.tsx
index f7d4c9a32584cbf8386af54edd3c6ec13d86c6c6..bfb4910ddfe7e8e666ae2650c43eb170f4de2f0a 100644
--- a/src/components/Welcome/WelcomeModal.tsx
+++ b/src/components/Welcome/WelcomeModal.tsx
@@ -1,36 +1,47 @@
import React from 'react'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Modal from 'components/CommonKit/Modal/Modal'
+import Dialog from '@material-ui/core/Dialog'
import MuiButton from '@material-ui/core/Button'
import userInstanceSettings from 'components/Hooks/userInstanceSettings'
import './welcomeModal.scss'
interface WelcomeModalProps {
+ open: boolean
handleCloseClick: () => void
}
const WelcomeModal: React.FC<WelcomeModalProps> = ({
+ open,
handleCloseClick,
}: WelcomeModalProps) => {
const { t } = useI18n()
const { data: instanceSettings } = userInstanceSettings()
return (
- <Modal handleCloseClick={handleCloseClick} yellowBorder={true}>
+ <Dialog
+ open={open}
+ disableBackdropClick
+ disableEscapeKeyDown
+ onClose={handleCloseClick}
+ aria-label={t('welcome_modal.accessibility.title')}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper yellow-border',
+ }}
+ >
<div className="wm-header text-24-bold">
- <span>{t('COMMON.WELCOME_MODAL_TITLE')}</span>
+ <span>{t('welcome_modal.title')}</span>
{instanceSettings.public_name ? (
<div className="wm-name text-24-bold">{`${instanceSettings.public_name} !`}</div>
) : (
' !'
)}
</div>
- <div className="wm-perso text-18-bold">
- {t('COMMON.WELCOME_MODAL_PERSO')}
- </div>
+ <div className="wm-perso text-18-bold">{t('welcome_modal.perso')}</div>
<div className="wm-connect text-18-bold">
- {t('COMMON.WELCOME_MODAL_CONNECT')}
+ {t('welcome_modal.connect')}
</div>
<MuiButton
+ aria-label={t('welcome_modal.accessibility.button_valid')}
className="button-ok"
onClick={handleCloseClick}
classes={{
@@ -38,9 +49,9 @@ const WelcomeModal: React.FC<WelcomeModalProps> = ({
label: 'text-16-bold',
}}
>
- {t('COMMON.MODAL_OK')}
+ {t('welcome_modal.button_valid')}
</MuiButton>
- </Modal>
+ </Dialog>
)
}
diff --git a/src/components/Welcome/__snapshots__/WelcomeModal.spec.tsx.snap b/src/components/Welcome/__snapshots__/WelcomeModal.spec.tsx.snap
index f070584fbcbf8f4c5249121875753cebf6e1bf87..58432d66e7f36b4795f18bcc8e197f21705cdd17 100644
--- a/src/components/Welcome/__snapshots__/WelcomeModal.spec.tsx.snap
+++ b/src/components/Welcome/__snapshots__/WelcomeModal.spec.tsx.snap
@@ -1,15 +1,24 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`WelcomeModal component should be rendered correctly opened 1`] = `
-<Modal
- handleCloseClick={[MockFunction]}
- yellowBorder={true}
+<ForwardRef(WithStyles)
+ aria-label="welcome_modal.accessibility.title"
+ classes={
+ Object {
+ "paper": "modal-paper yellow-border",
+ "root": "modal-root",
+ }
+ }
+ disableBackdropClick={true}
+ disableEscapeKeyDown={true}
+ onClose={[MockFunction]}
+ open={true}
>
<div
className="wm-header text-24-bold"
>
<span>
- COMMON.WELCOME_MODAL_TITLE
+ welcome_modal.title
</span>
<div
className="wm-name text-24-bold"
@@ -20,14 +29,15 @@ exports[`WelcomeModal component should be rendered correctly opened 1`] = `
<div
className="wm-perso text-18-bold"
>
- COMMON.WELCOME_MODAL_PERSO
+ welcome_modal.perso
</div>
<div
className="wm-connect text-18-bold"
>
- COMMON.WELCOME_MODAL_CONNECT
+ welcome_modal.connect
</div>
<ForwardRef(WithStyles)
+ aria-label="welcome_modal.accessibility.button_valid"
className="button-ok"
classes={
Object {
@@ -37,7 +47,7 @@ exports[`WelcomeModal component should be rendered correctly opened 1`] = `
}
onClick={[MockFunction]}
>
- COMMON.MODAL_OK
+ welcome_modal.button_valid
</ForwardRef(WithStyles)>
-</Modal>
+</ForwardRef(WithStyles)>
`;
diff --git a/src/components/Welcome/welcomeModal.scss b/src/components/Welcome/welcomeModal.scss
index b2112bbf21a37fe3e67f0af57cc1ff0e29354c64..07e29c90247c56faaa0dfd517968fff495cf57dc 100644
--- a/src/components/Welcome/welcomeModal.scss
+++ b/src/components/Welcome/welcomeModal.scss
@@ -6,7 +6,7 @@
background-clip: 'text';
-webkit-background-clip: text;
color: transparent;
- margin: 2rem 0 1.25rem;
+ margin-bottom: 1.25rem;
text-align: center;
}
.wm-name {
diff --git a/src/enum/konnectorUpdate.enum.ts b/src/enum/konnectorUpdate.enum.ts
index 1a1fd1b6720d4967c947cccf2b30a97fc3768c08..5923efb32cc658344ea3dde22f941a7ffe50a196 100644
--- a/src/enum/konnectorUpdate.enum.ts
+++ b/src/enum/konnectorUpdate.enum.ts
@@ -1,4 +1,4 @@
-export enum KonnectorUpdate {
- ERROR_UPDATE = 'ERROR_UPDATE',
- ERROR_UPDATE_OAUTH = 'ERROR_UPDATE_OAUTH',
-}
+export enum KonnectorUpdate {
+ ERROR_UPDATE = 'error_update',
+ ERROR_UPDATE_OAUTH = 'error_update_oauth',
+}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 3b8e4e7a40b9b816e57a75b0427747c3a40a676a..e5a5a8e7c9bed3b3372a394e1dd0441653c25e73 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -29,11 +29,29 @@
"MINI_CARDS_LABEL": "AUTRES ENERGIES",
"APP_FAQ_TITLE": "FAQ",
"APP_LEGAL_TITLE": "Mentions légales",
- "WELCOME_MODAL_TITLE": "Félicitations",
- "WELCOME_MODAL_PERSO": "Votre espace personnel a bien été créé.",
- "WELCOME_MODAL_CONNECT": "Vous pouvez maintenant connecter vos compteurs d’énergie à Ecolyo en toute sécurité.",
"MODAL_OK": "Ok"
},
+ "header": {
+ "accessibility": {
+ "button_back": "Retour à la page précédente",
+ "button_open_feedbacks": "Ouvrir le partage de retours"
+ }
+ },
+ "modal": {
+ "accessibility": {
+ "button_close": "Fermer cette fenètre"
+ }
+ },
+ "welcome_modal": {
+ "title": "Félicitations",
+ "perso": "Votre espace personnel a bien été créé.",
+ "connect": "Vous pouvez maintenant connecter vos compteurs d’énergie à Ecolyo en toute sécurité.",
+ "button_valid": "Ok",
+ "accessibility": {
+ "title": "Fenètre de félicitations",
+ "button_valid": "Valider"
+ }
+ },
"LOADING": {
"ERROR_LOADING": "Erreur pendant le chargement des données. Veuillez vérifier votre connexion internet.",
"RELOAD": "Recharger"
@@ -91,8 +109,14 @@
"COMPARELABEL": "Comparer à la journée précédente"
}
},
- "CONSUMPTION": {
- "DISPLAY_LAST_DATA": "Voir mes dernières consos"
+ "consumption": {
+ "display_last_data": "Voir mes dernières consos",
+ "accessibility": {
+ "button_previous_period": "Afficher la période précédente",
+ "button_next_period": "Afficher la période suivante",
+ "button_previous_value": "Sélectionner la valeur précédente",
+ "button_next_value": "Sélectionner la valeur suivante"
+ }
},
"PROFILE": {
"REPORT": {
@@ -100,40 +124,61 @@
"SWITCH_LABEL": "Être prévenu de la parution de mon bilan mensuel"
}
},
- "KONNECTORCONFIG": {
- "TITLE_CONNECTION": "Connexion aux distributeurs",
- "LABEL_UPDATEDAT": "dernière mise-à-jour le",
- "LABEL_CONNECTTO_ELECTRICITY": "Se connecter à l'électricité",
- "LABEL_CONNECTTO_WATER": "Se connecter à l'eau",
- "LABEL_CONNECTTO_GAS": "Se connecter au gaz",
- "BTN_INSTALL": "Installer",
- "BTN_CONFIGURE": "Configurer",
- "BTN_UPDATE": "Mettre à jour",
- "BTN_DELETE": "Supprimer",
- "LOADING_DATA": "Veuillez patienter, vos données sont en cours de chargement.",
- "LOADING_DATA_UPDATE": "Veuillez patienter, vos données sont en cours de mise à jour.",
- "NOT_INSTALLED": "Le connecteur n'est pas installé. Veuillez l'installer en cliquant sur le bouton ci-dessous.",
- "ERROR_NO_LOGIN_PASSWORD": "Identifiant et mot de passe requis",
- "ERROR_ACCOUNT_CREATION": "Une erreur est survenue, veuillez essayer de nouveau.",
- "ERROR_LOGIN_FAILED": "Identifiants invalides",
- "SUCCESS_TXT": "Félicitations !",
- "SUCCESS_DATA_ELECTRICITY": "Vos données de consommation d'électricité sont maintenant connectées à Ecolyo.",
- "SUCCESS_DATA_WATER": "Vos données de consommation d'eau sont maintenant connectées à Ecolyo.",
- "SUCCESS_DATA_GAS": "Vos données de consommation de gaz sont maintenant connectées à Ecolyo.",
- "SUCCESS_DATA_UPDATE_ELECTRICITY": "Vos données de consommation d'électricité sont maintenant à jour dans Ecolyo.",
- "SUCCESS_DATA_UPDATE_WATER": "Vos données de consommation d'eau sont maintenant à jour dans Ecolyo.",
- "SUCCESS_DATA_UPDATE_GAS": "Vos données de consommation de gaz sont maintenant à jour dans Ecolyo.",
- "ERROR_TXT": "Aïe !",
- "ERROR_DATA_ELECTRICITY": "Un problème a empêché vos données de consommation d'électricité de se connecter à Ecolyo.",
- "ERROR_DATA_WATER": "Un problème a empêché vos données de consommation d'eau de se connecter à Ecolyo.",
- "ERROR_DATA_GAS": "Un problème a empêché vos données de consommation de gaz de se connecter à Ecolyo.",
- "ERROR_DATA_UPDATE_ELECTRICITY": "Un problème a empêché vos données de consommation d'électricité de se mettre à jour dans Ecolyo.",
- "ERROR_DATA_UPDATE_WATER": "Un problème a empêché vos données de consommation d'eau de se mettre à jour dans Ecolyo.",
- "ERROR_DATA_UPDATE_GAS": "Un problème a empêché vos données de consommation de gaz de se mettre à jour dans Ecolyo.",
- "ERROR_DATA_2": "Merci de réessayer plus tard.",
- "ERROR_UPDATE": "Un problème est survenu lors du rappatriement de vos données.",
- "ERROR_UPDATE_OAUTH": "Le service demande d'autoriser à nouveau votre accès. Merci de supprimer puis reconnecter votre compte. Aucune donnée ne sera perdue.",
- "OK": "Ok"
+ "konnector_form": {
+ "title": "Connexion aux distributeurs",
+ "label_updated_at": "dernière mise-à-jour le",
+ "button_update": "Mettre à jour",
+ "button_delete": "Supprimer",
+ "not_installed": "Le connecteur n'est pas installé. Veuillez l'installer en cliquant sur le bouton ci-dessous.",
+ "button_install": "Installer",
+ "error_account_creation": "Une erreur est survenue, veuillez essayer de nouveau.",
+ "error_no_login_password": "Identifiant et mot de passe requis",
+ "error_login_failed": "Identifiants invalides",
+ "error_update": "Un problème est survenu lors du rappatriement de vos données.",
+ "error_update_oauth": "Le service demande d'autoriser à nouveau votre accès. Merci de supprimer puis reconnecter votre compte. Aucune donnée ne sera perdue.",
+ "OK": "Ok",
+ "accessibility": {
+ "button_install": "Installer le connecteur",
+ "button_update": "Mettre à jour la connexion",
+ "button_delete": "Supprimer la connexion"
+ }
+ },
+ "konnector_options": {
+ "label_connect_to_electricity": "Se connecter à l'électricité",
+ "label_connect_to_water": "Se connecter à l'eau",
+ "label_connect_to_gas": "Se connecter au gaz",
+ "accessibility": {
+ "button_show_detail_electricity": "Afficher le détail de la connexion a l'électricité",
+ "button_show_detail_water": "Afficher le détail de la connexion à l'eau",
+ "button_show_detail_gas": "Afficher le détail de la connexion au gaz",
+ "button_hide_detail_electricity": "Afficher le détail de la connexion a l'électricité",
+ "button_hide_detail_water": "Afficher le détail de la connexion à l'eau",
+ "button_hide_detail_gas": "Afficher le détail de la connexion au gaz"
+ }
+ },
+ "konnector_modal": {
+ "loading_data": "Veuillez patienter, vos données sont en cours de chargement.",
+ "loading_data_update": "Veuillez patienter, vos données sont en cours de mise à jour.",
+ "success_txt": "Félicitations !",
+ "success_data_electricity": "Vos données de consommation d'électricité sont maintenant connectées à Ecolyo.",
+ "success_data_water": "Vos données de consommation d'eau sont maintenant connectées à Ecolyo.",
+ "success_data_gas": "Vos données de consommation de gaz sont maintenant connectées à Ecolyo.",
+ "success_data_update_electricity": "Vos données de consommation d'électricité sont maintenant à jour dans Ecolyo.",
+ "success_data_update_water": "Vos données de consommation d'eau sont maintenant à jour dans Ecolyo.",
+ "success_data_update_gas": "Vos données de consommation de gaz sont maintenant à jour dans Ecolyo.",
+ "error_txt": "Aïe !",
+ "error_data_electricity": "Un problème a empêché vos données de consommation d'électricité de se connecter à Ecolyo.",
+ "error_data_water": "Un problème a empêché vos données de consommation d'eau de se connecter à Ecolyo.",
+ "error_data_gas": "Un problème a empêché vos données de consommation de gaz de se connecter à Ecolyo.",
+ "error_data_update_electricity": "Un problème a empêché vos données de consommation d'électricité de se mettre à jour dans Ecolyo.",
+ "error_data_update_water": "Un problème a empêché vos données de consommation d'eau de se mettre à jour dans Ecolyo.",
+ "error_data_update_gas": "Un problème a empêché vos données de consommation de gaz de se mettre à jour dans Ecolyo.",
+ "error_data_2": "Merci de réessayer plus tard.",
+ "button_validate": "Ok",
+ "accessibility": {
+ "window_title": "Fenètre d'attente de connexion",
+ "button_close": "Fermer la fenètre"
+ }
},
"INDICATOR": {
"DETAIL": "Détail par fluide",
@@ -157,7 +202,6 @@
"ECOGESTURE": {
"FILTER_TITLE": "Tous les ecogestes",
"SECOND_TAB": "Ecogestes adaptés à votre profil",
- "TITLE_ECOGESTURE": "Ecogeste",
"ALL": "Tous les usages",
"HEATING": "Chauffage",
"AIR_CONDITIONING": "Climatisation",
@@ -166,10 +210,6 @@
"ELECTRICITY_SPECIFIC": "Electricité courante",
"COOKING": "Cuisson",
"NO_ECOGESTURE": "Aucun écogeste ne correspond à votre filtre",
- "QUESTION_NEGAWATT": "nWh ?",
- "EFFICIENCY": "Efficacité",
- "SHOW_LESS": "Je veux moins d’infos",
- "SHOW_MORE": "Je veux plus d’infos",
"ADJUST_PROFIL": {
"DESCRIPTION": "Pour une sélection d’écogestes appropriés à votre consommation, vous pouvez ajuster votre profil.",
"BTN_TEXT": "Ajuster mon profil"
@@ -177,11 +217,30 @@
"NO_ECOGESTURE_FILTER": {
"TEXT_1": "Nous n'avons pas trouvé d'écogestes adaptés à votre profil dans cette catégorie.",
"TEXT_2": "En effet, de part votre profil et vos modes de chauffage, d'eau ou d'eau chaude sanitaire, nous n'avons pas identifié d'éco-gestes vous permettant de diminuer vos factures à titre individuel. Toutefois, vous pouvez toujours agir pour préserver les ressources en appliquant et diffusant autour de vous les autres bonnes pratiques présentées dans la partie \"Tous les écogestes\". La planète vous en remercie"
- },
- "INFO": {
- "HEADER": "Comment sont choisis les écogestes adaptés à votre profil ?",
- "TEXT": "Les écogestes adaptés à votre profil sont aujourd'hui choisis en fonction des compteurs individuels que vous possédez (communicants ou non). Ceux présentés ici vous permettent d'agir sur vos consommations individuelles. Des modes de tri plus personnalisables seront proposés à l'avenir.",
- "BUTTONTEXT": "J'ai compris"
+ }
+ },
+ "ecogesture_modal": {
+ "title_ecogesture": "Ecogeste",
+ "title_action": "Action",
+ "efficiency": "Efficacité",
+ "show_less": "Je veux moins d’infos",
+ "show_more": "Je veux plus d’infos",
+ "select_action": "Je choisis cette action",
+ "accessibility": {
+ "window_title_ecogesture": "Fenètre ecogeste",
+ "window_title_action": "Fenètre action",
+ "button_close": "Fermer la fenètre",
+ "button_select_action": "Selectionner cette action",
+ "button_see_more_detail": "Afficher plus de détail"
+ }
+ },
+ "ecogesture_info_modal": {
+ "header": "Comment sont choisis les écogestes adaptés à votre profil ?",
+ "text": "Les écogestes adaptés à votre profil sont aujourd'hui choisis en fonction des compteurs individuels que vous possédez (communicants ou non). Ceux présentés ici vous permettent d'agir sur vos consommations individuelles. Des modes de tri plus personnalisables seront proposés à l'avenir.",
+ "button_close": "J'ai compris",
+ "accessibility": {
+ "window_title": "Fenètre d'information",
+ "button_close": "Fermer la fenètre"
}
},
"auth": {
@@ -218,7 +277,12 @@
"endText1": "Une période de consentement de ",
"duration": "1 an ",
"endText2": "minimum est demandée pour une expérience optimale.",
- "buttonText": "J'ai compris"
+ "buttonText": "J'ai compris",
+ "accessibility": {
+ "window_title": "Fenètre d'information GRDF",
+ "button_close": "Fermer la fenètre",
+ "button_validate": "Valider"
+ }
}
},
"eglgrandlyon": {
@@ -233,6 +297,12 @@
"text": "Vous pouvez le créer en vous munissant d'une facture d'eau."
},
"create_account": "Je crée mon compte Eau du GL"
+ },
+ "password_label": "Mot de passe",
+ "accessibility": {
+ "button_reveal_password": "Afficher le mot de passe",
+ "button_connect": "Se connecter",
+ "button_create_account": "Se créer un compte"
}
},
"oauth": {
@@ -261,9 +331,18 @@
"success_sending": "Nous vous remercions pour votre retour.",
"warning": "Attention !",
"error_empty_description": "Le champ de description est vide.",
- "error_sending": "Erreur lors de l'envoi, veuillez essayer ultérieurement."
+ "error_sending": "Erreur lors de l'envoi, veuillez essayer ultérieurement.",
+ "accessibility": {
+ "window_title": "Fenètre de partage de retours",
+ "select_type_bug": "Sélectionner le motif bug",
+ "select_type_idea": "Sélectionner le motif idée",
+ "select_type_other": "Sélectionner le motif autre",
+ "button_send": "Envoyer le retour",
+ "button_ok": "Valider",
+ "button_close": "Fermer la fenêtre de partage de retours"
+ }
},
- "modalOldData": {
+ "old_fluid_data_modal": {
"errorTxt": "Aïe !",
"oldData": "Vos données semblent anciennes",
"verify": "Veuillez vérifier l’état de vos connecteurs : ",
@@ -271,7 +350,13 @@
"contact": "Veuillez prendre contact directement avec eux.",
"accessButton": "Accéder aux connecteurs",
"later": "Plus tard",
- "ok": "Ok"
+ "ok": "Ok",
+ "accessibility": {
+ "window_title": "Fenètre d'information",
+ "button_ok": "Fermer la fenètre",
+ "button_later": "Fermer la fenètre",
+ "button_goto_konnector": "Aller aux connecteurs"
+ }
},
"analysis": {
"viewTitle": "Analyse",
@@ -286,11 +371,18 @@
"approximate_title": "Cette comparaison est très approximative.",
"approximative_description": "Pour une comparaison plus précise, vous pouvez ajuster votre profil de consommation :",
"adjust_profile": "Ajuster mon profil",
- "error_title": "Aucune analyse",
- "error_message": "Pour profiter d’une analyse de vos consommations, connectez au moins un de vos compteurs.",
+ "not_connected": "Non connecté"
+ },
+ "analysis_error_modal": {
+ "title": "Aucune analyse",
+ "message": "Pour profiter d’une analyse de vos consommations, connectez au moins un de vos compteurs.",
"go_to_options": "Je connecte mes connecteurs",
"go_back": "Retour",
- "not_connected": "Non connecté"
+ "accessibility": {
+ "window_title": "Fenètre d'erreur",
+ "button_go_back": "Retour",
+ "button_goto_konnector": "Aller aux connecteurs"
+ }
},
"challenge": {
"noFluidModal": {
@@ -325,6 +417,15 @@
"final_defi": "sur le duel final"
}
},
+ "challenge_no_fluid_modal": {
+ "title": "Oups !",
+ "content": "Connectez au moins 1 fluide pour pouvoir jouer",
+ "button_validate": "Ok",
+ "accessibility": {
+ "window_title": "Fenètre d'erreur",
+ "button_validate": "Valider"
+ }
+ },
"duel": {
"global_error": "Oups.. Une erreur est parvenue. Veuillez retourner à l'écran des défis",
"error_go_back": "Retour",
@@ -334,24 +435,34 @@
"goal2": "pour gagner le badge %{title}",
"caption_average": "Votre moyenne à titre indicatif",
"caption_consumption": "Votre consommation",
- "caption_incoming": "Données à venir",
+ "caption_incoming": "Données à venir"
+ },
+ "duel_result_modal": {
"sucess": {
"title": "Félicitations !",
"message1": "Vous avez économisé ",
"message2": "et gagné le badge ",
- "button": "Youpi"
+ "button_validate": "Youpi"
},
"lost": {
"title": "Presque !",
"message1": "Vous avez dépassé de ",
"message2": "et manqué le badge ",
- "button": "Zut alors"
+ "button_validate": "Zut alors"
},
- "empty_value": {
- "title": "Oups !",
- "message1": "Vous n'avez pas de période de référence valide pour lancer ce duel.",
- "message2": "Réessayer dans quelques jours, peut être que nous aurons changé d'avis.",
- "button": "Je retourne au menu des duels"
+ "accessibility": {
+ "window_title": "Fenètre de résultat",
+ "button_validate": "Valider"
+ }
+ },
+ "duel_empty_value_modal": {
+ "title": "Oups !",
+ "message1": "Vous n'avez pas de période de référence valide pour lancer ce duel.",
+ "message2": "Réessayer dans quelques jours, peut être que nous aurons changé d'avis.",
+ "button": "Je retourne au menu des duels",
+ "accessibility": {
+ "window_title": "Fenètre d'erreur",
+ "button_validate": "Retouner au menu des duels"
}
},
"quiz": {
@@ -366,7 +477,11 @@
"try_again": "Rééssayer",
"confirm": "Valider",
"next": "Suivant",
- "consumption_question": "Question sur votre consommation"
+ "consumption_question": "Question sur votre consommation",
+ "accessibility": {
+ "window_title": "Fenètre de résultat",
+ "button_go_next": "Suivant"
+ }
},
"exploration": {
"global_error": "Oups.. Une erreur est parvenue. Veuillez retourner à l'écran des défis",
@@ -384,8 +499,6 @@
}
},
"action": {
- "title_action": "Action",
- "select_action": "Je choisis cette action",
"duration": "Durée : %{smart_count} jours",
"result": "Résultat",
"finished": "Défi terminé !",
@@ -393,14 +506,21 @@
"apply": "J'applique cette action",
"other": "Je choisis une autre action",
"hint": "Je pourrais visualiser la différence à la fin du défi.",
- "accept": "Je relève le défi",
- "refuse": "Je me défile",
"resultText1": "Cela n'a pas été trop difficile ?",
"resultText2": "Jetez un coup d'oeil dans la page conso dans 1 à 3 jours, le temps que vos données arrivent, pour voir l'impact de votre écogeste.",
"resultText3": "Pas de baisse de significative ? Pas de panique, en maintenant cette pratique dans le temps, les économies d'énergies et d'eau seront davantage visibles.",
"resultText4": "Dans tous les cas, bravo, vous remportez...",
"ok": "Ok"
},
+ "action_modal": {
+ "accept": "Je relève le défi",
+ "refuse": "Je me défile",
+ "accessibility": {
+ "window_title": "Fenètre de confirmation",
+ "button_accept": "Accepter",
+ "button_refuse": "Refuser"
+ }
+ },
"profile_type": {
"title_profile": "Profil de consommation",
"read_profile": "Ajuster mon profil",
@@ -561,11 +681,5 @@
"label2": "Nous pourrons aussi vous proposer des écogestes adaptés à votre profil.",
"OK": "OK"
}
- },
- "modal_efficienty": {
- "title": "Efficacité !",
- "description": "L’efficacité sert d'unité de mesure de vos économies d'énergie. Cette unité est purement indicative et arbitraire.",
- "important_eco": "Économie importante",
- "weak_eco": "Économie faible"
}
}
diff --git a/src/styles/base/_buttons.scss b/src/styles/components/_buttons.scss
similarity index 93%
rename from src/styles/base/_buttons.scss
rename to src/styles/components/_buttons.scss
index 231337aab3a39762a8ed3d3650be81155553195a..256493ab33da2c3bf484c1f3868034de8a57acec 100644
--- a/src/styles/base/_buttons.scss
+++ b/src/styles/components/_buttons.scss
@@ -1,91 +1,91 @@
-@import 'color';
-@import 'mixins';
-
-button {
- &.btn-highlight {
- @include button($gold-shadow, #000000, none, $multi-color-radial-gradient) {
- background-color: darken($gold-shadow, 12%);
- }
- }
- &.btn-primary-positive {
- @include button(
- transparent,
- $gold-shadow,
- 1px solid $dark-light-2,
- transparent
- ) {
- background-color: rgba($dark-light-2, 0.2);
- span:first-child {
- color: rgba($gold-shadow, 0.7);
- }
- }
- }
- &.btn-primary-negative {
- @include button(
- transparent,
- $gold-shadow,
- 1px solid $grey-dark,
- transparent
- ) {
- background-color: rgba($grey-dark, 0.2);
- span:first-child {
- color: rgba($gold-shadow, 0.7);
- }
- }
- }
- &.btn-secondary-positive {
- @include button(
- transparent,
- $grey-bright,
- 1px solid $dark-light-2,
- transparent
- ) {
- background-color: rgba($dark-light-2, 0.2);
- span:first-child {
- color: rgba($grey-bright, 0.7);
- }
- }
- }
- &.btn-secondary-negative {
- @include button(
- transparent,
- $grey-bright,
- 1px solid $grey-dark,
- transparent
- ) {
- background-color: rgba($grey-dark, 0.2);
- span:first-child {
- color: rgba($grey-bright, 0.7);
- }
- }
- }
- &.btn-duel-off {
- @include button(
- $dark-light-2,
- $white,
- 1px solid rgba(97, 240, 242, 0.5),
- $dark-light-2
- ) {
- background-color: darken($dark-light-2, 12%);
- }
- }
- &.btn-duel-active {
- @include button($blue, $dark-light-2, none, $blue) {
- background-color: darken($blue, 30%);
- }
- }
- &.btn-duel-on {
- @include button($dark-light-2, $white, 1px solid $blue, $dark-background) {
- background-color: darken($dark-light-2, 12%);
- }
- }
- &.btn-profile-next {
- @include button($gold-shadow, #000000, none, $multi-color-radial-gradient) {
- background-color: darken($gold-shadow, 12%);
- }
- }
- &.btn-profile-back {
- @include button(none, $grey-dark, none, none) {
- }
- }
-}
+@import '../base/color';
+@import '../base/mixins';
+
+button {
+ &.btn-highlight {
+ @include button($gold-shadow, #000000, none, $multi-color-radial-gradient) {
+ background-color: darken($gold-shadow, 12%);
+ }
+ }
+ &.btn-primary-positive {
+ @include button(
+ transparent,
+ $gold-shadow,
+ 1px solid $dark-light-2,
+ transparent
+ ) {
+ background-color: rgba($dark-light-2, 0.2);
+ span:first-child {
+ color: rgba($gold-shadow, 0.7);
+ }
+ }
+ }
+ &.btn-primary-negative {
+ @include button(
+ transparent,
+ $gold-shadow,
+ 1px solid $grey-dark,
+ transparent
+ ) {
+ background-color: rgba($grey-dark, 0.2);
+ span:first-child {
+ color: rgba($gold-shadow, 0.7);
+ }
+ }
+ }
+ &.btn-secondary-positive {
+ @include button(
+ transparent,
+ $grey-bright,
+ 1px solid $dark-light-2,
+ transparent
+ ) {
+ background-color: rgba($dark-light-2, 0.2);
+ span:first-child {
+ color: rgba($grey-bright, 0.7);
+ }
+ }
+ }
+ &.btn-secondary-negative {
+ @include button(
+ transparent,
+ $grey-bright,
+ 1px solid $grey-dark,
+ transparent
+ ) {
+ background-color: rgba($grey-dark, 0.2);
+ span:first-child {
+ color: rgba($grey-bright, 0.7);
+ }
+ }
+ }
+ &.btn-duel-off {
+ @include button(
+ $dark-light-2,
+ $white,
+ 1px solid rgba(97, 240, 242, 0.5),
+ $dark-light-2
+ ) {
+ background-color: darken($dark-light-2, 12%);
+ }
+ }
+ &.btn-duel-active {
+ @include button($blue, $dark-light-2, none, $blue) {
+ background-color: darken($blue, 30%);
+ }
+ }
+ &.btn-duel-on {
+ @include button($dark-light-2, $white, 1px solid $blue, $dark-background) {
+ background-color: darken($dark-light-2, 12%);
+ }
+ }
+ &.btn-profile-next {
+ @include button($gold-shadow, #000000, none, $multi-color-radial-gradient) {
+ background-color: darken($gold-shadow, 12%);
+ }
+ }
+ &.btn-profile-back {
+ @include button(none, $grey-dark, none, none) {
+ }
+ }
+}
diff --git a/src/styles/components/_dialog.scss b/src/styles/components/_dialog.scss
new file mode 100644
index 0000000000000000000000000000000000000000..983b2fc1b1e894d6c80f91f05e07268b9fb87385
--- /dev/null
+++ b/src/styles/components/_dialog.scss
@@ -0,0 +1,46 @@
+@import '../base/color';
+
+div.modal-root{
+ .MuiBackdrop-root{
+ background-color: rgba(27, 28, 34, 0.85);
+ }
+}
+
+div.modal-paper{
+ background: $grey-linear-gradient-background;
+ width: 36rem;
+ max-width: 100%;
+ max-height: 90vh;
+ padding: 1rem;
+ box-sizing: border-box;
+ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
+ border-radius: 4px;
+ margin: 0 0 0 13.75rem;
+ align-items: center;
+ color: $white;
+ @media #{$tablet} {
+ width: 35rem;
+ margin: 0;
+ }
+ @media #{$large-phone} {
+ width: 85%;
+ max-width: 35rem;
+ margin: 0;
+ }
+ &.no-padding {
+ padding: 0;
+ }
+ &.blue-border {
+ border: 1px solid $blue-40;
+ }
+ &.yellow-border {
+ border: 1px solid $gold-40;
+ }
+ .modal-paper-close-button{
+ position: absolute;
+ top: 0.5rem;
+ right: 0.5rem;
+ padding: 5px 5px;
+ z-index: 10;
+ }
+}
diff --git a/src/styles/base/_expansion-panel.scss b/src/styles/components/_expansion-panel.scss
similarity index 91%
rename from src/styles/base/_expansion-panel.scss
rename to src/styles/components/_expansion-panel.scss
index f72081549602f5e24e4b451b2ddae446362ba27c..a39e1af5ed15675d70ac7df4a5627ac847e7621e 100644
--- a/src/styles/base/_expansion-panel.scss
+++ b/src/styles/components/_expansion-panel.scss
@@ -1,4 +1,4 @@
-@import 'color';
+@import '../base/color';
div.expansion-panel-root{
margin: 1rem 0;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index a361df512de3f118ebbead9170ae61bc2b60d6bf..28b05325023f5076fff39c9e8d65c4d57120df49 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -7,9 +7,10 @@
@import 'base/color';
@import 'base/breakpoint';
@import 'base/typography';
-@import 'base/buttons';
-@import 'base/expansion-panel';
+@import 'components/buttons';
+@import 'components/expansion-panel';
@import 'components/barchart';
+@import 'components/dialog';
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');