Merge pull request #4132 from betagouv/recruitment-cta

Ajouter un CTA pour partager des offres de recrutement
betagouv · Jul 22, 2024 · 9dcca6f · 9dcca6f
2 parents 8e3c96a + 85bf44a
commit 9dcca6f
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 66 deletions.
diff --git a/frontend/src/components/DsfrCallout.vue b/frontend/src/components/DsfrCallout.vue
@@ -2,7 +2,7 @@
   <v-alert
     border="left"
     colored-border
-    :icon="$attrs['icon'] || 'mdi-information-outline'"
+    :icon="icon"
     :color="$attrs['color'] || '#6a6af4'"
     v-bind="$attrs"
     v-on="$listeners"
@@ -17,12 +17,23 @@
 <script>
 export default {
   inheritAttrs: false,
+  props: {
+    noIcon: {
+      type: Boolean,
+      default: false,
+    },
+  },
   methods: {
     reformatIcon() {
       const icon = this.$el.getElementsByClassName("v-alert__icon")[0]
       icon.style.color = "#161616"
     },
   },
+  computed: {
+    icon() {
+      return this.noIcon ? " " : this.$attrs["icon"] || "mdi-information-outline"
+    },
+  },
   mounted() {
     this.reformatIcon()
   },

diff --git a/frontend/src/views/ManagementPage/TeledeclarationBanner.vue b/frontend/src/views/ManagementPage/TeledeclarationBanner.vue
@@ -1,54 +1,53 @@
 <template>
-  <v-card color="primary lighten-4" elevation="1" shaped class="d-flex align-center">
-    <div>
-      <v-card-title>
-        <h2 class="text-body-1 font-weight-bold mb-0">
-          CAMPAGNE DE TELEDECLARATION 2024 : prolongation exceptionnelle jusqu'au 15 avril !
-        </h2>
-      </v-card-title>
-      <v-card-text class="pb-0">
-        <p class="mb-0">
-          Dans votre espace cantine, remplissez votre bilan sur les données d'achat 2023 et télédéclarez vos données
-          (arrêté ministériel du 14 septembre 2022 - en cours de modification). L'objectif : établir un bilan de suivi
-          des mesures EGAlim permettant de mieux piloter cette politique publique par l'administration.
-        </p>
-      </v-card-text>
-      <v-card-actions class="px-4 pb-2 mt-2 flex-wrap">
-        <v-btn :to="{ name: 'PendingActions' }" color="primary" class="mb-5 mb-md-2 mr-4">
-          Télédéclarer mes cantines
-        </v-btn>
-        <p class="text-body-2 mb-5 mb-md-2 mr-4">
-          <a
-            href="https://894795896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSCF7Mdc8yfeIjMxMZr%2Fuploads%2F5ykK6Oj3jbALj2Vfzo48%2FGuide_Campagne_teledeclaration_2024_110124.pdf?alt=media"
-            target="_blank"
-            rel="noopener external"
-            title="Le guide de télédéclaration - ouvre une nouvelle fenêtre"
-            class="grey--text text--darken-4"
-          >
-            Le guide de télédéclaration
-            <v-icon small class="ml-2 grey--text text--darken-4">mdi-open-in-new</v-icon>
-          </a>
-        </p>
-        <p class="text-body-2 mb-5 mb-md-2">
-          <a
-            href="https://1648047458-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSCF7Mdc8yfeIjMxMZr%2Fuploads%2FlNPOtFoTKyfj5UnjZKJj%2FEGAlim%20Bilan%20statistique%202023%20d%C3%A9finitif.pdf?alt=media"
-            target="_blank"
-            rel="noopener external"
-            title="Bilan EGAlim pour la campagne de 2022 - ouvre une nouvelle fenêtre"
-            class="grey--text text--darken-4"
-          >
-            Bilan EGAlim pour la campagne de 2022
-            <v-icon small class="ml-2 grey--text text--darken-4">mdi-open-in-new</v-icon>
-          </a>
-        </p>
-      </v-card-actions>
-    </div>
-  </v-card>
+  <DsfrCallout noIcon>
+    <h2 class="fr-text font-weight-bold mb-2 mt-2">
+      CAMPAGNE DE TELEDECLARATION 2024 : prolongation exceptionnelle jusqu'au 15 avril !
+    </h2>
+    <p class="mb-0">
+      Dans votre espace cantine, remplissez votre bilan sur les données d'achat 2023 et télédéclarez vos données (arrêté
+      ministériel du 14 septembre 2022 - en cours de modification). L'objectif : établir un bilan de suivi des mesures
+      EGAlim permettant de mieux piloter cette politique publique par l'administration.
+    </p>
+    <v-row class="mt-4 mb-0 mx-0 align-center">
+      <v-btn :to="{ name: 'PendingActions' }" color="primary" class="mb-5 mb-md-2 mr-4">
+        Télédéclarer mes cantines
+      </v-btn>
+      <p class="fr-text-sm mb-5 mb-md-2 mr-4">
+        <a
+          href="https://894795896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSCF7Mdc8yfeIjMxMZr%2Fuploads%2F5ykK6Oj3jbALj2Vfzo48%2FGuide_Campagne_teledeclaration_2024_110124.pdf?alt=media"
+          target="_blank"
+          rel="noopener external"
+          title="Le guide de télédéclaration - ouvre une nouvelle fenêtre"
+          class="grey--text text--darken-4"
+        >
+          Le guide de télédéclaration
+          <v-icon small class="ml-2 grey--text text--darken-4">mdi-open-in-new</v-icon>
+        </a>
+      </p>
+      <p class="fr-text-sm mb-5 mb-md-2">
+        <a
+          href="https://1648047458-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSCF7Mdc8yfeIjMxMZr%2Fuploads%2FlNPOtFoTKyfj5UnjZKJj%2FEGAlim%20Bilan%20statistique%202023%20d%C3%A9finitif.pdf?alt=media"
+          target="_blank"
+          rel="noopener external"
+          title="Bilan EGAlim pour la campagne de 2022 - ouvre une nouvelle fenêtre"
+          class="grey--text text--darken-4"
+        >
+          Bilan EGAlim pour la campagne de 2022
+          <v-icon small class="ml-2 grey--text text--darken-4">mdi-open-in-new</v-icon>
+        </a>
+      </p>
+    </v-row>
+  </DsfrCallout>
 </template>
 
 <script>
