fix: validate instagram story only while saving the message (#6340)

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

@@ -45,6 +45,9 @@
               :longitude="attachment.coordinates_long"
               :name="attachment.fallback_title"
             />
+            <instagram-image-error-placeholder
+              v-else-if="hasImageError && hasInstagramStory"
+            />
             <bubble-file v-else :url="attachment.data_url" />
           </div>
         </div>
@@ -123,7 +126,7 @@ import BubbleText from './bubble/Text';
 import BubbleVideo from './bubble/Video.vue';
 import Spinner from 'shared/components/Spinner';
 import ContextMenu from 'dashboard/modules/conversations/components/MessageContextMenu';
-
+import instagramImageErrorPlaceholder from './instagramImageErrorPlaceholder.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import contentTypeMixin from 'shared/mixins/contentTypeMixin';
 import { MESSAGE_TYPE, MESSAGE_STATUS } from 'shared/constants/messages';
@@ -141,6 +144,7 @@ export default {
     BubbleVideo,
     ContextMenu,
     Spinner,
+    instagramImageErrorPlaceholder,
   },
   mixins: [alertMixin, messageFormatterMixin, contentTypeMixin],
   props: {

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

@@ -0,0 +1,26 @@
+<template>
+  <div class="image-placeholder">
+    <fluent-icon icon="document-error" size="32" />
+    <p>{{ $t('COMPONENTS.FILE_BUBBLE.INSTAGRAM_STORY_UNAVAILABLE') }}</p>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped>
+.image-placeholder {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  padding: var(--space-slab);
+  height: calc(var(--space-large) * 10);
+  margin-top: var(--space-one);
+  width: 100%;
+  background-color: var(--s-75);
+  color: var(--s-800);
+  border-radius: var(--border-radius-normal);
+}
+</style>

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

@@ -166,7 +166,8 @@
     },
     "FILE_BUBBLE": {
       "DOWNLOAD": "Download",
-      "UPLOADING": "Uploading..."
+      "UPLOADING": "Uploading...",
+      "INSTAGRAM_STORY_UNAVAILABLE": "This story is no longer available."
     },
     "LOCATION_BUBBLE": {
       "SEE_ON_MAP": "See on map"