diff --git a/src/components/Action/ActionBegin.spec.tsx b/src/components/Action/ActionBegin.spec.tsx index edb03a293da304b93979c7fe279db1e42bfb997a..bc0bc482f1837b17db52f5d133ad29ccbb6e6731 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/ActionModal.spec.tsx b/src/components/Action/ActionModal.spec.tsx index bbbd8a9cb1ad53610155d9a1c8e7e811ee06877b..a6aab2be258c3d4e64f9a81e893be3751466b197 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/locales/fr.json b/src/locales/fr.json index 6bc34ddd7f6edc211aac3acca23f1ff5e02cd993..13afbe84d5456dd9379315360117c935410944ed 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -469,14 +469,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",