From faf104c1fefc7a9a4ea606f11b8ead4eebc7b916 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Mon, 2 Aug 2021 16:07:30 +0530
Subject: [PATCH] fix: Update tweet character count logic (#2709)

---
 app/javascript/dashboard/api/inbox/message.js | 43 +++++++++++----
 .../dashboard/api/specs/inbox/message.spec.js | 32 +++++++++++-
 .../widgets/conversation/ConversationBox.vue  |  4 +-
 .../widgets/conversation/Message.vue          |  1 +
 .../widgets/conversation/MessagesView.vue     | 13 ++---
 .../widgets/conversation/ReplyBox.vue         | 36 ++++++++++---
 .../widgets/conversation/bubble/Actions.vue   | 27 ++++++++--
 .../i18n/locale/en/conversation.json          |  2 +-
 .../twitter/send_on_twitter_service.rb        |  2 +
 .../twitter/send_on_twitter_service_spec.rb   | 52 ++++++++++++++++---
 10 files changed, 174 insertions(+), 38 deletions(-)

diff --git a/app/javascript/dashboard/api/inbox/message.js b/app/javascript/dashboard/api/inbox/message.js
index 84e77fb8b..98c250e60 100644
--- a/app/javascript/dashboard/api/inbox/message.js
+++ b/app/javascript/dashboard/api/inbox/message.js
@@ -2,6 +2,33 @@
 /* global axios */
 import ApiClient from '../ApiClient';
 
+export const buildCreatePayload = ({
+  message,
+  isPrivate,
+  contentAttributes,
+  echoId,
+  file,
+}) => {
+  let payload;
+  if (file) {
+    payload = new FormData();
+    payload.append('attachments[]', file, file.name);
+    if (message) {
+      payload.append('content', message);
+    }
+    payload.append('private', isPrivate);
+    payload.append('echo_id', echoId);
+  } else {
+    payload = {
+      content: message,
+      private: isPrivate,
+      echo_id: echoId,
+      content_attributes: contentAttributes,
+    };
+  }
+  return payload;
+};
+
 class MessageApi extends ApiClient {
   constructor() {
     super('conversations', { accountScoped: true });
@@ -15,18 +42,16 @@ class MessageApi extends ApiClient {
     echo_id: echoId,
     file,
   }) {
-    const formData = new FormData();
-    if (file) formData.append('attachments[]', file, file.name);
-    if (message) formData.append('content', message);
-    if (contentAttributes)
-      formData.append('content_attributes', JSON.stringify(contentAttributes));
-
-    formData.append('private', isPrivate);
-    formData.append('echo_id', echoId);
     return axios({
       method: 'post',
       url: `${this.url}/${conversationId}/messages`,
-      data: formData,
+      data: buildCreatePayload({
+        message,
+        isPrivate,
+        contentAttributes,
+        echoId,
+        file,
+      }),
     });
   }
 
diff --git a/app/javascript/dashboard/api/specs/inbox/message.spec.js b/app/javascript/dashboard/api/specs/inbox/message.spec.js
index dd4814f23..ca8d313b4 100644
--- a/app/javascript/dashboard/api/specs/inbox/message.spec.js
+++ b/app/javascript/dashboard/api/specs/inbox/message.spec.js
@@ -1,4 +1,4 @@
-import messageAPI from '../../inbox/message';
+import messageAPI, { buildCreatePayload } from '../../inbox/message';
 import ApiClient from '../../ApiClient';
 import describeWithAPIMock from '../apiSpecHelper';
 
@@ -29,4 +29,34 @@ describe('#ConversationAPI', () => {
       );
     });
   });
