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/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..0bd859cef607dbbfbe6b6178a24d7b1a0756a729 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,29 @@ const OldFluidDataModal: React.FC<OldFluidDataModalProps> = ({
}, [checkFluidDataDate])
return (
- <Modal handleCloseClick={handleCloseClick}>
+ <Dialog
+ open={open}
+ disableBackdropClick
+ disableEscapeKeyDown
+ 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 +86,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 +129,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..278ed2c88b6e5d709d8a56369f907fa69a5c7669 100644
--- a/src/components/Home/__snapshots__/OldFluidDataModal.spec.tsx.snap
+++ b/src/components/Home/__snapshots__/OldFluidDataModal.spec.tsx.snap
@@ -1,8 +1,18 @@
// 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",
+ }
+ }
+ disableBackdropClick={true}
+ disableEscapeKeyDown={true}
+ onClose={[MockFunction]}
+ open={true}
>
<div
className="od-content"
@@ -10,21 +20,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 +43,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 +58,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 +70,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/locales/fr.json b/src/locales/fr.json
index d2fe7afe00d80d52e2607b58f682db12c234535d..effbce4f4c4d648edb582a15accd8ad885fb63d3 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -311,7 +311,7 @@
"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 : ",
@@ -319,7 +319,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",