feat(mon-pix): add trainings tab content

mon-pix/app/components/campaigns/assessment/skill-review/evaluation-results-tabs/index.gjs

@@ -39,7 +39,7 @@ export default class EvaluationResultsTabs extends Component {
           <ResultsDetails />
         </Panel>
         <Panel @index={{2}}>
-          <Trainings />
+          <Trainings @trainings={{@trainings}} @isParticipationShared={{@isParticipationShared}} />
         </Panel>
       </:panels>
     </Tabs>

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';
+
 <template>
-  <h2 class="evaluation-results-tab__title">{{t "pages.skill-review.tabs.trainings.title"}}</h2>
-  <p class="evaluation-results-tab__description">{{t "pages.skill-review.tabs.trainings.description"}}</p>
+  <div
+    class="evaluation-results-tab__trainings
+      {{unless @isParticipationShared 'evaluation-results-tab__trainings--with-modal'}}"
+  >
+    <div
+      class="evaluation-results-tab__trainings-content"
+      inert={{unless @isParticipationShared "true"}}
+      role={{unless @isParticipationShared "presentation"}}
+    >
+      <h2 class="evaluation-results-tab__title">{{t "pages.skill-review.tabs.trainings.title"}}</h2>
+      <p class="evaluation-results-tab__description">{{t "pages.skill-review.tabs.trainings.description"}}</p>
+
+      <ul class="evaluation-results-tab__trainings-list">
+        {{#each @trainings as |training|}}
+          <li class="evaluation-results-tab__training">
+            <TrainingCard @training={{training}} />
+          </li>
+        {{/each}}
+      </ul>
+    </div>
+
+    {{#unless @isParticipationShared}}
+      <div class="evaluation-results-tab__share-results-modal" role="dialog">
+        <div class="evaluation-results-tab-share-results-modal__content">
+          <p>Envoyez vos résultats pour permettre à l’organisateur du parcours de vous accompagner.<br />
+            Après avoir partagé, vous bénéficierez d'un accès à ces formations&nbsp;!</p>
+          <PixButton>J'envoie mes résultats</PixButton>
+        </div>
+      </div>
+    {{/unless}}
+  </div>
 </template>

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"}}
       </LinkTo>
     </header>
-    <EvaluationResultsTabs @badges={{@model.campaignParticipationResult.campaignParticipationBadges}} />
+    <EvaluationResultsTabs
+      @badges={{@model.campaignParticipationResult.campaignParticipationBadges}}
+      @isParticipationShared={{@model.campaignParticipationResult.isShared}}
+      @trainings={{@model.trainings}}
+    />
   </div>
 </template>

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%);
+}

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';

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`<Campaigns::Assessment::SkillReview::EvaluationResultsTabs::Trainings @trainings={{this.trainings}} @isParticipationShared="true" />`,
+    );
+
+    // 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`<Campaigns::Assessment::SkillReview::EvaluationResultsTabs::Trainings @isParticipationShared={{this.isParticipationShared}} />`,
+      );
+    });
+
+    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`<Campaigns::Assessment::SkillReview::EvaluationResultsTabs::Trainings @trainings={{this.trainings}} @isParticipationShared={{this.isParticipationShared}} />`,
+      );
+
+      // then
+      assert.dom(screen.queryByRole('dialog')).doesNotExist();
+    });
+  });
+});