From 5d4f3ed5c60ce44b03e4f9df812ebaaf3ccf7525 Mon Sep 17 00:00:00 2001
From: Yoan VALLET <ext.sopra.yvallet@grandlyon.com>
Date: Fri, 26 Mar 2021 18:09:59 +0100
Subject: [PATCH] feat: change ChallengeNoFluidModal
---
.../Challenge/ChallengeCardOnGoing.tsx | 7 ++-
.../Challenge/ChallengeCardUnlocked.tsx | 8 +--
.../Challenge/ChallengeNoFluidModal.spec.tsx | 46 +++++++-------
.../Challenge/ChallengeNoFluidModal.tsx | 62 +++++++++++--------
src/locales/fr.json | 9 +++
5 files changed, 76 insertions(+), 56 deletions(-)
diff --git a/src/components/Challenge/ChallengeCardOnGoing.tsx b/src/components/Challenge/ChallengeCardOnGoing.tsx
index 45c3de540..7445f0314 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 668892cdc..547d92062 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 3654d213e..ca1ba37a4 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 4b614daae..989d6ce40 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 6a79f98db..d2fe7afe0 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",
--
GitLab