+  describe('#buildCreatePayload', () => {
+    it('builds form payload if file is available', () => {
+      const formPayload = buildCreatePayload({
+        message: 'test content',
+        echoId: 12,
+        isPrivate: true,
+        file: new Blob(['test-content'], { type: 'application/pdf' }),
+      });
+      expect(formPayload).toBeInstanceOf(FormData);
+      expect(formPayload.get('content')).toEqual('test content');
+      expect(formPayload.get('echo_id')).toEqual('12');
+      expect(formPayload.get('private')).toEqual('true');
+    });
+
+    it('builds object payload if file is not available', () => {
+      expect(
+        buildCreatePayload({
+          message: 'test content',
+          isPrivate: false,
+          echoId: 12,
+          contentAttributes: { in_reply_to: 12 },
+        })
+      ).toEqual({
+        content: 'test content',
+        private: false,
+        echo_id: 12,
+        content_attributes: { in_reply_to: 12 },
+      });
+    });
+  });
 });
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index 440f6e1e5..01c21c53f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -53,9 +53,7 @@ export default {
     },
   },
   computed: {
-    ...mapGetters({
-      currentChat: 'getSelectedChat',
-    }),
+    ...mapGetters({ currentChat: 'getSelectedChat' }),
     showContactPanel() {
       return this.isContactPanelOpen && this.currentChat.id;
     },
diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index 029ab5e6a..c519f99e9 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -46,6 +46,7 @@
           :message-type="data.message_type"
           :readable-time="readableTime"
           :source-id="data.source_id"
+          :inbox-id="data.inbox_id"
         />
       </div>
       <spinner v-if="isPending" size="tiny" />
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index 3f8fda58d..9b2c39996 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -33,11 +33,11 @@
 
     <div v-if="isATweet" class="banner">
       <span v-if="!selectedTweetId">
-        {{ $t('CONVERSATION.LAST_INCOMING_TWEET') }}
+        {{ $t('CONVERSATION.SELECT_A_TWEET_TO_REPLY') }}
       </span>
       <span v-else>
         {{ $t('CONVERSATION.REPLYING_TO') }}
-        {{ selectedTweet }}
+        {{ selectedTweet.content || '' }}
       </span>
       <button
         v-if="selectedTweetId"
@@ -89,9 +89,10 @@
           />
         </div>
       </div>
-      <ReplyBox
+      <reply-box
         :conversation-id="currentChat.id"
-        :in-reply-to="selectedTweetId"
+        :is-a-tweet="isATweet"
+        :selected-tweet="selectedTweet"
         @scrollToMessage="scrollToBottom"
       />
     </div>
@@ -207,10 +208,10 @@ export default {
     selectedTweet() {
       if (this.selectedTweetId) {
         const { messages = [] } = this.getMessages;
-        const [selectedMessage = {}] = messages.filter(
+        const [selectedMessage] = messages.filter(
           message => message.id === this.selectedTweetId
         );
-        return selectedMessage.content || '';
+        return selectedMessage || {};
       }
       return '';
     },
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index 9a2434fbf..ee2929743 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -107,9 +107,13 @@ export default {
   },
   mixins: [clickaway, inboxMixin, uiSettingsMixin, alertMixin],
   props: {
-    inReplyTo: {
-      type: [String, Number],
-      default: '',
+    selectedTweet: {
+      type: [Object, String],
+      default: () => ({}),
+    },
+    isATweet: {
+      type: Boolean,
+      default: false,
     },
   },
   data() {
@@ -169,11 +173,14 @@ export default {
       return this.maxLength - this.message.length;
     },
     isReplyButtonDisabled() {
-      const isMessageEmpty = this.isMessageEmpty;
+      if (this.isATweet && !this.inReplyTo) {
+        return true;
+      }
 
       if (this.hasAttachments) return false;
+
       return (
-        isMessageEmpty ||
+        this.isMessageEmpty ||
         this.message.length === 0 ||
         this.message.length > this.maxLength
       );
@@ -198,7 +205,7 @@ export default {
       }
       if (this.isATwitterInbox) {
         if (this.conversationType === 'tweet') {
-          return MESSAGE_MAX_LENGTH.TWEET;
+          return MESSAGE_MAX_LENGTH.TWEET - this.replyToUserLength - 2;
         }
       }
       return MESSAGE_MAX_LENGTH.GENERAL;
@@ -235,9 +242,22 @@ export default {
     isOnPrivateNote() {
       return this.replyType === REPLY_EDITOR_MODES.NOTE;
     },
+    inReplyTo() {
+      const selectedTweet = this.selectedTweet || {};
+      return selectedTweet.id;
+    },
+    replyToUserLength() {
+      const selectedTweet = this.selectedTweet || {};
+      const {
+        sender: {
+          additional_attributes: { screen_name: screenName = '' } = {},
+        } = {},
+      } = selectedTweet;
+      return screenName ? screenName.length : 0;
+    },
     isMessageEmpty() {
-      if(!this.message) {
-        this.message = '';
+      if (!this.message) {
+        return true;
       }
       return !this.message.trim().replace(/\n/g, '').length;
     },
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
index 8c6954672..59a0a9896 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
@@ -14,13 +14,13 @@
       @mouseleave="isHovered = false"
     />
     <i
-      v-if="isATweet && isIncoming"
+      v-if="isATweet && (isIncoming || isOutgoing) && sourceId"
       v-tooltip.top-start="$t('CHAT_LIST.REPLY_TO_TWEET')"
       class="icon ion-reply cursor-pointer"
       @click="onTweetReply"
     />
     <a
-      v-if="isATweet && isIncoming"
+      v-if="isATweet && (isOutgoing || isIncoming) && linkToTweet"
       :href="linkToTweet"
       target="_blank"
       rel="noopener noreferrer nofollow"
@@ -71,19 +71,33 @@ export default {
       type: [String, Number],
       default: '',
     },
+    inboxId: {
+      type: [String, Number],
+      default: 0,
+    },
   },
   computed: {
+    inbox() {
+      return this.$store.getters['inboxes/getInbox'](this.inboxId);
+    },
     isIncoming() {
       return MESSAGE_TYPE.INCOMING === this.messageType;
     },
+    isOutgoing() {
+      return MESSAGE_TYPE.OUTGOING === this.messageType;
+    },
     screenName() {
       const { additional_attributes: additionalAttributes = {} } =
         this.sender || {};
       return additionalAttributes?.screen_name || '';
     },
     linkToTweet() {
+      if (!this.sourceId || !this.inbox.name) {
+        return '';
+      }
       const { screenName, sourceId } = this;
-      return `https://twitter.com/${screenName}/status/${sourceId}`;
+      return `https://twitter.com/${screenName ||
+        this.inbox.name}/status/${sourceId}`;
     },
   },
   methods: {
@@ -113,6 +127,13 @@ export default {
   }
 }
 
+.right {
+  .ion-reply,
+  .ion-android-open {
+    color: var(--white);
+  }
+}
+
 .message-text--metadata {
   align-items: flex-end;
   display: flex;
diff --git a/app/javascript/dashboard/i18n/locale/en/conversation.json b/app/javascript/dashboard/i18n/locale/en/conversation.json
index 7ea1d7e25..eeeb727f1 100644
--- a/app/javascript/dashboard/i18n/locale/en/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/en/conversation.json
@@ -23,7 +23,7 @@
     "24_HOURS_WINDOW": "24 hour message window restriction",
     "TWILIO_WHATSAPP_CAN_REPLY": "You can only reply to this conversation using a template message due to",
     "TWILIO_WHATSAPP_24_HOURS_WINDOW": "24 hour message window restriction",
-    "LAST_INCOMING_TWEET": "You are replying to the last incoming tweet",
+    "SELECT_A_TWEET_TO_REPLY": "Please select a tweet to reply to.",
     "REPLYING_TO": "You are replying to:",
     "REMOVE_SELECTION": "Remove Selection",
     "DOWNLOAD": "Download",
diff --git a/app/services/twitter/send_on_twitter_service.rb b/app/services/twitter/send_on_twitter_service.rb
index 832d0ff66..16e081772 100644
--- a/app/services/twitter/send_on_twitter_service.rb
+++ b/app/services/twitter/send_on_twitter_service.rb
@@ -29,6 +29,8 @@ class Twitter::SendOnTwitterService < Base::SendOnChannelService
   end
 
   def screen_name
+    return "@#{reply_to_message.inbox.name}" if reply_to_message.outgoing?
+
     "@#{reply_to_message.sender&.additional_attributes.try(:[], 'screen_name') || ''}"
   end
 
diff --git a/spec/services/twitter/send_on_twitter_service_spec.rb b/spec/services/twitter/send_on_twitter_service_spec.rb
index 4e0f4e91e..19b21fc49 100644
--- a/spec/services/twitter/send_on_twitter_service_spec.rb
+++ b/spec/services/twitter/send_on_twitter_service_spec.rb
@@ -9,7 +9,7 @@ describe Twitter::SendOnTwitterService do
   let(:widget_inbox) { create(:inbox, account: account) }
   let(:twitter_channel) { create(:channel_twitter_profile, account: account) }
   let(:twitter_inbox) { create(:inbox, channel: twitter_channel, account: account) }
-  let(:contact) { create(:contact, account: account) }
+  let(:contact) { create(:contact, account: account, additional_attributes: { screen_name: 'test_user' }) }
   let(:contact_inbox) { create(:contact_inbox, contact: contact, inbox: twitter_inbox) }
   let(:dm_conversation) do
     create(
@@ -73,12 +73,50 @@ describe Twitter::SendOnTwitterService do
         expect(twitter_client).to have_received(:send_direct_message)
       end
 
-      it 'if conversation is a tweet' do
-        create(:message, message_type: :incoming, inbox: twitter_inbox, account: account, conversation: tweet_conversation)
-        message = create(:message, message_type: :outgoing, inbox: twitter_inbox, account: account, conversation: tweet_conversation)
-        ::Twitter::SendOnTwitterService.new(message: message).perform
-        expect(twitter_client).to have_received(:send_tweet_reply)
-        expect(message.reload.source_id).to eq '12345'
+      context 'when conversation is a tweet' do
+        it 'creates a response with correct reply if reply to message is incoming' do
+          create(
+            :message,
+            message_type: :incoming,
+            sender: contact,
+            source_id: 'test-source-id-1',
+            inbox: twitter_inbox,
+            account: account,
+            conversation: tweet_conversation
+          )
+          message = create(:message, message_type: :outgoing, inbox: twitter_inbox, account: account, conversation: tweet_conversation)
+          ::Twitter::SendOnTwitterService.new(message: message).perform
+          expect(twitter_client).to have_received(:send_tweet_reply).with(
+            reply_to_tweet_id: 'test-source-id-1',
+            tweet: "@test_user #{message.content}"
+          )
+          expect(message.reload.source_id).to eq '12345'
+        end
+
+        it 'creates a response with correct reply if reply to message is outgoing' do
+          outgoing_message = create(
+            :message,
+            message_type: :outgoing,
+            source_id: 'test-source-id-1',
+            inbox: twitter_inbox,
+            account: account,
+            conversation: tweet_conversation
+          )
+          reply_message = create(
+            :message,
+            message_type: :outgoing,
+            inbox: twitter_inbox,
+            account: account,
+            conversation: tweet_conversation,
+            in_reply_to: outgoing_message.id
+          )
+          ::Twitter::SendOnTwitterService.new(message: reply_message).perform
+          expect(twitter_client).to have_received(:send_tweet_reply).with(
+            reply_to_tweet_id: 'test-source-id-1',
+            tweet: "@#{twitter_inbox.name} #{reply_message.content}"
+          )
+          expect(reply_message.reload.source_id).to eq '12345'
+        end
       end
     end
   end