[BUGFIX] Corriger le chevauchement d'affichage des écrans focus et ti…

…mer lors de la certification sur Pix App (PIX-14970).

 #10504

mon-pix/app/components/timed-challenge-instructions.hbs

@@ -1,26 +1,22 @@
 <div class="rounded-panel rounded-panel--no-margin-bottom timed-challenge-instructions">
-  <div class="timed-challenge-instructions__primary">
+  <h1 class="timed-challenge-instructions__primary">
     {{t "pages.timed-challenge-instructions.primary" time=this.allocatedTime htmlSafe=true}}
-  </div>
+  </h1>
 
-  <div class="timed-challenge-instructions__secondary">
+  <p class="timed-challenge-instructions__secondary">
     {{t "pages.timed-challenge-instructions.secondary"}}
-  </div>
+  </p>
 
   <div class="timed-challenge-instructions__allocated-time">
-    <div class="timed-challenge-instructions-allocated-time__gauge">
-      <img class="timed-challenge-instructions-gauge__icon" src="/images/icons/icon-timed-challenge.svg" alt="" />
-      <span class="timed-challenge-instructions-gauge__value">{{this.allocatedTime}}</span>
-    </div>
+    <PixIcon @name="clock" @ariaHidden={{true}} class="timed-challenge-instructions-allocated-time__icon" />
+    <span>{{this.allocatedTime}}</span>
   </div>
 
-  <div class="timed-challenge-instructions__action">
-    <PixButton
-      @triggerAction={{@hasUserConfirmedWarning}}
-      class="timed-challenge-instructions-action__confirmation-button"
-      @variant="success"
-    >
-      {{t "pages.timed-challenge-instructions.action"}}
-    </PixButton>
-  </div>
+  <PixButton
+    @triggerAction={{@hasUserConfirmedWarning}}
+    class="timed-challenge-instructions-action__confirmation-button"
+    @variant="success"
+  >
+    {{t "pages.timed-challenge-instructions.action"}}
+  </PixButton>
 </div>

mon-pix/app/controllers/assessments/challenge.js

