[FEATURE] Afficher la carte de conclusion des flashcards et gérer le score (PIX-14312)

mon-pix/app/components/module/element/flashcards/flashcards-outro-card.gjs

@@ -0,0 +1,36 @@
+import PixButton from '@1024pix/pix-ui/components/pix-button';
+import PixMessage from '@1024pix/pix-ui/components/pix-message';
+import { t } from 'ember-intl';
+
+<template>
+  <div class="element-flashcards-outro-card">
+
+    <div class="element-flashcards-outro-card__header">
+      <PixMessage class="element-flashcards-outro-card__alert" @type="success" @withIcon="true">
+        {{t "pages.modulix.flashcards.completed"}}
+      </PixMessage>
+      <p class="element-flashcards-outro-card__title">{{@title}}</p>
+    </div>
+
+    <div>
+      <p class="element-flashcards-outro-card__question">{{t "pages.modulix.flashcards.answerDirection"}}</p>
+      <ul class="element-flashcards-outro-card__counter">
+        <li class="element-flashcards-outro-card__counter__yes">
+          {{t "pages.modulix.flashcards.counters.yes" [email protected]}}
+        </li>
+        <li class="element-flashcards-outro-card__counter__almost">
+          {{t "pages.modulix.flashcards.counters.almost" [email protected]}}
+        </li>
+        <li class="element-flashcards-outro-card__counter__no">
+          {{t "pages.modulix.flashcards.counters.no" [email protected]}}
+        </li>
+      </ul>
+    </div>
+
+    <div class="element-flashcards-outro-card__footer">
+      <PixButton @triggerAction={{@onRetry}} @iconBefore="refresh" @variant="tertiary" @size="small">
+        {{t "pages.modulix.buttons.flashcards.retry"}}
+      </PixButton>
+    </div>
+  </div>
+</template>

mon-pix/app/components/module/element/flashcards/flashcards.gjs

@@ -7,6 +7,9 @@ import { t } from 'ember-intl';
 import { eq } from 'ember-truth-helpers';
 import ModulixFlashcardsCard from 'mon-pix/components/module/element/flashcards/flashcards-card';
 import ModulixFlashcardsIntroCard from 'mon-pix/components/module/element/flashcards/flashcards-intro-card';
