Envoyez vos résultats pour permettre à l’organisateur du parcours de vous accompagner.
+ Après avoir partagé, vous bénéficierez d'un accès à ces formations !
+ J'envoie mes résultats
+
+
+ {{/unless}}
+
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();
+ });
+ });
+});