From 07598dc8c92b55bcea676257eba18e2cf6c86cd1 Mon Sep 17 00:00:00 2001
From: MayTekayaa <100131287+MayTekayaa@users.noreply.github.com>
Date: Fri, 8 Sep 2023 12:52:47 +0100
Subject: [PATCH] feat: Add CTAs below the post CTA - MEED-2072 -
 Meeds-io/MIPs#54 (#339)

This fix will change the display of the send kudos action used in the composer.
---
 .../locale/addon/Kudos_en.properties          |  1 +
 .../locale/addon/Kudos_fr.properties          |  1 +
 .../src/main/webapp/vue-app/js/Kudos.js       |  5 +++
 .../kudos/components/SendKudosComposer.vue    | 29 +++++++----------
 .../components/SendKudosToolbarAction.vue     | 32 +++++++++++++++++++
 .../webapp/vue-app/kudos/initComponents.js    |  2 ++
 6 files changed, 53 insertions(+), 17 deletions(-)
 create mode 100644 kudos-webapps/src/main/webapp/vue-app/kudos/components/SendKudosToolbarAction.vue

diff --git a/kudos-services/src/main/resources/locale/addon/Kudos_en.properties b/kudos-services/src/main/resources/locale/addon/Kudos_en.properties
index 2d563adb2..57621d2ed 100644
--- a/kudos-services/src/main/resources/locale/addon/Kudos_en.properties
+++ b/kudos-services/src/main/resources/locale/addon/Kudos_en.properties
@@ -5,6 +5,7 @@ NewKudosSentActivityComment.activity_kudos=<i class="uiIcon fa fa-award uiIconKu
 NewKudosSentActivityComment.activity_kudos_content={3} Kudos to {1} {2}
 NewKudosSentActivityComment.activity_kudos_title=Kudos to {0}
 
+kudos.title=Kudos
 exoplatform.kudos.title.sendAKudos=Send a Kudos
 exoplatform.kudos.content.to=To:
 exoplatform.kudos.choose.audience=Choose an audience:
diff --git a/kudos-services/src/main/resources/locale/addon/Kudos_fr.properties b/kudos-services/src/main/resources/locale/addon/Kudos_fr.properties
index a9e2c5e3f..f0662cb8d 100644
--- a/kudos-services/src/main/resources/locale/addon/Kudos_fr.properties
+++ b/kudos-services/src/main/resources/locale/addon/Kudos_fr.properties
@@ -5,6 +5,7 @@ NewKudosSentActivityComment.activity_kudos=<i class="uiIcon fa fa-award uiIconKu
 NewKudosSentActivityComment.activity_kudos_content={3} Kudos \u00E0 {1} {2}
 NewKudosSentActivityComment.activity_kudos_title=Kudos \u00E0 {0}
 
+kudos.title=Kudos
 exoplatform.kudos.title.sendAKudos=Envoyer un kudos
 exoplatform.kudos.content.to=\u00C0 :
 exoplatform.kudos.choose.audience=Choisir l'audience :
diff --git a/kudos-webapps/src/main/webapp/vue-app/js/Kudos.js b/kudos-webapps/src/main/webapp/vue-app/js/Kudos.js
index 991d58ad8..11eb5a48e 100644
--- a/kudos-webapps/src/main/webapp/vue-app/js/Kudos.js
+++ b/kudos-webapps/src/main/webapp/vue-app/js/Kudos.js
@@ -225,6 +225,11 @@ export function registerComposerExtension() {
     vueComponent: Vue.options.components['send-kudos-composer'],
     rank: 1,
   });
