fix: Attach instagram images with file type story_mentions (#4100)

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

@@ -50,7 +50,10 @@
         <bubble-actions
           :id="data.id"
           :sender="data.sender"
+          :story-sender="storySender"
+          :story-id="storyId"
           :is-a-tweet="isATweet"
+          :has-instagram-story="hasInstagramStory"
           :is-email="isEmailContentType"
           :is-private="data.private"
           :message-type="data.message_type"
@@ -146,6 +149,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    hasInstagramStory: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -209,6 +216,12 @@ export default {
     sender() {
       return this.data.sender || {};
     },
+    storySender() {
+      return this.contentAttributes.story_sender || {};
+    },
+    storyId() {
+      return this.contentAttributes.story_id || {};
+    },
     contentType() {
       const {
         data: { content_type: contentType },

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

@@ -47,6 +47,7 @@
         class="message--read"
         :data="message"
         :is-a-tweet="isATweet"
+        :has-instagram-story="hasInstagramStory"
       />
       <li v-show="getUnreadCount != 0" class="unread--toast">
         <span class="text-uppercase">
@@ -64,6 +65,7 @@
         class="message--unread"
         :data="message"
         :is-a-tweet="isATweet"
+        :has-instagram-story="hasInstagramStory"
       />
     </ul>
     <div
@@ -215,6 +217,10 @@ export default {
       return this.conversationType === 'tweet';
     },
 
+    hasInstagramStory() {
+      return this.conversationType === 'instagram_direct_message';
+    },
+
     selectedTweet() {
       if (this.selectedTweetId) {
         const { messages = [] } = this.getMessages;

app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue

@@ -35,6 +35,19 @@
         size="16"
       />
     </button>
+    <a
+      v-if="hasInstagramStory && (isIncoming || isOutgoing) && linkToStory"
+      :href="linkToStory"
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+    >
+      <fluent-icon
+        v-tooltip.top-start="$t('CHAT_LIST.LINK_TO_STORY')"
+        icon="open"
+        class="action--icon cursor-pointer"
+        size="16"
+      />
+    </a>
     <a
       v-if="isATweet && (isOutgoing || isIncoming) && linkToTweet"
       :href="linkToTweet"
@@ -67,6 +80,14 @@ export default {
       type: String,
       default: '',
     },
+    storySender: {
+      type: String,
+      default: '',
+    },
+    storyId: {
+      type: String,
+      default: '',
+    },
     isEmail: {
       type: Boolean,
       default: true,
@@ -79,6 +100,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    hasInstagramStory: {
+      type: Boolean,
+      default: true,
+    },
     messageType: {
       type: Number,
       default: 1,
@@ -119,6 +144,13 @@ export default {
       return `https://twitter.com/${screenName ||
         this.inbox.name}/status/${sourceId}`;
     },
+    linkToStory() {
+      if (!this.storyId || !this.storySender) {
+        return '';
+      }
+      const { storySender, storyId } = this;
+      return `https://www.instagram.com/stories/${storySender}/${storyId}`;
+    },
     showSentIndicator() {
       return this.isOutgoing && this.sourceId && this.isAnEmailChannel;
     },

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

@@ -76,6 +76,7 @@
     "RECEIVED_VIA_EMAIL": "Received via email",
     "VIEW_TWEET_IN_TWITTER": "View tweet in Twitter",
     "REPLY_TO_TWEET": "Reply to this tweet",
+    "LINK_TO_STORY": "Go to instagram story",
     "SENT": "Sent successfully",
     "NO_MESSAGES": "No Messages",
     "NO_CONTENT": "No content available",