feat: Enhance Kudos Notification UX - MEED-2486 - Meeds-io/MIPs#80

Meeds-io · Sep 13, 2023 · 81171d5 · 81171d5
1 parent e20eb28
commit 81171d5
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 102 deletions.
diff --git a/...rvices/src/main/java/org/exoplatform/kudos/notification/provider/WebTemplateProvider.java b/...rvices/src/main/java/org/exoplatform/kudos/notification/provider/WebTemplateProvider.java
diff --git a/kudos-services/src/main/resources/locale/addon/Kudos_en.properties b/kudos-services/src/main/resources/locale/addon/Kudos_en.properties
@@ -85,3 +85,4 @@ kudos.label.button.cancel=Cancel
 kudos.label.cancelKudos=Cancel Kudos
 kudos.label.confirmCancelKudos=Do you confirm the cancellation of kudos?
 kudos.cancel.error.alreadyLinked=You have received kudos after sending this kudos. You cannot cancel it.
+kudos.notification.button=Say thank you
diff --git a/kudos-webapps/src/main/webapp/WEB-INF/conf/kudos/notification-configuration.xml b/kudos-webapps/src/main/webapp/WEB-INF/conf/kudos/notification-configuration.xml
@@ -98,17 +98,6 @@
 
   <external-component-plugins>
     <target-component>org.exoplatform.commons.api.notification.channel.ChannelManager</target-component>
-    <component-plugin>
-      <name>web.channel.kudos.template</name>
-      <set-method>registerTemplateProvider</set-method>
-      <type>org.exoplatform.kudos.notification.provider.WebTemplateProvider</type>
-      <init-params>
-        <value-param>
-          <name>channel-id</name>
-          <value>WEB_CHANNEL</value>
-        </value-param>
-      </init-params>
-    </component-plugin>
     <component-plugin>
       <name>mail.channel.kudos.template</name>
       <set-method>registerTemplateProvider</set-method>

diff --git a/...rc/main/webapp/WEB-INF/conf/kudos/templates/notification/web/KudosReceiverWebPlugin.gtmpl b/...rc/main/webapp/WEB-INF/conf/kudos/templates/notification/web/KudosReceiverWebPlugin.gtmpl
diff --git a/...ps/src/main/webapp/vue-app/notification-extension/components/NewUserKudosNotification.vue b/...ps/src/main/webapp/vue-app/notification-extension/components/NewUserKudosNotification.vue
@@ -0,0 +1,19 @@
+<template>
+  <user-notification-activity-base
+    :notification="notification"
+    message-key="Notification.kudos.received"
+    icon="fa-award"
+    reply-icon="far fa-handshake"
+    reply-key="kudos.notification.button"
+    reply />
+</template>
+<script>
+export default {
+  props: {
+    notification: {
+      type: Object,
+      default: null,
+    },
+  },
+};
+</script>
diff --git a/kudos-webapps/src/main/webapp/vue-app/notification-extension/extensions.js b/kudos-webapps/src/main/webapp/vue-app/notification-extension/extensions.js
@@ -17,8 +17,19 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
  */
 
+extensionRegistry.registerExtension('WebNotification', 'notification-content-extension', {
+  type: 'KudosActivityReceiverNotificationPlugin',
+  rank: 10,
+  vueComponent: Vue.options.components['user-notification-kudos-received'],
+});
 extensionRegistry.registerComponent('WebNotification', 'NewUserPlugin-actions', {
   type: 'NewUserKudosButton',
   rank: 10,
-  vueComponent: Vue.options.components['user-notification-new-user-kudos'],
+  vueComponent: Vue.options.components['user-notification-kudos-button'],
+});
+extensionRegistry.registerExtension('WebNotification', 'activity-notification-exokudos:activity', {
+  id: 'KudosActivity',
+  rank: 10,
+  isEnabled: () => true,
+  getContent: (_notification, activity) => activity?.templateParams?.kudosMessage,
 });
diff --git a/kudos-webapps/src/main/webapp/vue-app/notification-extension/initComponents.js b/kudos-webapps/src/main/webapp/vue-app/notification-extension/initComponents.js
@@ -18,9 +18,11 @@
  */
 
 import NewUserKudosButton from './components/NewUserKudosButton.vue';
+import NewUserKudosNotification from './components/NewUserKudosNotification.vue';
 
 const components = {
-  'user-notification-new-user-kudos': NewUserKudosButton,
+  'user-notification-kudos-button': NewUserKudosButton,
+  'user-notification-kudos-received': NewUserKudosNotification,
 };
 
 for (const key in components) {