+import ModulixFlashcardsOutroCard from 'mon-pix/components/module/element/flashcards/flashcards-outro-card';
+
+const INITIAL_COUNTERS_VALUE = { yes: 0, almost: 0, no: 0 };
 
 export default class ModulixFlashcards extends Component {
   @tracked
@@ -30,6 +33,13 @@ export default class ModulixFlashcards extends Component {
    */
   currentCardIndex = 0;
 
+  @tracked
+  /**
+   * Stores the number of times an answer has been chosen
+   * @type {object}
+   */
+  counters = { ...INITIAL_COUNTERS_VALUE };
+
   get currentCard() {
     return this.args.flashcards.cards[this.currentCardIndex];
   }
@@ -43,7 +53,15 @@ export default class ModulixFlashcards extends Component {
   }
 
   get footerIsEmpty() {
-    return this.currentStep === 'intro';
+    return this.currentStep === 'intro' || this.currentStep === 'outro';
+  }
+
+  @action
+  retry() {
+    this.currentStep = 'intro';
+    this.currentCardIndex = 0;
+    this.displayedSideName = 'recto';
+    this.counters = { ...INITIAL_COUNTERS_VALUE };
   }
 
   @action
@@ -56,9 +74,17 @@ export default class ModulixFlashcards extends Component {
     this.displayedSideName = this.displayedSideName === 'recto' ? 'verso' : 'recto';
   }
 
+  incrementCounterFor(userAssessment) {
+    this.counters[userAssessment]++;
+  }
+
   goToNextCard() {
-    this.currentCardIndex++;
-    this.displayedSideName = 'recto';
+    if (this.currentCardIndex < this.numberOfCards - 1) {
+      this.currentCardIndex++;
+      this.displayedSideName = 'recto';
+    } else {
+      this.currentStep = 'outro';
+    }
   }
 
   @action
@@ -68,6 +94,7 @@ export default class ModulixFlashcards extends Component {
       cardId: this.currentCard.id,
     };
     this.args.onSelfAssessment(selfAssessmentData);
+    this.incrementCounterFor(userAssessment);
     this.goToNextCard();
   }
 
@@ -90,6 +117,10 @@ export default class ModulixFlashcards extends Component {
         />
       {{/if}}
 
+      {{#if (eq this.currentStep "outro")}}
+        <ModulixFlashcardsOutroCard @title={{@flashcards.title}} @onRetry={{this.retry}} @counters={{this.counters}} />
+      {{/if}}
+
       <div class="element-flashcards__footer {{if this.footerIsEmpty 'element-flashcards__footer--empty'}}">
         {{#if (eq this.currentStep "cards")}}
           {{#if (eq this.displayedSideName "recto")}}
@@ -108,7 +139,7 @@ export default class ModulixFlashcards extends Component {
                 type="button"
                 {{on "click" (fn this.onSelfAssessment "no")}}
               >
-                {{t "pages.modulix.buttons.flashcards.answers.notAtAll"}}
+                {{t "pages.modulix.buttons.flashcards.answers.no"}}
               </button>
               <button
                 class="element-flashcards__footer__answer__button element-flashcards__footer__answer__button--almost"

mon-pix/app/styles/components/module/_flashcards-card.scss

@@ -1,5 +1,7 @@
 .element-flashcards-card,
-.element-flashcards-intro-card {
+.element-flashcards-intro-card,
+.element-flashcards-outro-card,
+{
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -64,7 +66,8 @@
   }
 }
 
-.element-flashcards-intro-card {
+.element-flashcards-intro-card,
+.element-flashcards-outro-card {
   align-items: center;
   padding: var(--pix-spacing-2x);
   padding-bottom: var(--pix-spacing-6x);
@@ -75,3 +78,57 @@
   }
 }
 
+.element-flashcards-outro-card {
+
+  &__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--pix-spacing-4x);
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-height: 173px;
+    text-align: center;
+    background-image: url("/images/modulix/flashcards-outro-image.svg");
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+
+  &__alert {
+    @extend %pix-title-xs;
+
+    padding: var(--pix-spacing-1x) var(--pix-spacing-4x);
+    color: var(--pix-neutral-0);
+  }
+
+  &__title {
+    padding: 0 var(--pix-spacing-4x);
+    color: var(--pix-neutral-0);
+  }
+
+  &__question {
+    @extend %pix-body-s;
+
+    margin-bottom: var(--pix-spacing-2x);
+    font-weight: var(--pix-font-bold);
+  }
+
+  &__counter {
+    @extend %pix-body-l;
+
+    font-weight: var(--pix-font-bold);
+
+    &__yes {
+      color: var(--pix-success-500);
+    }
+
+    &__almost {
+      color: var(--pix-warning-500);
+    }
+
+    &__no {
+      color: var(--pix-error-500);
+    }
+  }
+}
+

mon-pix/tests/integration/components/module/flashcards-card_test.gjs

@@ -1,7 +1,6 @@
 import { clickByName, render } from '@1024pix/ember-testing-library';
 import { t } from 'ember-intl/test-support';
 import ModulixFlashcardsCard from 'mon-pix/components/module/element/flashcards/flashcards-card';
-// eslint-disable-next-line no-restricted-imports
 import { module, test } from 'qunit';
 import sinon from 'sinon';
 

mon-pix/tests/integration/components/module/flashcards-intro-card_test.gjs

@@ -1,7 +1,6 @@
 import { clickByName, render } from '@1024pix/ember-testing-library';
 import { t } from 'ember-intl/test-support';
 import ModulixFlashcardsIntroCard from 'mon-pix/components/module/element/flashcards/flashcards-intro-card';
-// eslint-disable-next-line no-restricted-imports
 import { module, test } from 'qunit';
 import sinon from 'sinon';
 

mon-pix/tests/integration/components/module/flashcards-outro-card_test.gjs

@@ -0,0 +1,46 @@
+import { clickByName, render } from '@1024pix/ember-testing-library';
+import { t } from 'ember-intl/test-support';
+import ModulixFlashcardsOutroCard from 'mon-pix/components/module/element/flashcards/flashcards-outro-card';
+import { module, test } from 'qunit';
+import sinon from 'sinon';
+
+import setupIntlRenderingTest from '../../../helpers/setup-intl-rendering';
+
+module('Integration | Component | Module | Flashcards Outro Card', function (hooks) {
+  setupIntlRenderingTest(hooks);
+
+  test('should display an outro card', async function (assert) {
+    // given
+    const counters = { yes: 1, almost: 2, no: 1 };
+    const title = 'Introduction à la poésie';
+
+    // when
+
+    const screen = await render(
+      <template><ModulixFlashcardsOutroCard @counters={{counters}} @title={{title}} /></template>,
+    );
+
+    // then
+    assert.ok(screen.getByText('Introduction à la poésie'));
+    assert.ok(screen.getByText(`Oui ! : ${counters.yes}`));
+    assert.ok(screen.getByText(`Presque : ${counters.almost}`));
+    assert.ok(screen.getByText(`Pas du tout : ${counters.no}`));
+    assert.dom(screen.getByRole('button', { name: t('pages.modulix.buttons.flashcards.retry') })).exists();
+  });
+
+  module('when we click on "Réessayer"', function () {
+    test('should call the onRetry method', async function (assert) {
+      // given
+      const title = 'Introduction à la poésie';
+      const onRetryStub = sinon.stub();
+
+      await render(<template><ModulixFlashcardsOutroCard @title={{title}} @onRetry={{onRetryStub}} /></template>);
+
+      // when
+      await clickByName(t('pages.modulix.buttons.flashcards.retry'));
+
+      // then
+      assert.true(onRetryStub.calledOnce);
+    });
+  });
+});