+  extensionRegistry.registerComponent('ActivityToolbarAction', 'activity-toolbar-action', {
+    id: 'sendKudosToolbarButton',
+    vueComponent: Vue.options.components['send-kudos-toolbar-action'],
+    rank: 10,
+  });
 }
 
 export function registerFavoriteExtensions(title) {
diff --git a/kudos-webapps/src/main/webapp/vue-app/kudos/components/SendKudosComposer.vue b/kudos-webapps/src/main/webapp/vue-app/kudos/components/SendKudosComposer.vue
index c4836033d..938663a60 100644
--- a/kudos-webapps/src/main/webapp/vue-app/kudos/components/SendKudosComposer.vue
+++ b/kudos-webapps/src/main/webapp/vue-app/kudos/components/SendKudosComposer.vue
@@ -1,21 +1,16 @@
 <template>
-  <v-card 
-    class="d-flex flex-row" 
-    outlined 
-    flat 
-    hover
-    @click="openSendKudosDrawer" >
-    <v-card-actions class="ms-4 py-3">
-      <v-icon
-        color="primary"
-        size="50">
-        fa-award
-      </v-icon>
-    </v-card-actions>
-    <v-card-title class="caption font-weight-bold">
+  <div
+    class="d-flex flex-row align-center" 
+    @click="openSendKudosDrawer">
+    <v-icon
+      color="primary"
+      size="50">
+      fa-award
+    </v-icon>
+    <v-span class="caption font-weight-bold ms-5">
       {{ $t('exoplatform.kudos.title.sendAKudos') }}
-    </v-card-title>
-  </v-card>
+    </v-span>
+  </div>
 </template>
 <script>
 export default {
@@ -23,7 +18,7 @@ export default {
     openSendKudosDrawer() {
       document.dispatchEvent(new CustomEvent('activity-composer-closed'));
       document.dispatchEvent(new CustomEvent('exo-kudos-open-send-modal', {detail: {
-        id: eXo.env.portal.spaceId,
+        id: eXo.env.portal.userIdentityId,
         type: 'USER_PROFILE',
         parentId: '',
         owner: eXo.env.portal.userName,
diff --git a/kudos-webapps/src/main/webapp/vue-app/kudos/components/SendKudosToolbarAction.vue b/kudos-webapps/src/main/webapp/vue-app/kudos/components/SendKudosToolbarAction.vue
new file mode 100644
index 000000000..662013863
--- /dev/null
+++ b/kudos-webapps/src/main/webapp/vue-app/kudos/components/SendKudosToolbarAction.vue
@@ -0,0 +1,32 @@
+<template>
+  <v-btn
+    :ripple="false"
+    class="d-flex flex-row align-center py-2"
+    text
+    @click="openSendKudosDrawer">
+    <v-icon
+      color="primary"
+      size="27">
+      fa-award
+    </v-icon>
+    <v-span class="body-2 font-weight-bold ms-5  mt-1 dark-grey-color">
+      {{ $t('kudos.title') }}
+    </v-span>
+  </v-btn>
+</template>
+<script>
+export default {
+  methods: {
+    openSendKudosDrawer() {
+      document.dispatchEvent(new CustomEvent('exo-kudos-open-send-modal', {detail: {
+        id: eXo.env.portal.userIdentityId,
+        type: 'USER_PROFILE',
+        parentId: '',
+        owner: eXo.env.portal.userName,
+        spaceURL: eXo.env.portal.spaceUrl,
+        readOnlySpace: true
+      }}));
+    },
+  },
+};
+</script> 
\ No newline at end of file
diff --git a/kudos-webapps/src/main/webapp/vue-app/kudos/initComponents.js b/kudos-webapps/src/main/webapp/vue-app/kudos/initComponents.js
index caca834ec..6f6b4be8c 100644
--- a/kudos-webapps/src/main/webapp/vue-app/kudos/initComponents.js
+++ b/kudos-webapps/src/main/webapp/vue-app/kudos/initComponents.js
@@ -3,6 +3,7 @@ import KudosAPI from './components/KudosAPI.vue';
 import KudosApp from './components/KudosApp.vue';
 import KudosButton from '../kudos/components/KudosButton.vue';
 import SendKudosComposer from '../kudos/components/SendKudosComposer.vue';
+import SendKudosToolbarAction from '../kudos/components/SendKudosToolbarAction.vue';
 import PopoverKudosButton from '../kudos/components/PopoverKudosButton.vue';
 import ActivityKudosReactionItem from './components/ActivityKudosReactionItem.vue';
 import ActivityKudosReactionList from './components/ActivityKudosReactionList.vue';
@@ -28,6 +29,7 @@ const components = {
   'kudos-overview': KudosOverview,
   'kudos-overview-card': KudosOverviewCard,
   'send-kudos-composer': SendKudosComposer,
+  'send-kudos-toolbar-action': SendKudosToolbarAction,
 };
 
 for (const key in components) {