feat: add option for reply to in context menu (#8043)

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -124,6 +124,7 @@
         :message="data"
         @open="openContextMenu"
         @close="closeContextMenu"
+        @replyTo="handleReplyTo"
       />
     </div>
   </li>
@@ -188,6 +189,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    inboxSupportsReplyTo: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -269,6 +274,7 @@ export default {
         copy: this.hasText,
         delete: this.hasText || this.hasAttachments,
         cannedResponse: this.isOutgoing && this.hasText,
+        replyTo: !this.data.private && this.inboxSupportsReplyTo,
       };
     },
     contentAttributes() {
@@ -494,6 +500,7 @@ export default {
       this.showContextMenu = false;
       this.contextMenuPosition = { x: null, y: null };
     },
+    handleReplyTo() {},
     setupHighlightTimer() {
       if (Number(this.$route.query.messageId) !== Number(this.data.id)) {
         return;

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -42,6 +42,7 @@
         :is-a-whatsapp-channel="isAWhatsAppChannel"
         :has-instagram-story="hasInstagramStory"
         :is-web-widget-inbox="isAWebWidgetInbox"
+        :inbox-supports-reply-to="inboxSupportsReplyTo"
       />
       <li v-show="unreadMessageCount != 0" class="unread--toast">
         <span>
@@ -110,7 +111,7 @@ import { mapGetters } from 'vuex';
 import conversationMixin, {
   filterDuplicateSourceMessages,
 } from '../../../mixins/conversations';
-import inboxMixin from 'shared/mixins/inboxMixin';
+import inboxMixin, { INBOX_FEATURES } from 'shared/mixins/inboxMixin';
 import configMixin from 'shared/mixins/configMixin';
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import aiMixin from 'dashboard/mixins/aiMixin';
@@ -123,6 +124,7 @@ import { LocalStorage } from 'shared/helpers/localStorage';
 
 // constants
 import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { REPLY_POLICY } from 'shared/constants/links';
 import wootConstants from 'dashboard/constants/globals';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
@@ -164,12 +166,14 @@ export default {
 
   computed: {
     ...mapGetters({
+      accountId: 'getCurrentAccountId',
       currentChat: 'getSelectedChat',
       allConversations: 'getAllConversations',
       inboxesList: 'inboxes/getInboxes',
       listLoadingStatus: 'getAllMessagesLoaded',
       loadingChatList: 'getChatListLoadingStatus',
       appIntegrations: 'integrations/getAppIntegrations',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
       currentAccountId: 'getCurrentAccountId',
     }),
     isOpen() {
@@ -316,6 +320,15 @@ export default {
     unreadMessageCount() {
       return this.currentChat.unread_count || 0;
     },
+    inboxSupportsReplyTo() {
+      return (
+        this.inboxHasFeature(INBOX_FEATURES.REPLY_TO) &&
+        this.isFeatureEnabledonAccount(
+          this.accountId,
+          FEATURE_FLAGS.MESSAGE_REPLY_TO
+        )
+      );
+    },
   },
 
   watch: {

app/javascript/dashboard/featureFlags.js

@@ -16,4 +16,5 @@ export const FEATURE_FLAGS = {
   TEAM_MANAGEMENT: 'team_management',
   VOICE_RECORDER: 'voice_recorder',
   AUDIT_LOGS: 'audit_logs',
+  MESSAGE_REPLY_TO: 'message_reply_to',
 };

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -194,6 +194,7 @@
     },
     "CONTEXT_MENU": {
       "COPY": "Copy",
+      "REPLY_TO": "Reply to this message",
       "DELETE": "Delete",
       "CREATE_A_CANNED_RESPONSE": "Add to canned responses",
       "TRANSLATE": "Translate",

app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue

@@ -44,6 +44,15 @@
       @close="handleClose"
     >
       <div class="menu-container">
+        <menu-item
+          v-if="enabledOptions['replyTo']"
+          :option="{
+            icon: 'arrow-reply',
+            label: $t('CONVERSATION.CONTEXT_MENU.REPLY_TO'),
+          }"
+          variant="icon"
+          @click="handleReplyTo"
+        />
         <menu-item
           v-if="enabledOptions['copy']"
           :option="{
@@ -204,10 +213,13 @@ export default {
       this.handleClose();
       this.showTranslateModal = true;
     },
+    handleReplyTo() {
+      this.$emit('replyTo', this.message);
+      this.handleClose();
+    },
     onCloseTranslateModal() {
       this.showTranslateModal = false;
     },
-
     openDeleteModal() {
       this.handleClose();
       this.showDeleteModal = true;