From b6584ec68b0f9657a70e189ec5bbf6da673092b1 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 31 Oct 2023 21:33:14 +0530
Subject: [PATCH] feat: toggle reply to on widget based on feature flag (#8261)

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
---
 app/javascript/widget/components/AgentMessage.vue  |  4 ++++
 app/javascript/widget/components/ChatFooter.vue    |  3 +++
 app/javascript/widget/components/DragWrapper.vue   |  6 ++++++
 app/javascript/widget/components/FooterReplyTo.vue |  2 +-
 app/javascript/widget/components/ReplyToChip.vue   |  2 +-
 app/javascript/widget/components/UserMessage.vue   | 10 ++++++++--
 app/views/widgets/show.html.erb                    |  3 ++-
 7 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/app/javascript/widget/components/AgentMessage.vue b/app/javascript/widget/components/AgentMessage.vue
index 6020af3dc..e1d9ee7c4 100755
--- a/app/javascript/widget/components/AgentMessage.vue
+++ b/app/javascript/widget/components/AgentMessage.vue
@@ -22,6 +22,7 @@
           <drag-wrapper
             class="space-y-2"
             direction="right"
+            :disabled="!allowReplyTo"
             @dragged="toggleReply"
           >
             <AgentMessageBubble
@@ -57,6 +58,7 @@
           </drag-wrapper>
           <div class="flex flex-col justify-end">
             <message-reply-button
+              v-if="allowReplyTo"
               class="transition-opacity delay-75 opacity-0 group-hover:opacity-100 sm:opacity-0"
               @click="toggleReply"
             />
@@ -125,6 +127,7 @@ export default {
   data() {
     return {
       hasImageError: false,
+      allowReplyTo: window.chatwootWebChannel.allowReplyTo || false,
     };
   },
   computed: {
@@ -214,6 +217,7 @@ export default {
       };
     },
     hasReplyTo() {
+      if (!this.allowReplyTo) return false;
       return this.replyTo && (this.replyTo.content || this.replyTo.attachments);
     },
   },
diff --git a/app/javascript/widget/components/ChatFooter.vue b/app/javascript/widget/components/ChatFooter.vue
index 2a8ef36dc..33017e7c2 100755
--- a/app/javascript/widget/components/ChatFooter.vue
+++ b/app/javascript/widget/components/ChatFooter.vue
@@ -68,6 +68,7 @@ export default {
   data() {
     return {
       inReplyTo: null,
+      allowReplyTo: window.chatwootWebChannel.allowReplyTo || false,
     };
   },
   computed: {
@@ -90,6 +91,8 @@ export default {
       return this.currentUser && this.currentUser.email;
     },
     hasReplyTo() {
+      if (!this.allowReplyTo) return false;
+
       return (
         this.inReplyTo && (this.inReplyTo.content || this.inReplyTo.attachments)
       );
diff --git a/app/javascript/widget/components/DragWrapper.vue b/app/javascript/widget/components/DragWrapper.vue
index 41037f434..873622a7c 100644
--- a/app/javascript/widget/components/DragWrapper.vue
+++ b/app/javascript/widget/components/DragWrapper.vue
@@ -19,6 +19,10 @@ export default {
       required: true,
       validator: value => ['left', 'right'].includes(value),
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -29,9 +33,11 @@ export default {
   },
   methods: {
     handleTouchStart(event) {
+      if (this.disabled) return;
       this.startX = event.touches[0].clientX;
     },
     handleTouchMove(event) {
+      if (this.disabled) return;
       const touchX = event.touches[0].clientX;
       let deltaX = touchX - this.startX;
 
diff --git a/app/javascript/widget/components/FooterReplyTo.vue b/app/javascript/widget/components/FooterReplyTo.vue
index ca65e15c2..e0124196d 100644
--- a/app/javascript/widget/components/FooterReplyTo.vue
+++ b/app/javascript/widget/components/FooterReplyTo.vue
@@ -29,7 +29,7 @@ export default {
   },
   computed: {
     replyToAttachment() {
-      if (!this.inReplyTo?.attachments.length) {
+      if (!this.inReplyTo?.attachments?.length) {
         return '';
       }
 
diff --git a/app/javascript/widget/components/ReplyToChip.vue b/app/javascript/widget/components/ReplyToChip.vue
index 047092a6f..76c250ea0 100644
--- a/app/javascript/widget/components/ReplyToChip.vue
+++ b/app/javascript/widget/components/ReplyToChip.vue
@@ -26,7 +26,7 @@ export default {
   },
   computed: {
     replyToAttachment() {
-      if (!this.replyTo?.attachments.length) {
+      if (!this.replyTo?.attachments?.length) {
         return '';
       }
 
diff --git a/app/javascript/widget/components/UserMessage.vue b/app/javascript/widget/components/UserMessage.vue
index 812d699cb..1d07156ca 100755
--- a/app/javascript/widget/components/UserMessage.vue
+++ b/app/javascript/widget/components/UserMessage.vue
@@ -11,12 +11,16 @@
         <div class="flex justify-end gap-1">
           <div class="flex flex-col justify-end">
             <message-reply-button
-              v-if="!isInProgress && !isFailed"
+              v-if="!isInProgress && !isFailed && allowReplyTo"
               class="transition-opacity delay-75 opacity-0 group-hover:opacity-100 sm:opacity-0"
               @click="toggleReply"
             />
           </div>
-          <drag-wrapper direction="left" @dragged="toggleReply">
+          <drag-wrapper
+            direction="left"
+            :disabled="!allowReplyTo"
+            @dragged="toggleReply"
+          >
             <user-message-bubble
               v-if="showTextBubble"
               :message="message.content"
@@ -107,6 +111,7 @@ export default {
   data() {
     return {
       hasImageError: false,
+      allowReplyTo: window.chatwootWebChannel.allowReplyTo || false,
     };
   },
   computed: {
@@ -137,6 +142,7 @@ export default {
         : this.$t('COMPONENTS.MESSAGE_BUBBLE.ERROR_MESSAGE');
     },
     hasReplyTo() {
+      if (!this.allowReplyTo) return false;
       return this.replyTo && (this.replyTo.content || this.replyTo.attachments);
     },
   },
diff --git a/app/views/widgets/show.html.erb b/app/views/widgets/show.html.erb
index 28c4ed901..3fc32ac42 100644
--- a/app/views/widgets/show.html.erb
+++ b/app/views/widgets/show.html.erb
@@ -27,7 +27,8 @@
         utcOffset: '<%= ActiveSupport::TimeZone[@web_widget.inbox.timezone].now.formatted_offset %>',
         timezone: '<%= @web_widget.inbox.timezone %>',
         allowMessagesAfterResolved: <%= @web_widget.inbox.allow_messages_after_resolved %>,
-        disableBranding: <%= @web_widget.inbox.account.feature_enabled?('disable_branding') %>
+        disableBranding: <%= @web_widget.inbox.account.feature_enabled?('disable_branding') %>,
+        allowReplyTo: <%= @web_widget.inbox.account.feature_enabled?('message_reply_to') %>
       }
       window.chatwootPubsubToken = '<%= @contact_inbox.pubsub_token %>'
       window.authToken = '<%= @token %>'