[FEATURE] Relier le composant transitoire à la page de fin de parcours et à la modal du tab "Formation"(PIX-17016)

 #11827

Author: pix-service-auto-merge

api/config/feature-toggles-config.js

@@ -5,6 +5,12 @@ export default {
     defaultValue: false,
     tags: ['frontend'],
   },
+  isModalSentResultEnabled: {
+    description: 'Used to enable display of sent-results-modal',
+    type: 'boolean',
+    defaultValue: false,
+    tags: ['frontend', 'team-devcomp'],
+  },
   isV3CertificationAttestationEnabled: {
     description: 'Used to enable new certification attestation for V3',
     type: 'boolean',

api/db/seeds/data/team-devcomp/build-campaigns.js

@@ -13,6 +13,7 @@ async function _createScoCampaigns(databaseBuilder, trainingIds, participantCoun
     targetProfileId: PIX_EDU_SMALL_TARGET_PROFILE_ID,
     configCampaign: {
       participantCount,
+      completionDistribution: { started: participantCount },
       profileDistribution: { beginner: 1, perfect: 1, blank: 1 },
       recommendedTrainingsIds: trainingIds,
     },

api/src/shared/config.js

@@ -522,10 +522,12 @@ const configuration = (function () {
     config.featureToggles.deprecatePoleEmploiPushNotification = false;
     config.featureToggles.isAlwaysOkValidateNextChallengeEndpointEnabled = false;
     config.featureToggles.isDirectMetricsEnabled = false;
+    config.featureToggles.isModalSentResultEnabled = false;
     config.featureToggles.isNeedToAdjustCertificationAccessibilityEnabled = false;
     config.featureToggles.isOppsyDisabled = false;
     config.featureToggles.isPixAppNewLayoutEnabled = true;
     config.featureToggles.isPixCompanionEnabled = false;
+    config.featureToggles.isPixAdminNewSidebarEnabled = false;
     config.featureToggles.isSelfAccountDeletionEnabled = false;
     config.featureToggles.isQuestEnabled = false;
     config.featureToggles.isAsyncQuestRewardingCalculationEnabled = false;

api/tests/shared/acceptance/application/feature-toggles/feature-toggle-controller_test.js

@@ -25,6 +25,7 @@ describe('Acceptance | Shared | Application | Controller | feature-toggle', func
             'is-always-ok-validate-next-challenge-endpoint-enabled': false,
             'is-async-quest-rewarding-calculation-enabled': false,
             'is-direct-metrics-enabled': false,
+            'is-modal-sent-result-enabled': false,
             'is-need-to-adjust-certification-accessibility-enabled': false,
             'is-oppsy-disabled': false,
             'is-pix-app-new-layout-enabled': true,

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

@@ -66,6 +66,7 @@ export default class EvaluationResultsTabs extends Component {
                 @questResults={{@questResults}}
                 @campaignParticipationResult={{@campaignParticipationResult}}
                 @campaignId={{@campaign.id}}
+                @onResultsShared={{@onResultsShared}}
               />
             </Panel>
           {{/if}}

mon-pix/app/components/campaigns/assessment/results/evaluation-results-tabs/trainings.gjs

@@ -39,6 +39,7 @@ export default class EvaluationResultsTabsTrainings extends Component {
 
       const campaignParticipationResultToShare = this.args.campaignParticipationResult;
       await this.campaignParticipationResult.share(campaignParticipationResultToShare, this.args.questResults);
+      this.args.onResultsShared();
 
       campaignParticipationResultToShare.isShared = true;
       campaignParticipationResultToShare.canImprove = false;

mon-pix/app/components/campaigns/assessment/results/quit-results.gjs

@@ -25,34 +25,34 @@ export default class QuitResults extends Component {
       <button class="evaluation-results-header__back-link" type="button" {{on "click" this.toggleModal}}>
         {{t "common.actions.quit"}}
       </button>
-      <PixModal
-        @title={{t "pages.evaluation-results.quit-results.modal.title"}}
-        @onCloseButtonClick={{this.toggleModal}}
-        @showModal={{this.showModal}}
-      >
-        <:content>
-          <p class="quit-results__first-paragraph">{{t
-              "pages.evaluation-results.quit-results.modal.content-information"
-            }}</p>
-          <p><strong>{{t "pages.evaluation-results.quit-results.modal.content-instruction"}}</strong></p>
-        </:content>
-
-        <:footer>
-          <div class="quit-results__footer">
-            <PixButton @variant="secondary" @triggerAction={{this.toggleModal}}>
-              {{t "pages.evaluation-results.quit-results.modal.actions.cancel-to-share"}}
-            </PixButton>
-
-            <PixButtonLink @href="authenticated" @variant="primary">
-              {{t "pages.evaluation-results.quit-results.modal.actions.quit-without-sharing"}}
-            </PixButtonLink>
-          </div>
-        </:footer>
-      </PixModal>
     {{else}}
       <LinkTo @route="authenticated" class="evaluation-results-header__back-link">
         {{t "common.actions.quit"}}
       </LinkTo>
     {{/if}}
+    <PixModal
+      @title={{t "pages.evaluation-results.quit-results.modal.title"}}
+      @onCloseButtonClick={{this.toggleModal}}
+      @showModal={{this.showModal}}
+    >
+      <:content>
+        <p class="quit-results__first-paragraph">{{t
+            "pages.evaluation-results.quit-results.modal.content-information"
+          }}</p>
+        <p><strong>{{t "pages.evaluation-results.quit-results.modal.content-instruction"}}</strong></p>
+      </:content>
+
+      <:footer>
+        <div class="quit-results__footer">
+          <PixButton @variant="secondary" @triggerAction={{this.toggleModal}}>
+            {{t "pages.evaluation-results.quit-results.modal.actions.cancel-to-share"}}
+          </PixButton>
+
+          <PixButtonLink @href="authenticated" @variant="primary">
+            {{t "pages.evaluation-results.quit-results.modal.actions.quit-without-sharing"}}
+          </PixButtonLink>
+        </div>
+      </:footer>
+    </PixModal>
   </template>
 }

mon-pix/app/components/routes/campaigns/assessment/evaluation-results.gjs

@@ -1,15 +1,24 @@
 import { action } from '@ember/object';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { t } from 'ember-intl';
 import ENV from 'mon-pix/config/environment';
 
 import EvaluationResultsHero from '../../../campaigns/assessment/results/evaluation-results-hero';
 import EvaluationResultsTabs from '../../../campaigns/assessment/results/evaluation-results-tabs';
+import EvaluationSentResultsModal from '../../../campaigns/assessment/results/evaluation-sent-results-modal';
 import QuitResults from '../../../campaigns/assessment/results/quit-results';
 
 export default class EvaluationResults extends Component {
   @service tabManager;
+  @service featureToggles;
+
+  @tracked showEvaluationResultsModal = false;
+
+  get isModalSentResultEnabled() {
+    return this.featureToggles.featureToggles?.isModalSentResultEnabled;
+  }
 
   get hasTrainings() {
     return Boolean(this.args.model.trainings.length);
@@ -20,6 +29,10 @@ export default class EvaluationResults extends Component {
     return !isAutonomousCourse && !this.args.model.campaign.isForAbsoluteNovice;
   }
 
+  get trainingsForModal() {
+    return this.args.model.trainings.slice(0, 2);
+  }
+
   @action
   showTrainings() {
     const tabElement = document.querySelector('[role="tablist"]');
@@ -33,6 +46,16 @@ export default class EvaluationResults extends Component {
     this.tabManager.setActiveTab(2);
   }
 
+  @action
+  shareResults() {
+    this.showEvaluationResultsModal = true;
+  }
+
+  @action
+  closeModal() {
+    this.showEvaluationResultsModal = false;
+  }
+
   <template>
     <main role="main" class="evaluation-results">
       <header class="evaluation-results__header">
@@ -60,7 +83,15 @@ export default class EvaluationResults extends Component {
         @questResults={{@model.questResults}}
         @isSharableCampaign={{this.isSharableCampaign}}
         @trainings={{@model.trainings}}
+        @onResultsShared={{this.shareResults}}
       />
+      {{#if this.isModalSentResultEnabled}}
+        <EvaluationSentResultsModal
+          @trainings={{this.trainingsForModal}}
+          @showModal={{this.showEvaluationResultsModal}}
+          @onCloseButtonClick={{this.closeModal}}
+        />
+      {{/if}}
     </main>
   </template>
 }

mon-pix/app/models/feature-toggle.js

@@ -6,4 +6,5 @@ export default class FeatureToggle extends Model {
   @attr('boolean') isPixAppNewLayoutEnabled;
   @attr('boolean') isPixCompanionEnabled;
   @attr('boolean') isQuestEnabled;
+  @attr('boolean') isModalSentResultEnabled;
 }

mon-pix/app/styles/components/campaigns/assessment/results/evaluation-sent-results-modal.scss

@@ -10,7 +10,7 @@
   left: 0;
   z-index: 1000;
   padding: 0;
-  overflow-y: auto;
+  overflow-y: hidden;
   text-align: center; // Used to center horizontally the inline-block modal content
   // we inline the pix-neutral-800 value
   background-color: rgb(37 56 88 / 50%);
@@ -39,7 +39,7 @@
   display: inline-block;
   width: 100%;
   height: 100%;
-  padding: 6.25vw 5.75vw;
+  padding: 48px 80px;
   overflow: hidden;
   color: var(--pix-neutral-900);
   text-align: center;

mon-pix/tests/integration/components/campaigns/assessment/results/evaluation-results-tabs-test.js

@@ -1,7 +1,9 @@
 import { render } from '@1024pix/ember-testing-library';
+import { click } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { t } from 'ember-intl/test-support';
 import { module, test } from 'qunit';
+import sinon from 'sinon';
 
 import setupIntlRenderingTest from '../../../../../helpers/setup-intl-rendering';
 
@@ -10,6 +12,7 @@ module('Integration | Components | Campaigns | Assessment | Results | Evaluation
 
   module('when there are rewards and trainings', function (hooks) {
     let screen;
+    let onResultsSharedStub;
 
     hooks.beforeEach(async function () {
       // given
@@ -18,16 +21,22 @@ module('Integration | Components | Campaigns | Assessment | Results | Evaluation
       const acquiredBadge = store.createRecord('badge', { isAcquired: true });
       this.set('campaignParticipationResult', {
         campaignParticipationBadges: [acquiredBadge],
+        isShared: false,
       });
 
       const training = store.createRecord('training', { duration: { days: 2 } });
       this.set('trainings', [training]);
 
+      onResultsSharedStub = sinon.stub();
+      this.set('onResultsShared', onResultsSharedStub);
+
       // when
       screen = await render(
         hbs`<Campaigns::Assessment::Results::EvaluationResultsTabs
   @campaignParticipationResult={{this.campaignParticipationResult}}
   @trainings={{this.trainings}}
+  @onResultsShared={{this.onResultsShared}}
+  @isSharableCampaign={{true}}
 />`,
       );
     });
@@ -45,6 +54,21 @@ module('Integration | Components | Campaigns | Assessment | Results | Evaluation
       // then
       assert.dom(screen.getByRole('heading', { name: t('pages.skill-review.tabs.rewards.title') })).isVisible();
     });
+
+    module('when clicking on shared results button', function () {
+      test('it should call onResultsShared', async function (assert) {
+        // given
+        const campaignParticipationResultService = this.owner.lookup('service:campaign-participation-result');
+        sinon.stub(campaignParticipationResultService, 'share');
+
+        // when
+        await click(screen.queryByRole('tab', { name: 'Formations' }));
+        await click(screen.queryByRole('button', { name: t('pages.skill-review.actions.send') }));
+
+        // then
+        assert.true(onResultsSharedStub.calledOnce);
+      });
+    });
   });
 
   module('when there are rewards but no trainings', function () {

mon-pix/tests/integration/components/campaigns/assessment/results/tabs/trainings-test.js

@@ -91,12 +91,15 @@ module('Integration | Components | Campaigns | Assessment | Evaluation Results T
 
     module('when participation is not already shared', function (hooks) {
       let screen;
+      let onResultsSharedStub;
 
       hooks.beforeEach(async function () {
         // given
         this.set('isParticipationShared', false);
         this.set('campaignId', 1);
         this.set('campaignParticipationResultId', 1);
+        onResultsSharedStub = sinon.stub();
+        this.set('onResultsShared', onResultsSharedStub);
 
         // when
         screen = await render(
@@ -105,6 +108,7 @@ module('Integration | Components | Campaigns | Assessment | Evaluation Results T
   @isParticipationShared={{this.isParticipationShared}}
   @campaignParticipationResultId={{this.campaignParticipationResultId}}
   @campaignId={{this.campaignId}}
+  @onResultsShared={{this.onResultsShared}}
 />`,
         );
       });
@@ -143,6 +147,16 @@ module('Integration | Components | Campaigns | Assessment | Evaluation Results T
           // then
           assert.true(campaignParticipationResultServiceStub.calledOnce);
         });
+        test('it should call the onResultsShared function', async function (assert) {
+          // given
+          sinon.stub(campaignParticipationResultService, 'share');
+
+          // when
+          await click(screen.queryByRole('button', { name: t('pages.skill-review.actions.send') }));
+
+          // then
+          assert.true(onResultsSharedStub.calledOnce);
+        });
 
         module('when share action fails', function () {
           test('it should display an error message', async function (assert) {