[FEATURE] Appliquer les modifications de navigation et de gabarit sur la page "Certification" sur App (PIX-16876).

mon-pix/app/components/certification-banners/congratulations-certification-banner.hbs

@@ -1,11 +1,4 @@
 <div class="congratulations-banner">
-  <PixIconButton
-    @iconName="close"
-    @ariaLabel={{t "common.actions.close"}}
-    @triggerAction={{@closeBanner}}
-    @withBackground={{true}}
-    class="icon-button congratulations-banner__icon"
-  />
   <p class="congratulations-banner__message">
     {{t "pages.certification-joiner.congratulation-banner.message" fullName=@fullName htmlSafe=true}}
   </p>

mon-pix/app/components/certification-banners/index.hbs

@@ -1,14 +1,12 @@
-{{#if this.showCongratulationsBanner}}
-  <CertificationBanners::CongratulationsCertificationBanner @fullName={{@fullName}} @closeBanner={{this.closeBanner}}>
-    <:eligibleComplementaryCertifications>
-      {{#if (gt this.eligibleComplementaryCertifications.length 0)}}
-        <CertificationBanners::EligibleComplementaryCertificationBanner
-          @complementaryCertifications={{this.eligibleComplementaryCertifications}}
-        />
-      {{/if}}
-    </:eligibleComplementaryCertifications>
-  </CertificationBanners::CongratulationsCertificationBanner>
-{{/if}}
+<CertificationBanners::CongratulationsCertificationBanner @fullName={{@fullName}}>
+  <:eligibleComplementaryCertifications>
+    {{#if (gt this.eligibleComplementaryCertifications.length 0)}}
+      <CertificationBanners::EligibleComplementaryCertificationBanner
+        @complementaryCertifications={{this.eligibleComplementaryCertifications}}
+      />
+    {{/if}}
+  </:eligibleComplementaryCertifications>
+</CertificationBanners::CongratulationsCertificationBanner>
 
 {{#if (gt this.outdatedLowerLevelComplementaryCertifications.length 0)}}
   <CertificationBanners::OutdatedComplementaryCertificationBanner

mon-pix/app/components/certification-banners/index.js

@@ -1,14 +1,6 @@
-import { action } from '@ember/object';
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
 
 export default class Index extends Component {
-  @tracked displayCongratulationsBanner = true;
-
-  get showCongratulationsBanner() {
-    return this.displayCongratulationsBanner;
-  }
-
   get eligibleComplementaryCertifications() {
     return (
       this.args.certificationEligibility.complementaryCertifications?.filter(
@@ -25,9 +17,4 @@ export default class Index extends Component {
       ) ?? []
     );
   }
-
-  @action
-  closeBanner() {
-    this.displayCongratulationsBanner = false;
-  }
 }

mon-pix/app/components/certification-joiner.hbs

@@ -10,19 +10,29 @@
       @validationStatus={{this.sessionIdStatus}}
       pattern={{this.SESSION_ID_VALIDATION_PATTERN}}
       title={{t "pages.certification-joiner.form.fields-validation.session-number-error"}}
-      size="6"
       {{on "input" this.checkSessionIdIsValid}}
       {{on "change" this.setSessionId}}
       inputmode="decimal"
       required="true"
       @subLabel={{t "pages.certification-joiner.form.fields.session-number-information"}}
+      placeholder={{t "pages.certification-joiner.form.placeholders.session-number"}}
     >
       <:label>{{t "pages.certification-joiner.form.fields.session-number"}}</:label>
     </PixInput>
-    <PixInput @id="certificationJoinerFirstName" required="true" {{on "change" this.setFirstName}}>
+    <PixInput
+      @id="certificationJoinerFirstName"
+      required="true"
+      {{on "change" this.setFirstName}}
+      placeholder={{t "pages.certification-joiner.form.placeholders.first-name"}}
+    >
       <:label>{{t "pages.certification-joiner.form.fields.first-name"}}</:label>
     </PixInput>
-    <PixInput @id="certificationJoinerLastName" required="true" {{on "change" this.setLastName}}>
+    <PixInput
+      @id="certificationJoinerLastName"
+      required="true"
+      {{on "change" this.setLastName}}
+      placeholder={{t "pages.certification-joiner.form.placeholders.birth-name"}}
+    >
       <:label>{{t "pages.certification-joiner.form.fields.birth-name"}}</:label>
     </PixInput>
     <div>
@@ -35,7 +45,7 @@
           min="1"
           max="31"
           type="number"
-          placeholder="JJ"
+          placeholder={{t "pages.certification-joiner.form.placeholders.birth-day"}}
           {{on "change" this.setDayOfBirth}}
           {{on "input" this.handleDayInputChange}}
           {{on "focus-in" this.handleInputFocus}}
@@ -49,7 +59,7 @@
           min="1"
           max="12"
           type="number"
-          placeholder="MM"
+          placeholder={{t "pages.certification-joiner.form.placeholders.birth-month"}}
           {{on "change" this.setMonthOfBirth}}
           {{on "input" this.handleMonthInputChange}}
           {{on "focus-in" this.handleInputFocus}}
@@ -63,7 +73,7 @@
           min="1900"
           max="2100"
           type="number"
-          placeholder="AAAA"
+          placeholder={{t "pages.certification-joiner.form.placeholders.birth-year"}}
           {{on "change" this.setYearOfBirth}}
           {{on "focus-in" this.handleInputFocus}}
           @screenReaderOnly="true"

mon-pix/app/components/certification-not-certifiable.hbs

@@ -5,10 +5,7 @@
   <p class="certification-not-certifiable__text">
     {{t "pages.certification-not-certifiable.text"}}
   </p>
-  <LinkTo
-    @route="authenticated"
-    class="button button--link button--big button--thin certification-not-certifiable__button"
-  >
+  <PixButtonLink @route="authenticated" class="certification-not-certifiable__button">
     {{t "pages.certification-not-certifiable.action.back"}}
-  </LinkTo>
+  </PixButtonLink>
 </PixBlock>

mon-pix/app/styles/components/_certification-joiner.scss

@@ -5,7 +5,7 @@
   text-rendering: optimizelegibility;
 
   &__title {
-    @extend %pix-title-m;
+    @extend %pix-title-s;
 
     margin-bottom: var(--pix-spacing-4x);
     text-align: center;
@@ -22,7 +22,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--pix-spacing-6x);
-    width: 300px;
+    width: 410px;
     margin: 0 auto;
   }
 

mon-pix/app/styles/components/_certification-not-certifiable.scss

@@ -1,38 +1,32 @@
 @use 'pix-design-tokens/breakpoints';
 @use 'pix-design-tokens/typography';
 
-.certification-not-certifiable__panel {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-right: 10px;
-  margin-bottom: 50px;
-  margin-left: 10px;
-  padding: var(--pix-spacing-8x);
-  text-rendering: optimizelegibility;
-
-  @include breakpoints.device-is('desktop') {
-    padding: 50px 70px 40px;
+.certification-not-certifiable {
+
+  &__panel {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: var(--pix-spacing-3x) 0;
+    padding: var(--pix-spacing-4x) var(--pix-spacing-4x) var(--pix-spacing-12x) var(--pix-spacing-4x);
+
+    @include breakpoints.device-is('tablet') {
+      margin: var(--pix-spacing-6x) 0;
+    }
   }
-}
-
-.certification-not-certifiable__button {
-  margin-top: 20px;
-}
 
-.certification-not-certifiable__title {
-  @extend %pix-title-m;
-
-  text-align: center;
-}
+  &__button {
+    margin-top: 20px;
+  }
 
-.certification-not-certifiable__text {
-  @extend %pix-body-l;
+  &__title {
+    @extend %pix-title-m;
+  }
 
-  margin-top: var(--pix-spacing-4x);
-  text-align: center;
+  &__text {
+    @extend %pix-body-l;
 
-  @include breakpoints.device-is('desktop') {
-    max-width: 850px;
+    margin-top: var(--pix-spacing-4x);
+    text-align: center;
   }
 }

mon-pix/app/styles/components/_certification-starter.scss

@@ -13,12 +13,11 @@
 
 .certification-start-page {
   &__block {
-    max-width: 980px;
-    margin-bottom: var(--pix-spacing-8x);
-    padding: var(--pix-spacing-3x);
+    margin: var(--pix-spacing-3x) 0;
+    padding: var(--pix-spacing-4x) var(--pix-spacing-4x) var(--pix-spacing-12x) var(--pix-spacing-4x);
 
-    @include breakpoints.device-is('mobile') {
-      padding: var(--pix-spacing-4x);
+    @include breakpoints.device-is('tablet') {
+      margin: var(--pix-spacing-6x) 0;
     }
   }
 

mon-pix/app/styles/components/_congratulations-certification-banner.scss

@@ -20,23 +20,11 @@
   }
 }
 
-.congratulations-banner__icon {
-  position: absolute;
-  top: var(--pix-spacing-2x);
-  right: var(--pix-spacing-2x);
-  color: var(--pix-neutral-0);
-
-  &:hover,
-  &:active {
-    color: var(--pix-certif-500);
-  }
-}
-
 .congratulations-banner__message {
   margin: var(--pix-spacing-6x) 0;
   text-align: center;
 
-  @extend %pix-title-s;
+  @extend %pix-title-m;
 
   @include breakpoints.device-is('tablet') {
     margin: var(--pix-spacing-1x) 0 var(--pix-spacing-6x) 0;
@@ -97,10 +85,8 @@
 .congratulations-banner__links {
   display: flex;
   flex-direction: column;
+  gap: var(--pix-spacing-2x);
   align-items: center;
-  justify-content: space-around;
-  width: 80%;
-  margin-top: 24px;
 
   @include breakpoints.device-is('tablet') {
     flex-direction: row;
@@ -113,15 +99,12 @@
   gap: var(--pix-spacing-2x);
   align-items: center;
   justify-content: center;
-  width: 100%;
-  margin-bottom: 12px;
   padding: var(--pix-spacing-1x) var(--pix-spacing-4x);
-  font-weight: var(--pix-font-medium);
-  line-height: 2rem;
-  border: 1px solid var(--pix-neutral-20);
-  border-radius: 4px;
+  font-weight: var(--pix-font-bold);
+  border: 2px solid var(--pix-neutral-0);
+  border-radius: 50px;
 
-  @extend %pix-body-s;
+  @extend %pix-body-m;
 
   @include breakpoints.device-is('tablet') {
     width: 45%;

mon-pix/app/templates/authenticated/certifications/join.hbs

@@ -1,18 +1,14 @@
 {{page-title (t "pages.certification-start.title")}}
 
 <Global::AppLayout>
-  <main class="main" role="main">
-    <PixBackgroundHeader id="main">
-
-      {{#if this.model.isCertifiable}}
-        <PixBlock @shadow="heavy" class="certification-start-page__block">
-          <CertificationBanners @certificationEligibility={{this.model}} @fullName={{this.currentUser.user.fullName}} />
-          <CertificationJoiner @onStepChange={{this.changeStep}} />
-        </PixBlock>
-      {{else}}
-        <CertificationNotCertifiable />
-      {{/if}}
-
-    </PixBackgroundHeader>
+  <main id="main" class="global-page-container" role="main">
+    {{#if this.model.isCertifiable}}
+      <PixBlock class="certification-start-page__block">
+        <CertificationBanners @certificationEligibility={{this.model}} @fullName={{this.currentUser.user.fullName}} />
+        <CertificationJoiner @onStepChange={{this.changeStep}} />
+      </PixBlock>
+    {{else}}
+      <CertificationNotCertifiable />
+    {{/if}}
   </main>
 </Global::AppLayout>

mon-pix/tests/integration/components/certification-banners/congratulations-certification-banner-test.js

@@ -1,8 +1,6 @@
 import { render } from '@1024pix/ember-testing-library';
-import { click } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
-import sinon from 'sinon';
 
 import setupIntlRenderingTest from '../../../helpers/setup-intl-rendering';
 
@@ -13,43 +11,17 @@ module('Integration | Component | Certification Banners | Congratulations Certif
     // given
     const store = this.owner.lookup('service:store');
     this.set('fullName', 'Fifi Brindacier');
-    this.set('closeBanner', () => {});
     this.set('certificationEligibility', store.createRecord('is-certifiable', {}));
 
     // when
     const screen = await render(
       hbs`<CertificationBanners::CongratulationsCertificationBanner
   @fullName={{this.fullName}}
-  @closeBanner={{this.closeBanner}}
   @certificationEligibility={{this.certificationEligibility}}
 />`,
     );
 
     // then
     assert.ok(screen.getByText('Bravo Fifi Brindacier, votre profil Pix est certifiable.'));
   });
-
-  test('calls the closeBanner method when closing the banner', async function (assert) {
-    // given
-    const store = this.owner.lookup('service:store');
-    const closeBannerStub = sinon.stub();
-    this.set('closeBanner', closeBannerStub);
-    this.set('fullName', 'Fifi Brindacier');
-    this.set('certificationEligibility', store.createRecord('is-certifiable', {}));
-
-    const screen = await render(
-      hbs`<CertificationBanners::CongratulationsCertificationBanner
-  @fullName={{this.fullName}}
-  @closeBanner={{this.closeBanner}}
-  @certificationEligibility={{this.certificationEligibility}}
-/>`,
-    );
-
-    // when
-    await click(screen.getByRole('button', { name: 'Fermer' }));
-
-    // then
-    sinon.assert.calledOnce(closeBannerStub);
-    assert.ok(true);
-  });
 });

mon-pix/translations/en.json

@@ -757,6 +757,14 @@
         },
         "fields-validation": {
           "session-number-error": "The session ID must only contain numbers."
+        },
+        "placeholders": {
+          "birth-day": "DD",
+          "birth-month": "MM",
+          "birth-name": "ex: Dupont",
+          "birth-year": "YYYY",
+          "first-name": "ex: Jean",
+          "session-number": "ex: 123456"
         }
       },
       "title": "Join a certification session"