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.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/locales/fr.json b/src/locales/fr.json index 6a79f98db719c42a354d31bd92899759fba8fea5..d2fe7afe00d80d52e2607b58f682db12c234535d 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -380,6 +380,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",