@@ -60,6 +60,7 @@ export default class ChallengeController extends Controller {
   get couldDisplayInfoAlert() {
     return (
       !this.hasFocusedOutOfWindow &&
+      this.displayChallenge &&
       !this.model.answer &&
       this.model.challenge.focused &&
       !this.model.assessment.hasFocusedOutChallenge
@@ -163,6 +164,13 @@ export default class ChallengeController extends Controller {
       return true;
     }
 
+    if (this._isTimedChallenge && this._isFocusedCertificationChallenge) {
+      return !!(
+        (this.hasConfirmedFocusChallengeWarningScreen && this.hasUserConfirmedTimedChallengeWarning) ||
+        this.model.assessment.hasTimeoutChallenge
+      );
+    }
+
     if (this._isTimedChallenge) {
       if (this.hasUserConfirmedTimedChallengeWarning || this.model.assessment.hasTimeoutChallenge) return true;
     }
@@ -201,6 +209,15 @@ export default class ChallengeController extends Controller {
   }
 
   get displayTimedChallengeInstructions() {
+    if (this.isTimedChallengeWithoutAnswer && this.isFocusedCertificationChallengeWithoutAnswer) {
+      return (
+        this.hasConfirmedFocusChallengeWarningScreen &&
+        this.isTimedChallengeWithoutAnswer &&
+        !this.hasUserConfirmedTimedChallengeWarning &&
+        !this.model.assessment.hasTimeoutChallenge
+      );
+    }
+
     return (
       this.isTimedChallengeWithoutAnswer &&
       !this.hasUserConfirmedTimedChallengeWarning &&

mon-pix/app/styles/components/_focused-certification-challenge-instructions.scss

@@ -10,44 +10,27 @@
   justify-content: center;
 
   &__image {
-    img {
-      width: 158px;
-      height: 158px;
-    }
+    width: 158px;
+    height: 158px;
   }
 
   &__title {
-    margin-top: 22px;
+    @extend %pix-title-l;
+
+    margin: var(--pix-spacing-6x) 0;
     color: var(--pix-neutral-800);
-    font-size: 3rem;
-    font-family: $font-open-sans;
-    font-style: normal;
-    font-stretch: normal;
-    line-height: 56px;
   }
 
   &__description {
+    @extend %pix-body-l;
+
     max-width: 450px;
-    margin-top: 24px;
-    margin-bottom: 50px;
+    margin-bottom: var(--pix-spacing-6x);
     color: var(--pix-neutral-800);
-    font-weight: 500;
-    font-size: 1.25rem;
-    font-family: $font-roboto;
-    font-style: normal;
-    font-stretch: normal;
     text-align: center;
   }
 
-  &__action {
-    display: flex;
-    justify-content: center;
-  }
-}
-
-.focused-challenge-instructions-action {
   &__confirmation-button {
-    font-size: 0.875rem;
-    text-transform: uppercase;
+    margin-top: var(--pix-spacing-6x);
   }
 }

mon-pix/app/styles/components/_timed-challenge-instructions.scss

@@ -1,72 +1,54 @@
 .timed-challenge-instructions {
   display: flex;
   flex-direction: column;
+  align-items: center;
   justify-content: center;
-  padding: 20px;
+  padding: var(--pix-spacing-10x) var(--pix-spacing-6x);
   overflow: hidden;
   text-align: center;
 
   &__primary {
-    margin-top: 22px;
+    @extend %pix-title-s;
+
     color: var(--pix-neutral-800);
     font-weight: var(--pix-font-bold);
-    font-size: 1.5rem;
-    font-style: normal;
-    font-stretch: normal;
   }
 
   &__secondary {
-    margin-top: 9px;
+    @extend %pix-body-l;
+
+    margin-top: var(--pix-spacing-3x);
     margin-bottom: 50px;
     color: var(--pix-neutral-800);
-    font-size: 1.125rem;
-    font-style: normal;
-    font-stretch: normal;
   }
 
   &__time {
     color: var(--pix-primary-500);
   }
 
   &__allocated-time {
-    color: var(--pix-neutral-800);
-    font-size: 1.7375rem;
-  }
-
-  &__action {
-    display: flex;
-    justify-content: center;
-  }
-}
-
-.timed-challenge-instructions-allocated-time {
-  &__gauge {
     display: flex;
-    flex-direction: row;
+    gap: var(--pix-spacing-2x);
     align-items: center;
-    justify-content: center;
-    width: fit-content;
     height: 50px;
     margin: 0 auto;
-    padding: 4px 12px;
-    line-height: 3.125rem;
+    padding: var(--pix-spacing-1x) var(--pix-spacing-3x);
+    color: var(--pix-neutral-800);
+    font-size: 1.5rem;
     background-color: var(--pix-neutral-20);
     border-radius: 7px;
   }
 }
 
-.timed-challenge-instructions-gauge {
+.timed-challenge-instructions-allocated-time {
   &__icon {
-    width: 42px;
-    padding-right: 6px;
-    padding-bottom: 6px;
+    width: 2.5rem;
+    fill: var(--pix-neutral-800);
   }
 }
 
 .timed-challenge-instructions-action {
   &__confirmation-button {
-    margin-top: 22px;
-    font-size: 0.875rem;
-    text-transform: uppercase;
+    margin-top: var(--pix-spacing-6x);
   }
 }

mon-pix/app/templates/components/focused-certification-challenge-instructions.hbs

@@ -1,22 +1,19 @@
 <div class="focused-certification-challenge-instructions">
-  <div class="focused-certification-challenge-instructions__image">
-    <img src="/images/icone-pix-focus-rounded.svg" alt="" />
-  </div>
-  <div class="focused-certification-challenge-instructions__title">
+  <img src="/images/icone-pix-focus-rounded.svg" alt="" class="focused-certification-challenge-instructions__image" />
+
+  <h1 class="focused-certification-challenge-instructions__title">
     {{t "pages.focused-certification-challenge-instructions.title"}}
-  </div>
+  </h1>
 
-  <div class="focused-certification-challenge-instructions__description">
+  <p class="focused-certification-challenge-instructions__description">
     {{t "pages.focused-certification-challenge-instructions.description"}}
-  </div>
+  </p>
 
-  <div class="focused-certification-challenge-instructions__action">
-    <PixButton
-      @triggerAction={{@hasUserConfirmedWarning}}
-      class="focused-certification-challenge-instructions-action__confirmation-button"
-      @variant="success"
-    >
-      {{t "pages.focused-certification-challenge-instructions.action"}}
-    </PixButton>
-  </div>
+  <PixButton
+    @triggerAction={{@hasUserConfirmedWarning}}
+    class="focused-certification-challenge-instructions__confirmation-button"
+    @variant="success"
+  >
+    {{t "pages.focused-certification-challenge-instructions.action"}}
+  </PixButton>
 </div>

mon-pix/tests/acceptance/challenge-item-test.js

@@ -572,6 +572,64 @@ module('Acceptance | Displaying a challenge of any type', function (hooks) {
         assert.dom(screen.getByText('Mode focus')).exists();
       });
     });
+
+    module('when a challenge is focused and timed', function () {
+      test('should display focus first then timer information page', async function (assert) {
+        // given
+        const user = server.create('user', 'withEmail');
+        await authenticate(user);
+
+        const focusedCertificationChallengeWarningManager = this.owner.lookup(
+          'service:focused-certification-challenge-warning-manager',
+        );
+        focusedCertificationChallengeWarningManager.reset();
+
+        assessment = server.create('assessment', 'ofCertificationType');
+        server.create('challenge', 'forCertification', 'QCM', 'withFocused', { timer: 60 });
+
+        const certificationCourse = server.create('certification-course', {
+          accessCode: 'ABCD12',
+          sessionId: 1,
+          nbChallenges: 2,
+          firstName: 'Alin',
+          lastName: 'Cendy',
+        });
+        assessment = certificationCourse.assessment;
+
+        // when
+        const screen = await visit(`/assessments/${assessment.id}/challenges/0`);
+
+        // then
+        assert
+          .dom(
+            screen.getByRole('heading', {
+              name: 'Mode focus',
+              level: 1,
+            }),
+          )
+          .exists();
+
+        // when
+        await click(screen.getByRole('button', { name: 'Je suis prêt' }));
+
+        // then
+        assert
+          .dom(
+            screen.getByRole('heading', {
+              name: 'Vous disposerez de 1 minute pour réussir la question suivante.',
+              level: 1,
+            }),
+          )
+          .exists();
+
+        // when
+        await click(screen.getByRole('button', { name: `Commencer l'épreuve` }));
+
+        // then
+        assert.dom(screen.getByRole('heading', { name: 'Mode Focus', level: 3 })).exists();
+        assert.dom(screen.getByText('1:00')).exists();
+      });
+    });
   });
 
   module('when assessment is v2 certification', function (hooks) {