diff --git a/mon-pix/app/components/campaigns/assessment/skill-review/evaluation-results-tabs/index.gjs b/mon-pix/app/components/campaigns/assessment/skill-review/evaluation-results-tabs/index.gjs index 4935da9fb8b..7a46c73660a 100644 --- a/mon-pix/app/components/campaigns/assessment/skill-review/evaluation-results-tabs/index.gjs +++ b/mon-pix/app/components/campaigns/assessment/skill-review/evaluation-results-tabs/index.gjs @@ -39,7 +39,7 @@ export default class EvaluationResultsTabs extends Component { - + diff --git a/mon-pix/app/components/campaigns/assessment/skill-review/evaluation-results-tabs/trainings.gjs b/mon-pix/app/components/campaigns/assessment/skill-review/evaluation-results-tabs/trainings.gjs index 74d55831aa3..ca3b214d18d 100644 --- a/mon-pix/app/components/campaigns/assessment/skill-review/evaluation-results-tabs/trainings.gjs +++ b/mon-pix/app/components/campaigns/assessment/skill-review/evaluation-results-tabs/trainings.gjs @@ -1,6 +1,38 @@ +import PixButton from '@1024pix/pix-ui/components/pix-button'; import { t } from 'ember-intl'; +import TrainingCard from '../../../../training/card'; + diff --git a/mon-pix/app/components/routes/campaigns/assessment/evaluation-results.gjs b/mon-pix/app/components/routes/campaigns/assessment/evaluation-results.gjs index 9523366ca6c..f789f6b2fa0 100644 --- a/mon-pix/app/components/routes/campaigns/assessment/evaluation-results.gjs +++ b/mon-pix/app/components/routes/campaigns/assessment/evaluation-results.gjs @@ -14,6 +14,10 @@ import EvaluationResultsTabs from '../../../campaigns/assessment/skill-review/ev {{t "common.actions.quit"}} - + diff --git a/mon-pix/app/styles/components/campaigns/assessment/skill-review/evaluation-results-tabs/trainings.scss b/mon-pix/app/styles/components/campaigns/assessment/skill-review/evaluation-results-tabs/trainings.scss new file mode 100644 index 00000000000..db1473e09c3 --- /dev/null +++ b/mon-pix/app/styles/components/campaigns/assessment/skill-review/evaluation-results-tabs/trainings.scss @@ -0,0 +1,52 @@ +.evaluation-results-tab__trainings { + position: relative; + + &--with-modal { + padding: 0 var(--pix-spacing-4x) var(--pix-spacing-4x); + } + + &--with-modal .evaluation-results-tab__trainings-content { + filter: blur(2px); + } +} + +.evaluation-results-tab__trainings-list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); + gap: var(--pix-spacing-6x); + margin-top: var(--pix-spacing-8x); +} + +.evaluation-results-tab__share-results-modal { + position: absolute; + inset: -1rem 0 0; + z-index: 1; + + &::before { + position: absolute; + background-color: var(--pix-primary-900); + border-radius: 1rem; + opacity: 0.4; + content: ''; + inset: 0; + } +} + +.evaluation-results-tab-share-results-modal__content { + @extend %pix-body-m; + + position: absolute; + top: 50%; + left: 50%; + display: flex; + flex-direction: column; + gap: var(--pix-spacing-8x); + align-items: center; + max-width: 36rem; + padding: var(--pix-spacing-8x); + text-align: center; + background-color: var(--pix-neutral-0); + border: 1px solid var(--pix-neutral-100); + border-radius: 1rem; + transform: translate(-50%, -50%); +} diff --git a/mon-pix/app/styles/components/campaigns/index.scss b/mon-pix/app/styles/components/campaigns/index.scss index c6c5d414b97..ac8568d646b 100644 --- a/mon-pix/app/styles/components/campaigns/index.scss +++ b/mon-pix/app/styles/components/campaigns/index.scss @@ -1,3 +1,4 @@ @import 'assessment/skill-review/share-badge-icons'; @import 'assessment/skill-review/evaluation-results-tabs/rewards'; +@import 'assessment/skill-review/evaluation-results-tabs/trainings'; @import 'invited/learner-reconciliation'; diff --git a/mon-pix/tests/integration/components/campaigns/assessment/skill-review/rewards/trainings-test.js b/mon-pix/tests/integration/components/campaigns/assessment/skill-review/rewards/trainings-test.js new file mode 100644 index 00000000000..4784ba46ad0 --- /dev/null +++ b/mon-pix/tests/integration/components/campaigns/assessment/skill-review/rewards/trainings-test.js @@ -0,0 +1,86 @@ +import { render } from '@1024pix/ember-testing-library'; +import { hbs } from 'ember-cli-htmlbars'; +import { module, test } from 'qunit'; + +import setupIntlRenderingTest from '../../../../../../helpers/setup-intl-rendering'; + +module('Integration | Components | Campaigns | Assessment | Evaluation Results Tabs | Trainings', function (hooks) { + setupIntlRenderingTest(hooks); + + test('it should display the trainings list', async function (assert) { + // given + const store = this.owner.lookup('service:store'); + const training1 = store.createRecord('training', { + title: 'Mon super training', + link: 'https://exemple.net/', + duration: { days: 2 }, + }); + const training2 = store.createRecord('training', { + title: 'Mon autre super training', + link: 'https://exemple.net/', + duration: { days: 2 }, + }); + + this.set('trainings', [training1, training2]); + + // when + const screen = await render( + hbs``, + ); + + // then + assert + .dom(screen.getByRole('heading', { name: this.intl.t('pages.skill-review.tabs.trainings.title') })) + .isVisible(); + assert.dom(screen.getByText(this.intl.t('pages.skill-review.tabs.trainings.description'))).isVisible(); + + assert.strictEqual(screen.getAllByRole('link').length, 2); + assert.dom(screen.getByText('Mon super training')).isVisible(); + assert.dom(screen.getByText('Mon autre super training')).isVisible(); + }); + + module('when participation is not already shared', function (hooks) { + let screen; + + hooks.beforeEach(async function () { + // given + this.set('isParticipationShared', false); + + // when + screen = await render( + hbs``, + ); + }); + + test('it should display a dialog with share results button', async function (assert) { + // then + assert.dom(screen.getByRole('dialog')).isVisible(); + assert.dom(screen.getByText(/Envoyez vos résultats pour permettre/)).isVisible(); + assert.dom(screen.getByRole('button', { name: /J'envoie mes résultats/ })).isVisible(); + }); + + test('it should have an inert trainings list', async function (assert) { + // then + const trainingsListTitle = screen.getByRole('heading', { + name: this.intl.t('pages.skill-review.tabs.trainings.title'), + }); + assert.dom(trainingsListTitle).isVisible(); + assert.dom(trainingsListTitle.closest('[role="presentation"]')).hasAttribute('inert'); + }); + }); + + module('when participation is already shared', function () { + test('it should not display a dialog with share results button', async function (assert) { + // given + this.set('isParticipationShared', true); + + // when + const screen = await render( + hbs``, + ); + + // then + assert.dom(screen.queryByRole('dialog')).doesNotExist(); + }); + }); +});