route complete

src/assets/icons/visu/quiz/starResult.svg

+<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>

src/components/Quiz/QuizFinish.tsx

 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')}

src/components/Quiz/QuizQuestion.tsx

 import React, { useEffect } from 'react'
 import './quizQuestion.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(() => {

src/components/Quiz/quizFinish.scss

+@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;
+}

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,
 }
 

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"
   }
 }

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