add quizFinish

src/components/Quiz/QuizFinish.tsx

+import React, { useCallback, useEffect, useState } 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 quizStars from 'assets/icons/visu/quiz/quizStars.svg'
+import StyledStopButton from 'components/CommonKit/Button/StyledStopButton'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useDispatch, useSelector } from 'react-redux'
+import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
+import ChallengeService from 'services/challenge.service'
+import {
+  setChallengeConsumption,
+  updateUserChallengeList,
+} from 'store/challenge/challenge.actions'
+import { UserChallenge } from 'models'
+import { dispatch } from 'd3'
+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 retryQuiz = useCallback(async () => {
+    const challengeService = new ChallengeService(client)
+    const userChallengeUpdated = await challengeService.updateUserChallenge(
+      userChallenge,
+      UserChallengeUpdateFlag.QUIZ_RESET
+    )
+    dispatch(updateUserChallengeList(userChallengeUpdated))
+  }, [client, dispatch, userChallenge])
+  const goBack = () => {
+    history.push('/challenges')
+  }
+  return (
+    <div className="quiz-finish-container">
+      <div className="score-final">{t('quiz.score_final')}</div>
+      <div className="button-start">
+        <StyledStopButton color="secondary" onClick={goBack}>
+          {t('quiz.go_back')}
+        </StyledStopButton>
+        <StyledStopButton color="secondary" onClick={retryQuiz}>
+          {t('quiz.try_again')}
+        </StyledStopButton>
+      </div>
+    </div>
+  )
+}
+
+export default QuizFinish

src/components/Quiz/QuizView.tsx

@@ -10,6 +10,7 @@ import { QuizState } from 'enum/quiz.enum'
 import QuizBegin from './QuizBegin'
 import { UserChallenge } from 'models'
 import QuizQuestion from './QuizQuestion'
+import QuizFinish from './QuizFinish'
 
 const QuizView: React.FC = () => {
   const [headerHeight, setHeaderHeight] = useState<number>(0)
@@ -27,8 +28,10 @@ const QuizView: React.FC = () => {
         return <QuizBegin userChallenge={challenge} />
       case QuizState.ONGOING:
         return <QuizQuestion />
+      case QuizState.DONE:
+        return <QuizFinish userChallenge={challenge} />
       default:
-        return <DuelError />
+        return <QuizBegin userChallenge={challenge} />
     }
   }
 

src/components/Quiz/quizBegin.scss

+@import '../../styles/base/color';
+
 .quiz-begin-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: 1rem 2rem;
-}
+  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
\ No newline at end of file
+  border-radius: 4px;
+  margin-right: 1rem;
+  transition: all 300ms ease;
+  color: $white;
+  background: linear-gradient(180deg, #323339 0%, #25262b 100%);
+  height: 100%;
+}

src/enum/userChallenge.enum.ts

@@ -8,6 +8,7 @@ export enum UserChallengeUpdateFlag {
   DUEL_LOSS = 15,
   QUIZ = 20,
   QUIZ_START = 21,
+  QUIZ_RESET = 22,
   MISSION = 30,
 }