diff --git a/src/components/Duel/DuelUnlocked.tsx b/src/components/Duel/DuelUnlocked.tsx
index 83f236ce424b49bc8b5afdc2c771c604fd993da3..2de27790be53696616a5469fbdef5c0ba5440728 100644
--- a/src/components/Duel/DuelUnlocked.tsx
+++ b/src/components/Duel/DuelUnlocked.tsx
@@ -68,7 +68,7 @@ const DuelUnlocked: React.FC<DuelUnlockedProps> = ({
</div>
<div className="button-start">
<Button
- aria-label={t('duel.accessibility.button_start')}
+ aria-label={t('duel.accessibility.button_start_duel')}
onClick={launchDuel}
classes={{
root: 'btn-secondary-negative',
diff --git a/src/components/Quiz/QuizBegin.spec.tsx b/src/components/Quiz/QuizBegin.spec.tsx
index b7d46a8d7d6883892bb84173fe8498ab72e89108..e48e0119ac50365a3058a6d48308e806891d939c 100644
--- a/src/components/Quiz/QuizBegin.spec.tsx
+++ b/src/components/Quiz/QuizBegin.spec.tsx
@@ -5,7 +5,7 @@ import configureStore from 'redux-mock-store'
import QuizBegin from './QuizBegin'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
-import MuiButton from '@material-ui/core/Button'
+import Button from '@material-ui/core/Button'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
@@ -45,7 +45,7 @@ describe('QuizBegin component', () => {
expect(wrapper.find(StyledIcon).exists()).toBeTruthy()
wrapper
.find('.button-start')
- .find(MuiButton)
+ .find(Button)
.simulate('click')
expect(mockUserChallengeUpdateFlag).toHaveBeenCalledWith(
userChallengeData[0],
diff --git a/src/components/Quiz/QuizBegin.tsx b/src/components/Quiz/QuizBegin.tsx
index d70ea91f373f5578527eba1a3fbd68c2e1f1db4d..ef2fe161ea6431c27ded24d9f2e2142cb2884650 100644
--- a/src/components/Quiz/QuizBegin.tsx
+++ b/src/components/Quiz/QuizBegin.tsx
@@ -1,62 +1,63 @@
-import React from 'react'
-import './quizBegin.scss'
-import { Client, useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import quizIcon from 'assets/icons/visu/quiz/questionMark.svg'
-import MuiButton from '@material-ui/core/Button'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useDispatch } from 'react-redux'
-import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
-import ChallengeService from 'services/challenge.service'
-import { updateUserChallengeList } from 'store/challenge/challenge.actions'
-import { UserChallenge } from 'models'
-import StarsContainer from 'components/Challenge/StarsContainer'
-
-interface QuizBeginProps {
- userChallenge: UserChallenge
-}
-
-const QuizBegin: React.FC<QuizBeginProps> = ({
- userChallenge,
-}: QuizBeginProps) => {
- const client: Client = useClient()
- const { t } = useI18n()
- const dispatch = useDispatch()
- const launchQuiz = async () => {
- const challengeService: ChallengeService = new ChallengeService(client)
- const userChallengeUpdated: UserChallenge = await challengeService.updateUserChallenge(
- userChallenge,
- UserChallengeUpdateFlag.QUIZ_START
- )
- dispatch(updateUserChallengeList(userChallengeUpdated))
- }
-
- return (
- <div className="quiz-container">
- <div className="quiz-begin-container">
- <StyledIcon className="quiz-icon" icon={quizIcon} size={180} />
- <StarsContainer
- result={userChallenge.progress.quizProgress}
- isQuizBegin={true}
- />
-
- <div className="quiz-explanation text-18-bold">
- {t('quiz.explanation')}
- </div>
- <div className="button-start">
- <MuiButton
- onClick={launchQuiz}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('duel.start_button')}
- </MuiButton>
- </div>
- </div>
- </div>
- )
-}
-
-export default QuizBegin
+import React from 'react'
+import './quizBegin.scss'
+import { Client, useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import quizIcon from 'assets/icons/visu/quiz/questionMark.svg'
+import Button from '@material-ui/core/Button'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useDispatch } from 'react-redux'
+import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
+import ChallengeService from 'services/challenge.service'
+import { updateUserChallengeList } from 'store/challenge/challenge.actions'
+import { UserChallenge } from 'models'
+import StarsContainer from 'components/Challenge/StarsContainer'
+
+interface QuizBeginProps {
+ userChallenge: UserChallenge
+}
+
+const QuizBegin: React.FC<QuizBeginProps> = ({
+ userChallenge,
+}: QuizBeginProps) => {
+ const client: Client = useClient()
+ const { t } = useI18n()
+ const dispatch = useDispatch()
+ const launchQuiz = async () => {
+ const challengeService: ChallengeService = new ChallengeService(client)
+ const userChallengeUpdated: UserChallenge = await challengeService.updateUserChallenge(
+ userChallenge,
+ UserChallengeUpdateFlag.QUIZ_START
+ )
+ dispatch(updateUserChallengeList(userChallengeUpdated))
+ }
+
+ return (
+ <div className="quiz-container">
+ <div className="quiz-begin-container">
+ <StyledIcon className="quiz-icon" icon={quizIcon} size={180} />
+ <StarsContainer
+ result={userChallenge.progress.quizProgress}
+ isQuizBegin={true}
+ />
+
+ <div className="quiz-explanation text-18-bold">
+ {t('quiz.explanation')}
+ </div>
+ <div className="button-start">
+ <Button
+ aria-label={t('duel.accessibility.button_start_quiz')}
+ onClick={launchQuiz}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('duel.button_start')}
+ </Button>
+ </div>
+ </div>
+ </div>
+ )
+}
+
+export default QuizBegin
diff --git a/src/components/Quiz/QuizCustomQuestionContent.spec.tsx b/src/components/Quiz/QuizCustomQuestionContent.spec.tsx
index 142f27a6a84defc05699af44f62534d221a84136..eb0aca3e52f7a5ad175d58c688c1f9a4037dc2f4 100644
--- a/src/components/Quiz/QuizCustomQuestionContent.spec.tsx
+++ b/src/components/Quiz/QuizCustomQuestionContent.spec.tsx
@@ -5,7 +5,7 @@ import configureStore from 'redux-mock-store'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock'
-import MuiButton from '@material-ui/core/Button'
+import Button from '@material-ui/core/Button'
import QuizExplanationModal from './QuizExplanationModal'
import QuizCustomQuestionContent from './QuizCustomQuestionContent'
import { questionEntity } from '../../../tests/__mocks__/quizData.mock'
@@ -97,7 +97,7 @@ describe('QuizCustomQuestionContent component', () => {
)
expect(wrapper.find(StyledSpinner).exists()).toBeTruthy()
})
- it('should display QuizExplanationModal when click on MuiButton', () => {
+ it('should display QuizExplanationModal when click on Button', () => {
const store = mockStore({
ecolyo: {
global: globalStateData,
@@ -121,7 +121,7 @@ describe('QuizCustomQuestionContent component', () => {
.at(0)
.simulate('change', { target: { value: answer } })
)
- expect(wrapper.find(MuiButton).exists()).toBeTruthy()
+ expect(wrapper.find(Button).exists()).toBeTruthy()
wrapper.find('.btn-secondary-negative').forEach(node => {
node.simulate('click')
})
diff --git a/src/components/Quiz/QuizCustomQuestionContent.tsx b/src/components/Quiz/QuizCustomQuestionContent.tsx
index f1f2ff7ef279af0c526789a9c2022a620e6f99ef..df46b6da0709f592ffd58e1012bf0596511eada0 100644
--- a/src/components/Quiz/QuizCustomQuestionContent.tsx
+++ b/src/components/Quiz/QuizCustomQuestionContent.tsx
@@ -2,7 +2,7 @@ import React, { 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 Button from '@material-ui/core/Button'
import QuizExplanationModal from 'components/Quiz/QuizExplanationModal'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { Answer, QuestionEntity, UserChallenge, UserQuiz } from 'models'
@@ -116,15 +116,16 @@ const QuizCustomQuestionContent: React.FC<QuizCustomQuestionContent> = ({
)}
</div>
{userChoice && (
- <MuiButton
+ <Button
+ aria-label={t('quiz.accessibility.button_validate')}
onClick={validateQuestion}
classes={{
root: 'btn-secondary-negative',
label: 'text-16-normal',
}}
>
- {t('quiz.confirm')}
- </MuiButton>
+ {t('quiz.button_validate')}
+ </Button>
)}
<QuizExplanationModal
open={openModal}
diff --git a/src/components/Quiz/QuizFinish.spec.tsx b/src/components/Quiz/QuizFinish.spec.tsx
index a74dcc54f1bb8d4a0fb4641d3e7f943ecccea8d3..156380aa88169781c9eae2ab0222c6c729551a48 100644
--- a/src/components/Quiz/QuizFinish.spec.tsx
+++ b/src/components/Quiz/QuizFinish.spec.tsx
@@ -5,7 +5,7 @@ import configureStore from 'redux-mock-store'
import QuizFinish from './QuizFinish'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
-import MuiButton from '@material-ui/core/Button'
+import Button from '@material-ui/core/Button'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
import { act } from '@testing-library/react'
@@ -52,7 +52,7 @@ describe('QuizFinish', () => {
</Provider>
)
expect(wrapper.find(StyledIcon).exists()).toBeTruthy()
- wrapper.find(MuiButton).forEach(node => {
+ wrapper.find(Button).forEach(node => {
node.simulate('click')
})
expect(mockUserChallengeUpdateFlag).toHaveBeenCalledWith(
diff --git a/src/components/Quiz/QuizFinish.tsx b/src/components/Quiz/QuizFinish.tsx
index 451f33cb53c277438dac3c0f5db255356d760975..b3dd91a167f6b825c55e6de1e3833368bbf45ace 100644
--- a/src/components/Quiz/QuizFinish.tsx
+++ b/src/components/Quiz/QuizFinish.tsx
@@ -1,101 +1,104 @@
-import React, { useCallback, useMemo } from 'react'
-import './quizFinish.scss'
-import { Client, useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import starResult from 'assets/icons/visu/quiz/starResult.svg'
-import MuiButton from '@material-ui/core/Button'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useDispatch } from 'react-redux'
-import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
-import ChallengeService from 'services/challenge.service'
-import { updateUserChallengeList } from 'store/challenge/challenge.actions'
-import { UserChallenge } from 'models'
-import { useHistory } from 'react-router-dom'
-
-interface QuizFinishProps {
- userChallenge: UserChallenge
-}
-
-const QuizFinish: React.FC<QuizFinishProps> = ({
- userChallenge,
-}: QuizFinishProps) => {
- const client: Client = useClient()
- const { t } = useI18n()
- const history = useHistory()
- const dispatch = useDispatch()
- const challengeService: ChallengeService = useMemo(
- () => new ChallengeService(client),
- [client]
- )
-
- const retryQuiz = useCallback(async () => {
- const userChallengeUpdated: UserChallenge = await challengeService.updateUserChallenge(
- userChallenge,
- UserChallengeUpdateFlag.QUIZ_RESET
- )
- dispatch(updateUserChallengeList(userChallengeUpdated))
- }, [dispatch, userChallenge, challengeService])
-
- const goBack = async () => {
- const userChallengeUpdated: UserChallenge = await challengeService.updateUserChallenge(
- userChallenge,
- UserChallengeUpdateFlag.QUIZ_UPDATE,
- userChallenge.quiz
- )
- dispatch(updateUserChallengeList(userChallengeUpdated))
- history.push('/challenges')
- }
- return (
- <div className="quiz-container">
- <div className="quiz-finish-container">
- <div>
- <div className="score-final-title">{t('quiz.score_final')}</div>
- <div className="score-final">
- <span>{userChallenge.quiz.result}</span> / 5
- </div>
- <div className="score-label">{t('quiz.earn')}</div>
- <div className="score-stars">
- {userChallenge.quiz.result}
- <StyledIcon className="quiz-icon" icon={starResult} size={30} />
- </div>
- </div>
- {userChallenge.quiz.result === 5 ? (
- <div className="button-start">
- <MuiButton
- onClick={goBack}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('quiz.youpi')}
- </MuiButton>
- </div>
- ) : (
- <div className="button-start">
- <MuiButton
- onClick={goBack}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('quiz.go_back')}
- </MuiButton>
- <MuiButton
- onClick={retryQuiz}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('quiz.try_again')}
- </MuiButton>
- </div>
- )}
- </div>
- </div>
- )
-}
-
-export default QuizFinish
+import React, { useCallback, useMemo } from 'react'
+import './quizFinish.scss'
+import { Client, useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import starResult from 'assets/icons/visu/quiz/starResult.svg'
+import Button from '@material-ui/core/Button'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useDispatch } from 'react-redux'
+import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
+import ChallengeService from 'services/challenge.service'
+import { updateUserChallengeList } from 'store/challenge/challenge.actions'
+import { UserChallenge } from 'models'
+import { useHistory } from 'react-router-dom'
+
+interface QuizFinishProps {
+ userChallenge: UserChallenge
+}
+
+const QuizFinish: React.FC<QuizFinishProps> = ({
+ userChallenge,
+}: QuizFinishProps) => {
+ const client: Client = useClient()
+ const { t } = useI18n()
+ const history = useHistory()
+ const dispatch = useDispatch()
+ const challengeService: ChallengeService = useMemo(
+ () => new ChallengeService(client),
+ [client]
+ )
+
+ const retryQuiz = useCallback(async () => {
+ const userChallengeUpdated: UserChallenge = await challengeService.updateUserChallenge(
+ userChallenge,
+ UserChallengeUpdateFlag.QUIZ_RESET
+ )
+ dispatch(updateUserChallengeList(userChallengeUpdated))
+ }, [dispatch, userChallenge, challengeService])
+
+ const goBack = async () => {
+ const userChallengeUpdated: UserChallenge = await challengeService.updateUserChallenge(
+ userChallenge,
+ UserChallengeUpdateFlag.QUIZ_UPDATE,
+ userChallenge.quiz
+ )
+ dispatch(updateUserChallengeList(userChallengeUpdated))
+ history.push('/challenges')
+ }
+ return (
+ <div className="quiz-container">
+ <div className="quiz-finish-container">
+ <div>
+ <div className="score-final-title">{t('quiz.score_final')}</div>
+ <div className="score-final">
+ <span>{userChallenge.quiz.result}</span> / 5
+ </div>
+ <div className="score-label">{t('quiz.earn')}</div>
+ <div className="score-stars">
+ {userChallenge.quiz.result}
+ <StyledIcon className="quiz-icon" icon={starResult} size={30} />
+ </div>
+ </div>
+ {userChallenge.quiz.result === 5 ? (
+ <div className="button-start">
+ <Button
+ aria-label={t('quiz.accessibility.button_end_quiz')}
+ onClick={goBack}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('quiz.button_end_quiz')}
+ </Button>
+ </div>
+ ) : (
+ <div className="button-start">
+ <Button
+ aria-label={t('quiz.accessibility.button_go_back')}
+ onClick={goBack}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('quiz.button_go_back')}
+ </Button>
+ <Button
+ aria-label={t('quiz.accessibility.button_try_again')}
+ onClick={retryQuiz}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('quiz.button_try_again')}
+ </Button>
+ </div>
+ )}
+ </div>
+ </div>
+ )
+}
+
+export default QuizFinish
diff --git a/src/components/Quiz/QuizQuestionContent.tsx b/src/components/Quiz/QuizQuestionContent.tsx
index a54c710a275fd6a584a5867e2130c16cae5787ee..9c8e63b24cae42c533f30f8f6ce02c52b8ccb196 100644
--- a/src/components/Quiz/QuizQuestionContent.tsx
+++ b/src/components/Quiz/QuizQuestionContent.tsx
@@ -2,7 +2,7 @@ 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 Button 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'
@@ -116,15 +116,16 @@ const QuizQuestionContent: React.FC<QuizQuestionContent> = ({
)}
</div>
{userChoice && (
- <MuiButton
+ <Button
+ aria-label={t('quiz.accessibility.button_validate')}
onClick={validateQuestion}
classes={{
root: 'btn-secondary-negative',
label: 'text-16-normal',
}}
>
- {t('quiz.confirm')}
- </MuiButton>
+ {t('quiz.button_validate')}
+ </Button>
)}
<QuizExplanationModal
open={openModal}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 33d9b385e52da2ca0bbd8a513045f2f5d1bb68ff..5de752021533c8606e23895ed13f50aa7ff36eb9 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -237,7 +237,8 @@
"caption_incoming": "Données à venir",
"accessibility": {
"button_go_back": "Retour",
- "button_start": "Lancer le duel"
+ "button_start_duel": "Lancer le duel",
+ "button_start_quiz": "Lancer le quiz"
}
},
"duel_result_modal": {
@@ -649,15 +650,19 @@
"wrong": "Raté !",
"rightAnswer": "Bonne réponse :",
"earn": "Vous remportez",
- "go_back": "Retour",
- "youpi": "Youpi !",
- "try_again": "Rééssayer",
- "confirm": "Valider",
+ "button_go_back": "Retour",
+ "button_end_quiz": "Youpi !",
+ "button_try_again": "Rééssayer",
+ "button_validate": "Valider",
"next": "Suivant",
"consumption_question": "Question sur votre consommation",
"accessibility": {
"window_title": "Fenètre de résultat",
- "button_go_next": "Suivant"
+ "button_end_quiz": "Terminer le quiz",
+ "button_go_back": "Retour",
+ "button_go_next": "Suivant",
+ "button_try_again": "Relancer le quiz",
+ "button_validate": "Valider"
}
},
"splashscreen": {