+import DsfrCallout from "@/components/DsfrCallout"
+
 export default {
   name: "TeledeclarationBanner",
+  components: {
+    DsfrCallout,
+  },
 }
 </script>
 

diff --git a/frontend/src/views/ManagementPage/index.vue b/frontend/src/views/ManagementPage/index.vue
@@ -1,33 +1,40 @@
 <template>
   <div class="text-left">
-    <div class="mt-4 mb-0 mb-md-6">
-      <div class="d-flex align-center">
+    <v-row class="mb-4">
+      <v-col>
         <h1
-          class="my-2 text-h6 font-weight-black"
+          class="mt-4 mb-2 text-h6 font-weight-black"
           :style="$vuetify.breakpoint.mdAndUp ? 'font-size: 2rem !important;' : ''"
         >
           Bienvenue dans votre espace, {{ loggedUser.firstName }}
         </h1>
-        <v-btn text class="text-decoration-underline text-caption mb-1 mb-md-n1" :to="{ name: 'AccountEditor' }">
-          <v-icon class="mr-1" small>mdi-pencil</v-icon>
-          Modifier mon profil
-        </v-btn>
-      </div>
 
-      <p v-if="loggedUser.isElectedOfficial" class="mb-0">
-        Vous avez un compte élu / élue, vous pouvez voir
-        <router-link text :to="{ name: 'TerritoryCanteens' }">
-          les cantines de votre territoire
+        <router-link class="fr-text-xs d-flex align-center" :to="{ name: 'AccountEditor' }">
+          Modifier mon profil
+          <v-icon class="ml-1" color="primary" x-small>mdi-pencil</v-icon>
         </router-link>
-        .
-      </p>
 
-      <CanteenCreationDialog
-        v-if="showCanteenCreationPrompt !== null"
-        :organizations="loggedUser.mcpOrganizations"
-        v-model="showCanteenCreationPrompt"
-      />
-    </div>
+        <p v-if="loggedUser.isElectedOfficial" class="mt-2 mb-0">
+          Vous avez un compte élu / élue, voir
+          <router-link text :to="{ name: 'TerritoryCanteens' }">
+            les cantines de votre territoire
+          </router-link>
+        </p>
+      </v-col>
+      <v-col cols="12" md="5">
+        <DsfrCallout noIcon class="mb-0">
+          <h2 class="fr-text font-weight-bold mb-2">
+            Vous cherchez à recruter au sein de vos équipes&nbsp;?
+          </h2>
+          <p class="mb-1">
+            <i>ma cantine</i>
+            vous propose de diffuser vos offres gratuitement sur nos réseaux sociaux. Envoyez-nous votre offre à
+            <a href="mailto:support-egalim@beta.gouv.fr">support-egalim@beta.gouv.fr</a>
+          </p>
+        </DsfrCallout>
+      </v-col>
+    </v-row>
+
     <div v-if="canteenCount === 0" class="body-2 font-weight-medium">
       <p class="mb-0">
         Prenez connaissance du
@@ -81,6 +88,11 @@
         </v-col>
       </v-row>
     </div>
+    <CanteenCreationDialog
+      v-if="showCanteenCreationPrompt !== null"
+      :organizations="loggedUser.mcpOrganizations"
+      v-model="showCanteenCreationPrompt"
+    />
   </div>
 </template>
 
@@ -92,6 +104,7 @@ import TeledeclarationBanner from "./TeledeclarationBanner"
 import CanteenCreationDialog from "./CanteenCreationDialog"
 import ActionsBanner from "./ActionsBanner"
 import SuccessBanner from "./SuccessBanner"
+import DsfrCallout from "@/components/DsfrCallout"
 import validators from "@/validators"
 import { lastYear } from "@/utils"
 
@@ -105,6 +118,7 @@ export default {
     ActionsBanner,
     SuccessBanner,
     CanteenCreationDialog,
+    DsfrCallout,
   },
   data() {
     return {