feat(orga): add place definition block

orga/app/components/places/place-info.gjs

@@ -0,0 +1,28 @@
+import PixBlock from '@1024pix/pix-ui/components/pix-block';
+import { LinkTo } from '@ember/routing';
+import { t } from 'ember-intl';
+
+function getParticipantsRoute(currentUser) {
+  if (currentUser.isSCOManagingStudents) {
+    return 'authenticated.sco-organization-participants';
+  } else if (currentUser.isSUPManagingStudents) {
+    return 'authenticated.sup-organization-participants';
+  } else {
+    return 'authenticated.organization-participants';
+  }
+}
+
+<template>
+  <PixBlock class="place-info">
+    <img class="place-info__illustration" src="/icons/place-info.svg" alt="" role="none" />
+    <div>
+      <p class="place-info__description">
+        <strong>{{t "cards.place-info.message"}}</strong>
+        <span> {{t "cards.place-info.details"}}</span>
+      </p>
+      <LinkTo class="place-info__link" @route={{getParticipantsRoute @currentUser}}>
+        {{t "cards.place-info.link"}}
+      </LinkTo>
+    </div>
+  </PixBlock>
+</template>

orga/app/styles/components/places/index.scss

@@ -1,2 +1,3 @@
 @import 'title';
 @import 'statistics';
+@import 'place-info';

orga/app/styles/components/places/place-info.scss

@@ -0,0 +1,24 @@
+.place-info {
+  display: flex;
+  flex-direction: row;
+  gap: var(--pix-spacing-6x);
+  align-items: center;
+  justify-content: flex-start;
+  margin-top: var(--pix-spacing-8x);
+  padding: var(--pix-spacing-3x) var(--pix-spacing-6x);
+
+  &__illustration {
+    width:64px;
+  }
+
+  &__description {
+    @extend %pix-body-s;
+  }
+
+  &__link {
+    @extend %pix-body-s;
+
+    font-weight: var(--pix-font-medium);
+    text-decoration: underline;
+  }
+}

orga/app/templates/authenticated/places.hbs

@@ -1,4 +1,6 @@
 {{page-title (t "pages.places.title")}}
 
 <Places::Title />
-<Places::Statistics @available={{@model.available}} @occupied={{@model.occupied}} @total={{@model.total}} />
+
+<Places::Statistics @available={{@model.available}} @occupied={{@model.occupied}} @total={{@model.total}} />
+<Places::PlaceInfo @currentUser={{this.currentUser}} />

orga/tests/integration/components/places/place-info_test.gjs

@@ -0,0 +1,57 @@
+import { render } from '@1024pix/ember-testing-library';
+import PlaceInfo from 'pix-orga/components/places/place-info';
+import { module, test } from 'qunit';
+
+import setupIntlRenderingTest from '../../../helpers/setup-intl-rendering';
+
+module('Integration | Component | Places | PlaceInfo', function (hooks) {
+  setupIntlRenderingTest(hooks);
+
+  test('it should render', async function (assert) {
+    // given
+    const currentUser = { isSCOManagingStudents: false, isSUPManagingStudents: false };
+
+    // when
+    const screen = await render(<template><PlaceInfo @currentUser={{currentUser}} /></template>);
+
+    // then
+    assert.ok(screen.getByText(this.intl.t('cards.place-info.message')));
+    assert.ok(screen.getByText(this.intl.t('cards.place-info.details')));
+  });
+  module('link', function () {
+    test('it should link to sup participant page', async function (assert) {
+      // given
+      const currentUser = { isSUPManagingStudents: true };
+
+      // when
+      const screen = await render(<template><PlaceInfo @currentUser={{currentUser}} /></template>);
+      const link = screen.getByRole('link', { name: this.intl.t('cards.place-info.link') });
+
+      // then
+      assert.strictEqual(link.getAttribute('href'), '/etudiants');
+    });
+
+    test('it should link to sco participant page', async function (assert) {
+      // given
+      const currentUser = { isSCOManagingStudents: true };
+
+      // when
+      const screen = await render(<template><PlaceInfo @currentUser={{currentUser}} /></template>);
+      const link = screen.getByRole('link', { name: this.intl.t('cards.place-info.link') });
+
+      // then
+      assert.strictEqual(link.getAttribute('href'), '/eleves');
+    });
+    test('it should link to participant page', async function (assert) {
+      // given
+      const currentUser = {};
+
+      // when
+      const screen = await render(<template><PlaceInfo @currentUser={{currentUser}} /></template>);
+      const link = screen.getByRole('link', { name: this.intl.t('cards.place-info.link') });
+
+      // then
+      assert.strictEqual(link.getAttribute('href'), '/participants');
+    });
+  });
+});

orga/translations/en.json

@@ -86,6 +86,11 @@
       "information": "Find here the total number of participations in your campaign. This includes all the participants who have entered the code and started their customised test or submitted their profile.",
       "loader": "Loading total participants"
     },
+    "place-info": {
+      "details": "with at least one participation in a campaign.",
+      "link": "Free a place from the \"Participants\" tab.",
+      "message": "1 place occupied = 1 participant"
+    },
     "submitted-count": {
       "title": "Submitted results",
       "information": "Find here the results submitted by your participants. This includes all the participants who have finished and clicked on the button \"Submit my results\" or \"Submit my profile\".",

orga/translations/fr.json

@@ -86,6 +86,11 @@
       "information": "Retrouvez ici le nombre de participants total de votre campagne. Ce nombre comprend l'ensemble des participants ayant saisi le code et commencé leur parcours ou leur envoi de profil.",
       "loader": "Chargement du total de participants"
     },
+    "place-info": {
+      "details": "ayant au moins une participation à une campagne.",
+      "link": "Libérer une place depuis l’onglet “Participants”",
+      "message": "1 place occupée = 1 participant"
+    },
     "submitted-count": {
       "title": "Résultats reçus",
       "information": "Retrouvez ici les résultats envoyés par vos participants. Ce nombre comprend l’ensemble des participants ayant terminé et cliqué sur le bouton \"J'envoie mes résultats\" ou \"J'envoie mon profil\".",
@@ -1102,7 +1107,6 @@
         },
         "students-count": "{count, plural, =0 {0 élève} =1 {1 élève} other {{count} élèves}}"
       },
-
       "manage-authentication-method-modal": {
         "title": "Gestion du compte Pix de l’élève",
         "authentication-methods": "Méthodes de connexion",