[FEATURE] Déplacer les CGU vers un onglet dédié

 #10737

admin/app/components/users/cgu.gjs

@@ -0,0 +1,58 @@
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import dayjs from 'dayjs';
+import { t } from 'ember-intl';
+
+export default class Cgu extends Component {
+  @service accessControl;
+  @service intl;
+
+  get userHasValidatePixAppTermsOfService() {
+    return this._formatValidatedTermsOfServiceText(this.args.lastTermsOfServiceValidatedAt, this.args.cgu);
+  }
+
+  get userHasValidatePixOrgaTermsOfService() {
+    return this._formatValidatedTermsOfServiceText(
+      this.args.lastPixOrgaTermsOfServiceValidatedAt,
+      this.args.pixOrgaTermsOfServiceAccepted,
+    );
+  }
+
+  get userHasValidatePixCertifTermsOfService() {
+    return this._formatValidatedTermsOfServiceText(
+      this.args.lastPixCertifTermsOfServiceValidatedAt,
+      this.args.pixCertifTermsOfServiceAccepted,
+    );
+  }
+  _formatValidatedTermsOfServiceText(date, hasValidatedTermsOfService) {
+    if (!hasValidatedTermsOfService) {
+      return this.intl.t('components.users.user-detail-personal-information.cgu.validation.status.non-validated');
+    }
+
+    return date
+      ? this.intl.t('components.users.user-detail-personal-information.cgu.validation.status.validated-with-date', {
+          formattedDate: dayjs(date).format('DD/MM/YYYY'),
+        })
+      : this.intl.t('components.users.user-detail-personal-information.cgu.validation.status.validated');
+  }
+
+  <template>
+    <header class="page-section__header">
+      <h2 class="page-section__title">{{t "components.users.user-detail-personal-information.cgu.title"}}</h2>
+    </header>
+
+    <ul class="cgu__cgu-list">
+      <li class="cgu__cgu-information">
+        {{t "components.users.user-detail-personal-information.cgu.validation.domain.pix-app"}}
+        {{this.userHasValidatePixAppTermsOfService}}</li>
+
+      <li class="cgu__cgu-information">
+        {{t "components.users.user-detail-personal-information.cgu.validation.domain.pix-orga"}}
+        {{this.userHasValidatePixOrgaTermsOfService}}</li>
+
+      <li class="cgu__cgu-information">
+        {{t "components.users.user-detail-personal-information.cgu.validation.domain.pix-certif"}}
+        {{this.userHasValidatePixCertifTermsOfService}}</li>
+    </ul>
+  </template>
+}

admin/app/components/users/user-overview.gjs

@@ -64,24 +64,6 @@ export default class UserOverview extends Component {
     return false;
   }
 
-  get userHasValidatePixAppTermsOfService() {
-    return this._formatValidatedTermsOfServiceText(this.args.user.lastTermsOfServiceValidatedAt, this.args.user.cgu);
-  }
-
-  get userHasValidatePixOrgaTermsOfService() {
-    return this._formatValidatedTermsOfServiceText(
-      this.args.user.lastPixOrgaTermsOfServiceValidatedAt,
-      this.args.user.pixOrgaTermsOfServiceAccepted,
-    );
-  }
-
-  get userHasValidatePixCertifTermsOfService() {
-    return this._formatValidatedTermsOfServiceText(
-      this.args.user.lastPixCertifTermsOfServiceValidatedAt,
-      this.args.user.pixCertifTermsOfServiceAccepted,
-    );
-  }
-
   get languageOptions() {
     return this.languages;
   }
@@ -95,11 +77,6 @@ export default class UserOverview extends Component {
     return hasBeenAnonymised || isPixAgent;
   }
 
