feat: ajout mission terminee

betagouv · Nov 18, 2024 · 49e78c1 · 49e78c1
1 parent f66efdf
commit 49e78c1
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 12 deletions.
diff --git a/src/components/custom/Mission/MissionDefis.vue b/src/components/custom/Mission/MissionDefis.vue
@@ -13,6 +13,7 @@
         <MissionCarteDefi :defi="defi" />
       </li>
     </ul>
+    <button v-if="afficherTerminerMission" @click="onClickFinDefis" class="fr-btn">Suivant</button>
   </section>
 </template>
 
@@ -25,5 +26,6 @@
     onClickFinDefis: () => void;
     onClickRetour: () => void;
     nombreEtapesMission: number;
+    afficherTerminerMission: boolean;
   }>();
 </script>
diff --git a/src/components/custom/Mission/MissionTerminee.vue b/src/components/custom/Mission/MissionTerminee.vue
@@ -1,11 +1,45 @@
 <template>
   <div class="fr-container fr-py-6w">
-    <img src="/bg_fin-des-missions.webp" height="200" alt="" />
-    <h1 class="fr-mt-2w">Bravo, vous avez terminé la mission "{{ titreMission }}" !</h1>
-    <router-link to="" class="fr-btn">Retourner à la liste des missions</router-link>
+    <div class="bg-fin-mission fr-p-4w text--center border-radius--md">
+      <div class="conteneur-drapeaux fr-mb-2w">
+        <span class="fr-icon-flag-fill text--bleu" aria-hidden="true" />
+        <span class="fr-icon-flag-fill text--bleu big" aria-hidden="true" />
+        <span class="fr-icon-flag-fill text--bleu" aria-hidden="true" />
+      </div>
+      <h1 class="fr-mt-2w">
+        <span class="text--uppercase">Bravo !</span><br />
+        <span class="text--bleu fr-text--lead text--normal">
+          Vous avez terminé la mission<br />
+          "<span class="fr-text--bold">{{ titre }}</span
+          >" !
+        </span>
+      </h1>
+      <router-link to="" class="fr-btn">Retourner à la liste des missions</router-link>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  defineProps<{ titreMission: string }>();
+  defineProps<{ titre: string }>();
 </script>
+
+<style scoped>
+  .bg-fin-mission {
+    background-image: url('/bg_fin-des-missions.webp');
+  }
+
+  .conteneur-drapeaux {
+    width: 100%;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+  }
+
+  .fr-icon-flag-fill::before {
+    --icon-size: 1.5rem;
+  }
+
+  .big::before {
+    --icon-size: 3.5rem;
+  }
+</style>
diff --git a/src/components/pages/PageMission.vue b/src/components/pages/PageMission.vue
@@ -46,15 +46,9 @@
       :on-click-retour="() => miseAJourEtatCourant('QUIZ_ARTICLE', missionViewModel!.articleEtQuiz.length - 1)"
       :on-click-fin-defis="() => miseAJourEtatCourant('FIN', 0)"
       :nombre-etapes-mission="missionViewModel.nombreEtapesMission"
+      :afficher-terminer-mission="missionViewModel.estTerminable && !missionViewModel.estTerminee"
     />
-    <MissionTerminee
-      v-if="etapeCourante.type === 'FIN'"
-      :titre="missionViewModel.titre"
-      :url-image="missionViewModel.urlImage"
-      texte="lorem"
-      :tag="missionViewModel.tag"
-      :on-click-continuer="() => miseAJourEtatCourant('KYC', 0)"
-    />
+    <MissionTerminee v-if="etapeCourante.type === 'FIN'" :titre="missionViewModel.titre" />
   </div>
 </template>