feat: Add remind where or what to do the action for kudos events - ME…

…ED-3284 - Meeds-io/MIPs#105

This PR will add information in the action detail drawer so it can be
useful to remind where or what to do the action

kudos-webapps/src/main/resources/locale/addon/Gamification_en.properties

@@ -2,3 +2,4 @@ gamification.event.title.sendKudos=Kudos : Send kudos
 gamification.event.description.sendKudos=You sent a Kudos
 gamification.event.title.receiveKudos=Kudos : Receive kudos
 gamification.event.description.receiveKudos=You received a Kudos
+gamification.event.display.congratulate=Congratulate

kudos-webapps/src/main/webapp/WEB-INF/gatein-resources.xml

@@ -170,4 +170,27 @@
     </depends>
   </module>
 
+  <module>
+    <name>engagementCenterConnectorEventsKudosExtensions</name>
+    <load-group>engagement-center-connector-event-extensions</load-group>
+    <script>
+      <path>/js/connectorEventExtensions.bundle.js</path>
+    </script>
+    <depends>
+      <module>vue</module>
+    </depends>
+    <depends>
+      <module>vuetify</module>
+    </depends>
+    <depends>
+      <module>eXoVueI18n</module>
+    </depends>
+    <depends>
+      <module>extensionRegistry</module>
+    </depends>
+    <depends>
+      <module>commonVueComponents</module>
+    </depends>
+  </module>
+
 </gatein-resources>

kudos-webapps/src/main/webapp/vue-app/connectorEventExtensions/components/KudosEvent.vue

@@ -0,0 +1,62 @@
+<!--
+ This file is part of the Meeds project (https://meeds.io/).
+
+ Copyright (C) 2020 - 2024 Meeds Association [email protected]
+
+ This program is free software; you can redistribute it and/or
+ modify it under the terms of the GNU Lesser General Public
+ License as published by the Free Software Foundation; either
+ version 3 of the License, or (at your option) any later version.
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ Lesser General Public License for more details.
+
+ You should have received a copy of the GNU Lesser General Public License
+ along with this program; if not, write to the Free Software Foundation,
+ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+-->
+<template>
+  <v-app v-if="!isEditing">
+    <div class="subtitle-1 font-weight-bold mb-2">
+      {{ $t('gamification.event.display.doItNow') }}
+    </div>
+    <div class="d-flex justify-center">
+      <v-btn
+        max-width="250"
+        class="ignore-vuetify-classes text-capitalize btn btn-primary"
+        @click="openKudosDrawer">
+        {{ $t('gamification.event.display.congratulate') }}
+      </v-btn>
+    </div>
+  </v-app>
+</template>
+<script>
+export default {
+  props: {
+    properties: {
+      type: Object,
+      default: null
+    },
+    trigger: {
+      type: String,
+      default: null
+    },
+    isEditing: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    openKudosDrawer() {
+      this.$root.$emit('rule-detail-drawer-close');
+      document.dispatchEvent(new CustomEvent('exo-kudos-open-send-modal', {detail: {
+        id: eXo.env.portal.userIdentityId,
+        type: 'USER_PROFILE',
+        parentId: '',
+        owner: eXo.env.portal.userName,
+      }}));
+    },
+  }
+};
+</script>

kudos-webapps/src/main/webapp/vue-app/connectorEventExtensions/extensions.js

@@ -0,0 +1,30 @@
+/*
+ * This file is part of the Meeds project (https://meeds.io/).
+ *
+ * Copyright (C) 2020 - 2024 Meeds Association [email protected]
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ *
+ */
+import '../connectorEventExtensions/initComponents';
+
+export function init() {
+  extensionRegistry.registerComponent('engagementCenterEvent', 'connector-event-extensions', {
+    id: 'kudos-event',
+    name: 'kudos',
+    vueComponent: Vue.options.components['kudos-event'],
+    isEnabled: (params) => [
+      'sendKudos'
+    ].includes(params?.trigger),
+  });
+}

kudos-webapps/src/main/webapp/vue-app/connectorEventExtensions/initComponents.js

@@ -0,0 +1,26 @@
+/*
+ * This file is part of the Meeds project (https://meeds.io/).
+ * Copyright (C) 2020 - 2024 Meeds Association [email protected]
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import KudosEvent from './components/KudosEvent.vue';
+
+const components = {
+  'kudos-event': KudosEvent,
+};
+
+for (const key in components) {
+  Vue.component(key, components[key]);
+}

kudos-webapps/webpack.common.js

@@ -9,6 +9,7 @@ const config = {
     kudosAdmin: './src/main/webapp/vue-app/kudos-admin/main.js',
     kudosOverview: './src/main/webapp/vue-app/kudos-overview/main.js',
     engagementCenterExtensions: './src/main/webapp/vue-app/engagementCenterExtensions/extensions.js',
+    connectorEventExtensions: './src/main/webapp/vue-app/connectorEventExtensions/extensions.js',
     notificationExtension: './src/main/webapp/vue-app/notification-extension/main.js',
   },
   module: {