diff --git a/src/assets/icons/visu/quiz/starResult.svg b/src/assets/icons/visu/quiz/starResult.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f3a318164ecb85cd37cfde5cdd4f8b687cc3055f
--- /dev/null
+++ b/src/assets/icons/visu/quiz/starResult.svg
@@ -0,0 +1,9 @@
+<svg width="31" height="29" viewBox="0 0 31 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.998 10.2117L20.7049 8.88865L16.5505 0.638245C16.4371 0.412354 16.2504 0.22949 16.0198 0.118337C15.4415 -0.161338 14.7388 0.0717248 14.4496 0.638245L10.2953 8.88865L1.0021 10.2117C0.745888 10.2476 0.511636 10.3659 0.332287 10.5452C0.115464 10.7635 -0.00401488 11.0572 0.000103019 11.3618C0.00422092 11.6663 0.131599 11.9568 0.354248 12.1694L7.078 18.5912L5.48948 27.6591C5.45223 27.8701 5.47606 28.087 5.55826 28.2854C5.64047 28.4837 5.77776 28.6555 5.95458 28.7813C6.13139 28.9071 6.34065 28.9819 6.55862 28.9971C6.77659 29.0123 6.99456 28.9674 7.18781 28.8675L15.5001 24.5863L23.8123 28.8675C24.0393 28.9858 24.3028 29.0252 24.5554 28.9822C25.1922 28.8746 25.6205 28.283 25.5107 27.6591L23.9221 18.5912L30.6459 12.1694C30.8289 11.9938 30.9497 11.7643 30.9863 11.5133C31.0851 10.8858 30.6386 10.305 29.998 10.2117Z" fill="url(#paint0_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="14.9672" y1="1.91675e-07" x2="14.9672" y2="29" gradientUnits="userSpaceOnUse">
+<stop stop-color="#61F0F2"/>
+<stop offset="1" stop-color="#48C2C4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/components/Quiz/QuizFinish.tsx b/src/components/Quiz/QuizFinish.tsx
index 6f7455af684f38163cdcfa82c7576164897e2400..e1cde34c7b361faeeecdffe517d053261ff55ba7 100644
--- a/src/components/Quiz/QuizFinish.tsx
+++ b/src/components/Quiz/QuizFinish.tsx
@@ -1,8 +1,8 @@
import React, { useCallback, useEffect, useState } from 'react'
-import './quizBegin.scss'
+import './quizFinish.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 starResult from 'assets/icons/visu/quiz/starResult.svg'
import quizStars from 'assets/icons/visu/quiz/quizStars.svg'
import StyledStopButton from 'components/CommonKit/Button/StyledStopButton'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
@@ -41,7 +41,14 @@ const QuizFinish: React.FC<QuizFinishProps> = ({
}
return (
<div className="quiz-finish-container">
- <div className="score-final">{t('quiz.score_final')}</div>
+ <div>
+ <div className="score-final-title">{t('quiz.score_final')}</div>
+ <div className="score-final">5/5</div>
+ <div className="score-final">{t('quiz.earn')}</div>
+ <div className="score-final">
+ 5 <StyledIcon className="quiz-icon" icon={starResult} size={50} />
+ </div>
+ </div>
<div className="button-start">
<StyledStopButton color="secondary" onClick={goBack}>
{t('quiz.go_back')}
diff --git a/src/components/Quiz/QuizQuestion.tsx b/src/components/Quiz/QuizQuestion.tsx
index 0ad4b2e87a43eb3f653b844960d46e5cc0b1d352..ec910f2bdf8ceddfe67e3417277ed01db8d1b77d 100644
--- a/src/components/Quiz/QuizQuestion.tsx
+++ b/src/components/Quiz/QuizQuestion.tsx
@@ -1,6 +1,11 @@
import React, { useEffect } from 'react'
import './QuizBegin.scss'
import { UserChallenge } from 'models'
+import ChallengeService from 'services/challenge.service'
+import { Client, useClient } from 'cozy-client'
+import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
+import { updateUserChallengeList } from 'store/challenge/challenge.actions'
+import { useDispatch } from 'react-redux'
interface QuizQuestion {
userChallenge: UserChallenge
@@ -9,8 +14,17 @@ interface QuizQuestion {
const QuizQuestion: React.FC<QuizQuestion> = ({
userChallenge,
}: QuizQuestion) => {
- const validateQuestion = () => {
+ const client: Client = useClient()
+ const dispatch = useDispatch()
+ const validateQuestion = async () => {
console.log('open modal')
+ //if last question
+ const challengeService = new ChallengeService(client)
+ const userChallengeUpdated = await challengeService.updateUserChallenge(
+ userChallenge,
+ UserChallengeUpdateFlag.QUIZ_FINISH
+ )
+ dispatch(updateUserChallengeList(userChallengeUpdated))
}
useEffect(() => {
diff --git a/src/components/Quiz/quizFinish.scss b/src/components/Quiz/quizFinish.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..c96489d22831144900feedf7079919136bc02e7c 100644
--- a/src/components/Quiz/quizFinish.scss
+++ b/src/components/Quiz/quizFinish.scss
@@ -0,0 +1,19 @@
+@import '../../styles/base/color';
+
+.quiz-finish-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: 1rem 2rem;
+ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
+ border-radius: 4px;
+ margin-right: 1rem;
+ transition: all 300ms ease;
+ color: $white;
+ background: linear-gradient(180deg, #323339 0%, #25262b 100%);
+ height: 70vh;
+}
+.score-final-title {
+ font-weight: bold;
+ font-size: 2rem;
+}
diff --git a/src/enum/userChallenge.enum.ts b/src/enum/userChallenge.enum.ts
index 9ac1ac494d6a66e434b95bdde0c06776c096c9b1..e96f1fd63c421a06006dd817de0994d9b8782fd3 100644
--- a/src/enum/userChallenge.enum.ts
+++ b/src/enum/userChallenge.enum.ts
@@ -8,7 +8,9 @@ export enum UserChallengeUpdateFlag {
DUEL_LOSS = 15,
QUIZ = 20,
QUIZ_START = 21,
- QUIZ_RESET = 22,
+ QUIZ_FINISH = 22,
+ QUIZ_RESET = 23,
+
MISSION = 30,
}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 311a66e23ea2ec4b19cfeb4a014af33b4635a82c..e5cb7d2fa77af2460b19c6b0fdc7fc20ccb096fb 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -392,6 +392,10 @@
}
},
"quiz" : {
- "explanation" : "Répondez correctement au 5 questions et remportez 5 des 15 étoiles nécessaires pour débloquer le défi final"
+ "explanation" : "Répondez correctement au 5 questions et remportez 5 des 15 étoiles nécessaires pour débloquer le défi final",
+ "score_final" : "SCORE FINAL",
+ "earn" : "Vous remportez",
+ "go_back" : "Retour",
+ "try_again" : "Rééssayer"
}
}
diff --git a/src/services/challenge.service.ts b/src/services/challenge.service.ts
index ac26199d4dd2fff6ae49407e2ab32388b9220672..9d3c7d5d379bcb6de94aa658f0fe480718278075 100644
--- a/src/services/challenge.service.ts
+++ b/src/services/challenge.service.ts
@@ -27,6 +27,7 @@ import QuizService from 'services/quiz.service'
import ConsumptionDataManager from 'services/consumption.service'
import { getRelationship } from 'utils/utils'
import quizService from 'services/quiz.service'
+import { QuizState } from 'enum/quiz.enum'
export default class ChallengeService {
private readonly _client: Client
@@ -359,7 +360,26 @@ export default class ChallengeService {
...userChallenge,
quiz: updatedQuiz,
}
- console.log(updatedUserChallenge)
+ break
+ case UserChallengeUpdateFlag.QUIZ_FINISH:
+ //updatedQuiz = await quizService.startUserQuiz(userChallenge.quiz)
+ updatedUserChallenge = {
+ ...userChallenge,
+ quiz: {
+ ...userChallenge.quiz,
+ state: QuizState.DONE,
+ },
+ }
+ break
+ case UserChallengeUpdateFlag.QUIZ_RESET:
+ //updatedQuiz = await quizService.startUserQuiz(userChallenge.quiz)
+ updatedUserChallenge = {
+ ...userChallenge,
+ quiz: {
+ ...userChallenge.quiz,
+ state: QuizState.LOCKED,
+ },
+ }
break
default:
updatedUserChallenge = userChallenge