feat: Instagram story replies will display the original story link (#6846)

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

@@ -22,6 +22,14 @@
           :bcc="emailHeadAttributes.bcc"
           :is-incoming="isIncoming"
         />
+        <blockquote v-if="storyReply" class="story-reply-quote">
+          <span>{{ $t('CONVERSATION.REPLIED_TO_STORY') }}</span>
+          <bubble-image
+            v-if="!hasStoryError"
+            :url="storyUrl"
+            @error="onStoryLoadError"
+          />
+        </blockquote>
         <bubble-text
           v-if="data.content"
           :message="message"
@@ -79,7 +87,7 @@
           :sender="data.sender"
           :story-sender="storySender"
           :external-error="externalError"
-          :story-id="storyId"
+          :story-id="`${storyId}`"
           :is-a-tweet="isATweet"
           :is-a-whatsapp-channel="isAWhatsAppChannel"
           :has-instagram-story="hasInstagramStory"
@@ -192,6 +200,7 @@ export default {
       hasImageError: false,
       contextMenuPosition: {},
       showBackgroundHighlight: false,
+      hasStoryError: false,
     };
   },
   computed: {
@@ -277,6 +286,12 @@ export default {
     storyId() {
       return this.contentAttributes.story_id || null;
     },
+    storyUrl() {
+      return this.contentAttributes.story_url || null;
+    },
+    storyReply() {
+      return this.storyUrl && this.hasInstagramStory;
+    },
     contentType() {
       const {
         data: { content_type: contentType },
@@ -414,10 +429,12 @@ export default {
   watch: {
     data() {
       this.hasImageError = false;
+      this.hasStoryError = false;
     },
   },
   mounted() {
     this.hasImageError = false;
+    this.hasStoryError = false;
     bus.$on(BUS_EVENTS.ON_MESSAGE_LIST_SCROLL, this.closeContextMenu);
     this.setupHighlightTimer();
   },
@@ -432,6 +449,9 @@ export default {
         const { file_type: fileType } = attachments[0];
         return fileType === type && !this.hasImageError;
       }
+      if (this.storyReply) {
+        return true;
+      }
       return false;
     },
     handleContextMenuClick() {
@@ -443,6 +463,9 @@ export default {
     onImageLoadError() {
       this.hasImageError = true;
     },
+    onStoryLoadError() {
+      this.hasStoryError = true;
+    },
     openContextMenu(e) {
       const shouldSkipContextMenu =
         e.target?.classList.contains('skip-context-menu') ||
@@ -672,7 +695,6 @@ li.right {
   blockquote {
     border-left: var(--space-micro) solid var(--s-75);
     color: var(--s-800);
-    padding: var(--space-smaller) var(--space-small);
     margin: var(--space-smaller) 0;
     padding: var(--space-small) var(--space-small) 0 var(--space-normal);
   }
@@ -704,4 +726,11 @@ li.right {
     }
   }
 }
+
+.story-reply-quote {
+  border-left: var(--space-micro) solid var(--s-75);
+  color: var(--s-600);
+  margin: var(--space-small) var(--space-normal) 0;
+  padding: var(--space-small) var(--space-small) 0 var(--space-small);
+}
 </style>

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

@@ -195,7 +195,7 @@ export default {
         return '';
       }
       const { storySender, storyId } = this;
-      return `https://www.instagram.com/stories/${storySender}/${storyId}`;
+      return `https://www.instagram.com/stories/direct/${storySender}_${storyId}`;
     },
     showStatusIndicators() {
       if ((this.isOutgoing || this.isTemplate) && !this.isPrivate) {

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

@@ -37,6 +37,7 @@
     "UNKNOWN_FILE_TYPE": "Unknown File",
     "SAVE_CONTACT": "Save",
     "UPLOADING_ATTACHMENTS": "Uploading attachments...",
+    "REPLIED_TO_STORY": "Replied to your story",
     "SUCCESS_DELETE_MESSAGE": "Message deleted successfully",
     "FAIL_DELETE_MESSSAGE": "Couldn't delete message! Try again",
     "NO_RESPONSE": "No response",