diff --git a/mon-pix/app/components/certification-banners/congratulations-certification-banner.hbs b/mon-pix/app/components/certification-banners/congratulations-certification-banner.hbs index a7bb963fe7d..7978bbcd07f 100644 --- a/mon-pix/app/components/certification-banners/congratulations-certification-banner.hbs +++ b/mon-pix/app/components/certification-banners/congratulations-certification-banner.hbs @@ -1,11 +1,4 @@
-

{{t "pages.certification-joiner.congratulation-banner.message" fullName=@fullName htmlSafe=true}}

diff --git a/mon-pix/app/components/certification-banners/index.hbs b/mon-pix/app/components/certification-banners/index.hbs index 8fa01109708..60b2b6e9157 100644 --- a/mon-pix/app/components/certification-banners/index.hbs +++ b/mon-pix/app/components/certification-banners/index.hbs @@ -1,14 +1,12 @@ -{{#if this.showCongratulationsBanner}} - - <:eligibleComplementaryCertifications> - {{#if (gt this.eligibleComplementaryCertifications.length 0)}} - - {{/if}} - - -{{/if}} + + <:eligibleComplementaryCertifications> + {{#if (gt this.eligibleComplementaryCertifications.length 0)}} + + {{/if}} + + {{#if (gt this.outdatedLowerLevelComplementaryCertifications.length 0)}} <:label>{{t "pages.certification-joiner.form.fields.session-number"}} - + <:label>{{t "pages.certification-joiner.form.fields.first-name"}} - + <:label>{{t "pages.certification-joiner.form.fields.birth-name"}}
@@ -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" diff --git a/mon-pix/app/components/certification-not-certifiable.hbs b/mon-pix/app/components/certification-not-certifiable.hbs index 5731673cc6b..3c4a3a5c8cc 100644 --- a/mon-pix/app/components/certification-not-certifiable.hbs +++ b/mon-pix/app/components/certification-not-certifiable.hbs @@ -5,10 +5,7 @@

{{t "pages.certification-not-certifiable.text"}}

- + {{t "pages.certification-not-certifiable.action.back"}} - + \ No newline at end of file diff --git a/mon-pix/app/styles/components/_certification-joiner.scss b/mon-pix/app/styles/components/_certification-joiner.scss index 133a2dea602..e86cd91f518 100644 --- a/mon-pix/app/styles/components/_certification-joiner.scss +++ b/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; } diff --git a/mon-pix/app/styles/components/_certification-not-certifiable.scss b/mon-pix/app/styles/components/_certification-not-certifiable.scss index c7b0b213979..5e40fab89b3 100644 --- a/mon-pix/app/styles/components/_certification-not-certifiable.scss +++ b/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; } } diff --git a/mon-pix/app/styles/components/_certification-starter.scss b/mon-pix/app/styles/components/_certification-starter.scss index 2591b4516eb..7b698ffe2d7 100644 --- a/mon-pix/app/styles/components/_certification-starter.scss +++ b/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; } } diff --git a/mon-pix/app/styles/components/_congratulations-certification-banner.scss b/mon-pix/app/styles/components/_congratulations-certification-banner.scss index 0fe707a8165..1700e5e82c2 100644 --- a/mon-pix/app/styles/components/_congratulations-certification-banner.scss +++ b/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%; diff --git a/mon-pix/app/templates/authenticated/certifications/join.hbs b/mon-pix/app/templates/authenticated/certifications/join.hbs index b0f75b615ef..907abf942bc 100644 --- a/mon-pix/app/templates/authenticated/certifications/join.hbs +++ b/mon-pix/app/templates/authenticated/certifications/join.hbs @@ -1,18 +1,14 @@ {{page-title (t "pages.certification-start.title")}} -
- - - {{#if this.model.isCertifiable}} - - - - - {{else}} - - {{/if}} - - +
+ {{#if this.model.isCertifiable}} + + + + + {{else}} + + {{/if}}
\ No newline at end of file diff --git a/mon-pix/tests/integration/components/certification-banners/congratulations-certification-banner-test.js b/mon-pix/tests/integration/components/certification-banners/congratulations-certification-banner-test.js index c490585c057..761478dd063 100644 --- a/mon-pix/tests/integration/components/certification-banners/congratulations-certification-banner-test.js +++ b/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,14 +11,12 @@ 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``, ); @@ -28,28 +24,4 @@ module('Integration | Component | Certification Banners | Congratulations Certif // 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``, - ); - - // when - await click(screen.getByRole('button', { name: 'Fermer' })); - - // then - sinon.assert.calledOnce(closeBannerStub); - assert.ok(true); - }); }); diff --git a/mon-pix/translations/en.json b/mon-pix/translations/en.json index 9e968cb8457..8f2ce822168 100644 --- a/mon-pix/translations/en.json +++ b/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" diff --git a/mon-pix/translations/es.json b/mon-pix/translations/es.json index 9b824a73869..55d81e5b630 100644 --- a/mon-pix/translations/es.json +++ b/mon-pix/translations/es.json @@ -763,8 +763,16 @@ "first-name": "Nombre", "session-number": "Número de sesión", "session-number-information": "Comunicado únicamente por el supervisor al inicio de la sesión" - } - }, + }, + "placeholders": { + "birth-day": "DD", + "birth-month": "MM", + "birth-name": "ex: Dupont", + "birth-year": "YYYY", + "first-name": "ex: Jean", + "session-number": "ex: 123456" + } + }, "title": "Unirse a una sesión de certificación" }, "certification-not-certifiable": { diff --git a/mon-pix/translations/fr.json b/mon-pix/translations/fr.json index 0ef73db5acc..666adcf3755 100644 --- a/mon-pix/translations/fr.json +++ b/mon-pix/translations/fr.json @@ -757,6 +757,14 @@ }, "fields-validation": { "session-number-error": "Le numéro de session est composé uniquement de chiffres." + }, + "placeholders": { + "birth-day": "JJ", + "birth-month": "MM", + "birth-name": "ex: Dupont", + "birth-year": "AAAA", + "first-name": "ex: Jean", + "session-number": "ex: 123456" } }, "title": "Rejoindre une session de certification" diff --git a/mon-pix/translations/nl.json b/mon-pix/translations/nl.json index bef6cb2933b..aae7a27443f 100644 --- a/mon-pix/translations/nl.json +++ b/mon-pix/translations/nl.json @@ -763,8 +763,16 @@ "first-name": "Voornaam", "session-number": "Sessienummer", "session-number-information": "Alleen meegedeeld door de surveillant aan het begin van de sessie" - } - }, + }, + "placeholders": { + "birth-day": "DD", + "birth-month": "MM", + "birth-name": "ex: Dupont", + "birth-year": "JJJJ", + "first-name": "ex: Jean", + "session-number": "ex: 123456" + } + }, "title": "Doe mee aan een certificeringssessie" }, "certification-not-certifiable": {