-  _formatValidatedTermsOfServiceText(date, hasValidatedTermsOfService) {
-    const formattedDateText = date ? `, le ${dayjs(date).format('DD/MM/YYYY')}` : '';
-    return hasValidatedTermsOfService ? `OUI${formattedDateText}` : 'NON';
-  }
-
   _initForm() {
     this.form.firstName = this.args.user.firstName;
     this.form.lastName = this.args.user.lastName;
@@ -346,14 +323,7 @@ export default class UserOverview extends Component {
                   </span>
                 </li>
               </ul>
-              <ul class="user-detail-personal-information-section__infogroup">
-                <li class="user-detail-personal-information-section__user-informations">CGU Pix App validé :
-                  {{this.userHasValidatePixAppTermsOfService}}</li>
-                <li class="user-detail-personal-information-section__user-informations">CGU Pix Orga validé :
-                  {{this.userHasValidatePixOrgaTermsOfService}}</li>
-                <li class="user-detail-personal-information-section__user-informations">CGU Pix Certif validé :
-                  {{this.userHasValidatePixCertifTermsOfService}}</li>
-              </ul>
+
               <ul class="user-detail-personal-information-section__infogroup">
                 <li class="user-detail-personal-information-section__user-informations">Nombre de tentatives de
                   connexion en erreur :

admin/app/router.js

@@ -55,6 +55,7 @@ Router.map(function () {
         this.route('campaign-participations', { path: '/participations' });
         this.route('organizations');
         this.route('certification-center-memberships');
+        this.route('cgu');
       });
     });
 

admin/app/routes/authenticated/users/get/cgu.js

@@ -0,0 +1,15 @@
+import Route from '@ember/routing/route';
+
+export default class UserCguRoute extends Route {
+  async model() {
+    const user = this.modelFor('authenticated.users.get');
+    return {
+      cgu: user.cgu,
+      pixOrgaTermsOfServiceAccepted: user.pixOrgaTermsOfServiceAccepted,
+      pixCertifTermsOfServiceAccepted: user.pixCertifTermsOfServiceAccepted,
+      lastTermsOfServiceValidatedAt: user.lastTermsOfServiceValidatedAt,
+      lastPixOrgaTermsOfServiceValidatedAt: user.lastPixOrgaTermsOfServiceValidatedAt,
+      lastPixCertifTermsOfServiceValidatedAt: user.lastPixCertifTermsOfServiceValidatedAt,
+    };
+  }
+}

admin/app/styles/app.scss

@@ -98,6 +98,7 @@
 @import 'components/trainings/training-triggers-tab';
 @import 'components/ui';
 @import 'components/users/authentication-method';
+@import 'components/users/cgu';
 @import 'components/users/organization-learners-table';
 @import 'components/users/user-overview';
 @import 'components/users/user-profile';

admin/app/styles/components/users/cgu.scss

@@ -0,0 +1,9 @@
+.cgu {
+  &__cgu-list {
+    margin-top: var(--pix-spacing-6x);
+  }
+
+  &__cgu-information {
+    margin-bottom: var(--pix-spacing-3x);
+  }
+}

admin/app/templates/authenticated/users/get.hbs

@@ -49,6 +49,15 @@
       {{t "pages.user-details.navbar.certification-centers-list"}}
       ({{@model.certificationCenterMembershipsCount}})
     </LinkTo>
+
+    <LinkTo
+      @route="authenticated.users.get.cgu"
+      @model={{@model}}
+      aria-label={{t "pages.user-details.navbar.cgu-aria-label"}}
+      class="navbar-item"
+    >
+      {{t "pages.user-details.navbar.cgu"}}
+    </LinkTo>
   </nav>
 
   {{outlet}}

admin/app/templates/authenticated/users/get/cgu.hbs

@@ -0,0 +1,10 @@
+<section class="page-section">
+  <Users::Cgu
+    @cgu={{@model.cgu}}
+    @pixOrgaTermsOfServiceAccepted={{@model.pixOrgaTermsOfServiceAccepted}}
+    @pixCertifTermsOfServiceAccepted={{@model.pixCertifTermsOfServiceAccepted}}
+    @lastTermsOfServiceValidatedAt={{@model.lastTermsOfServiceValidatedAt}}
+    @lastPixOrgaTermsOfServiceValidatedAt={{@model.lastPixOrgaTermsOfServiceValidatedAt}}
+    @lastPixCertifTermsOfServiceValidatedAt={{@model.lastPixCertifTermsOfServiceValidatedAt}}
+  />
+</section>

