feat: Add remind where or what to do the action for wallet events - M…

…EED-3334 - Meeds-io/MIPs#105 (#496)

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

wallet-services/src/main/resources/locale/addon/Gamification_en.properties

@@ -1,2 +1,4 @@
 gamification.event.title.createWallet=Wallet: Initialize the wallet
 gamification.event.description.createWallet=You Initialize your wallet
+
+gamification.event.display.yourWallet=Your Wallet

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

@@ -509,6 +509,29 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
     </depends>
   </module>
 
+  <module>
+    <name>engagementCenterConnectorEventsWalletExtensions</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>
+
   <module>
     <name>walletNotificationExtension</name>
     <load-group>notificationGRP</load-group>

wallet-webapps/src/main/webapp/vue-app/connectorEventExtensions/components/WalletEvent.vue

@@ -0,0 +1,54 @@
+<!--
+ This file is part of the Meeds project (https://meeds.io/).
+
+ Copyright (C) 2020 - 2024 Meeds Association contact@meeds.io
+
+ 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.goThere') }}
+    </div>
+    <div class="d-flex justify-center">
+      <v-btn
+        :href="walletLinkBasePath"
+        max-width="250"
+        class="ignore-vuetify-classes text-capitalize btn btn-primary">
+        {{ $t('gamification.event.display.yourWallet') }}
+      </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
+    }
+  },
+  data: () => ({
+    walletLinkBasePath: `${eXo.env.portal.context}/${eXo.env.portal.metaPortalName}/wallet`,
+  }),
+};
+</script>

wallet-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 contact@meeds.io
+ *
+ * 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: 'wallet-event',
+    name: 'wallet',
+    vueComponent: Vue.options.components['wallet-event'],
+    isEnabled: (params) => [
+      'createWallet'
+    ].includes(params?.trigger),
+  });
+}

wallet-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 contact@meeds.io
+ *
+ * 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 WalletEvent from './components/WalletEvent.vue';
+
+const components = {
+  'wallet-event': WalletEvent,
+};
+
+for (const key in components) {
+  Vue.component(key, components[key]);
+}

wallet-webapps/webpack.prod.js

@@ -31,6 +31,7 @@ const config = merge(webpackCommonConfig, {
     walletOverview: './src/main/webapp/vue-app/wallet-common/wallet-overview/main.js',
     rewardApp: './src/main/webapp/vue-app/wallet-reward/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',
   },
   output: {