admin/tests/acceptance/authenticated/users/get-test.js

@@ -5,9 +5,12 @@ import { setupApplicationTest } from 'ember-qunit';
 import { createAuthenticateSession } from 'pix-admin/tests/helpers/test-init';
 import { module, test } from 'qunit';
 
+import setupIntl from '../../../helpers/setup-intl';
+
 module('Acceptance | authenticated/users/get', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
+  setupIntl(hooks);
 
   test('access to user details page by URL /users/:id', async function (assert) {
     // when
@@ -20,14 +23,14 @@ module('Acceptance | authenticated/users/get', function (hooks) {
 
   test('displays user detail information page', async function (assert) {
     // given
+    this.intl = this.owner.lookup('service:intl');
     const user = await _buildAndAuthenticateUser(this.server, { email: '[email protected]', username: null });
     const expectedOrganizationMembershipsCount = 2;
     const expectedParticipationCount = 1;
     const expectedCertificationCenterCount = 3;
 
     // when
     const screen = await visit(`/users/${user.id}`);
-
     // then
     assert.dom(screen.getByRole('heading', { name: "Informations de l'utilisateur" })).exists();
     assert.dom(screen.getByRole('heading', { name: 'Informations prescrit' })).exists();
@@ -43,6 +46,9 @@ module('Acceptance | authenticated/users/get', function (hooks) {
     assert
       .dom(userNavigation.getByLabelText('Organisations de l’utilisateur'))
       .hasText(`Pix Orga (${expectedOrganizationMembershipsCount})`);
+    assert
+      .dom(userNavigation.getByRole('link', { name: this.intl.t('pages.user-details.navbar.cgu-aria-label') }))
+      .exists();
   });
 
   test('redirects to list users page when click page title', async function (assert) {

admin/tests/integration/components/users/cgu-test.gjs

@@ -0,0 +1,61 @@
+import { render } from '@1024pix/ember-testing-library';
+import { setupRenderingTest } from 'ember-qunit';
+import Cgu from 'pix-admin/components/users/cgu';
+import { module, test } from 'qunit';
+
+import setupIntl from '../../../helpers/setup-intl';
+
+module('Integration | Component | cgu', function (hooks) {
+  setupRenderingTest(hooks);
+  setupIntl(hooks);
+
+  hooks.beforeEach(function () {
+    this.intl = this.owner.lookup('service:intl');
+  });
+
+  test('displays correct Terms of Service status for Pix App, Pix Orga and Pix Certif', async function (assert) {
+    //Given
+
+    const cgu = true;
+    const lastTermsOfServiceValidatedAt = new Date('2021-12-10');
+    const pixOrgaTermsOfServiceAccepted = true;
+    const lastPixOrgaTermsOfServiceValidatedAt = null;
+    const pixCertifTermsOfServiceAccepted = false;
+    const lastPixCertifTermsOfServiceValidatedAt = null;
+
+    const appDomain = this.intl.t('components.users.user-detail-personal-information.cgu.validation.domain.pix-app');
+    const validatedWithDate = this.intl.t(
+      'components.users.user-detail-personal-information.cgu.validation.status.validated-with-date',
+      { formattedDate: '10/12/2021' },
+    );
+
+    const orgaDomain = this.intl.t('components.users.user-detail-personal-information.cgu.validation.domain.pix-orga');
+    const validated = this.intl.t('components.users.user-detail-personal-information.cgu.validation.status.validated');
+
+    const certifDomain = this.intl.t(
+      'components.users.user-detail-personal-information.cgu.validation.domain.pix-certif',
+    );
+    const nonValidated = this.intl.t(
+      'components.users.user-detail-personal-information.cgu.validation.status.non-validated',
+    );
+
+    //When
+    const screen = await render(
+      <template>
+        <Cgu
+          @lastTermsOfServiceValidatedAt={{lastTermsOfServiceValidatedAt}}
+          @cgu={{cgu}}
+          @lastPixOrgaTermsOfServiceValidatedAt={{lastPixOrgaTermsOfServiceValidatedAt}}
+          @pixOrgaTermsOfServiceAccepted={{pixOrgaTermsOfServiceAccepted}}
+          @lastPixCertifTermsOfServiceValidatedAt={{lastPixCertifTermsOfServiceValidatedAt}}
+          @pixCertifTermsOfServiceAccepted={{pixCertifTermsOfServiceAccepted}}
+        />
+      </template>,
+    );
+
+    //Then
+    assert.dom(screen.queryByText(`${appDomain} ${validatedWithDate}`)).exists();
+    assert.dom(screen.queryByText(`${orgaDomain} ${validated}`)).exists();
+    assert.dom(screen.queryByText(`${certifDomain} ${nonValidated}`)).exists();
+  });
+});

admin/tests/integration/components/users/user-overview-test.gjs

@@ -257,84 +257,6 @@ module('Integration | Component | users | user-overview', function (hooks) {
         });
       });
 
-      module('terms of service', function () {
-        module('displays yes by application', function () {
-          test('displays "OUI" with date when user accepted Pix App terms of service', async function (assert) {
-            // given
-            const user = { cgu: true, lastTermsOfServiceValidatedAt: new Date('2021-12-10') };
-
-            // when
-            const screen = await render(<template><UserOverview @user={{user}} /></template>);
-
-            // then
-            assert.dom(screen.getByText('CGU Pix App validé : OUI, le 10/12/2021')).exists();
-          });
-
-          test('displays "OUI" with date when user accepted Pix Orga terms of service', async function (assert) {
-            // given
-            const user = {
-              pixOrgaTermsOfServiceAccepted: true,
-              lastPixOrgaTermsOfServiceValidatedAt: new Date('2021-12-14'),
-            };
-
-            // when
-            const screen = await render(<template><UserOverview @user={{user}} /></template>);
-
-            // then
-            assert.dom(screen.getByText('CGU Pix Orga validé : OUI, le 14/12/2021')).exists();
-          });
-
-          test('displays "OUI" with date when user accepted Pix Certif terms of service', async function (assert) {
-            // given
-            const user = {
-              pixCertifTermsOfServiceAccepted: true,
-              lastPixCertifTermsOfServiceValidatedAt: new Date('2021-12-14'),
-            };
-
-            // when
-            const screen = await render(<template><UserOverview @user={{user}} /></template>);
-
-            // then
-            assert.dom(screen.getByText('CGU Pix Certif validé : OUI, le 14/12/2021')).exists();
-          });
-        });
-
-        test('displays "NON" when user not accepted Pix App terms of service', async function (assert) {
-          // given
-          const user = { pixCertifTermsOfServiceAccepted: true, pixOrgaTermsOfServiceAccepted: true, cgu: false };
-
-          // when
-          const screen = await render(<template><UserOverview @user={{user}} /></template>);
-
-          // then
-          assert.dom(screen.getByText('CGU Pix App validé : NON')).exists();
-        });
-
-        test('displays "NON" when user not accepted Pix Orga terms of service', async function (assert) {
-          // given
-          const user = { pixCertifTermsOfServiceAccepted: true, pixOrgaTermsOfServiceAccepted: false, cgu: true };
-
-          // when
-          const screen = await render(<template><UserOverview @user={{user}} /></template>);
-
-          // then
-          assert.dom(screen.getByText('CGU Pix Orga validé : NON')).exists();
-        });
-
-        test('displays "NON" when user not accepted Pix Certif terms of service and "OUI" with no date when terms of service for an app are validated but no date provided', async function (assert) {
-          // given
-          const user = { pixCertifTermsOfServiceAccepted: false, pixOrgaTermsOfServiceAccepted: true, cgu: true };
-
-          // when
-          const screen = await render(<template><UserOverview @user={{user}} /></template>);
-
-          // then
-          assert.dom(screen.getByText('CGU Pix Certif validé : NON')).exists();
-          assert.dom(screen.getByText('CGU Pix Orga validé : OUI')).exists();
-          assert.dom(screen.getByText('CGU Pix App validé : OUI')).exists();
-        });
-      });
-
       module('login information', function (hooks) {
         let clock;
         const now = new Date('2022-11-28T12:00:00Z');