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

2023-01-30 13:03:59 +05:30
parent 6bd4e8853b
commit 6013cc9bea
8 changed files with 74 additions and 8 deletions
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/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: {
--- a/app/javascript/dashboard/components/widgets/conversation/instagramImageErrorPlaceholder.vue
+++ b/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>
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/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"
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -75,6 +75,7 @@
  "dismiss-circle-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm3.446 4.897.084.073a.75.75 0 0 1 .073.976l-.073.084L13.061 12l2.47 2.47a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073L12 13.061l-2.47 2.47a.75.75 0 0 1-.976.072l-.084-.073a.75.75 0 0 1-.073-.976l.073-.084L10.939 12l-2.47-2.47a.75.75 0 0 1-.072-.976l.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 10.939l2.47-2.47a.75.75 0 0 1 .976-.072Z",
  "dismiss-outline": "m4.397 4.554.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 10.939l6.47-6.47a.75.75 0 1 1 1.06 1.061L13.061 12l6.47 6.47a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073L12 13.061l-6.47 6.47a.75.75 0 0 1-1.06-1.061L10.939 12l-6.47-6.47a.75.75 0 0 1-.072-.976l.073-.084-.073.084Z",
  "document-outline": "M18.5 20a.5.5 0 0 1-.5.5H6a.5.5 0 0 1-.5-.5V4a.5.5 0 0 1 .5-.5h6V8a2 2 0 0 0 2 2h4.5v10Zm-5-15.379L17.378 8.5H14a.5.5 0 0 1-.5-.5V4.621Zm5.914 3.793-5.829-5.828c-.026-.026-.058-.046-.085-.07a2.072 2.072 0 0 0-.219-.18c-.04-.027-.086-.045-.128-.068-.071-.04-.141-.084-.216-.116a1.977 1.977 0 0 0-.624-.138C12.266 2.011 12.22 2 12.172 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9.828a2 2 0 0 0-.586-1.414Z",
+  "document-error-outline": "M6 2a2 2 0 0 0-2 2v5.207a5.48 5.48 0 0 1 1-.185V4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1h-3.6a5.507 5.507 0 0 1-.657 1H14a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2H6Zm8.793 5H11.5a.5.5 0 0 1-.5-.5V3.207L14.793 7ZM10 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0ZM5.5 12a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 1 0v-2a.5.5 0 0 0-.5-.5Zm0 5.125a.625.625 0 1 0 0-1.25a.625.625 0 0 0 0 1.25Z",
  "draft-outline": "m20.877 2.826.153.144.145.153a3.579 3.579 0 0 1-.145 4.908L9.062 19.999a2.25 2.25 0 0 1-1 .58l-5.115 1.395a.75.75 0 0 1-.92-.921l1.394-5.116a2.25 2.25 0 0 1 .58-.999L15.97 2.97a3.579 3.579 0 0 1 4.908-.144ZM15 6.06l-9.938 9.938a.75.75 0 0 0-.193.333l-1.05 3.85 3.85-1.05A.75.75 0 0 0 8 18.938L17.94 9 15 6.06ZM6.525 11l-1.5 1.5H2.75a.75.75 0 0 1 0-1.5h3.775Zm4-4-1.5 1.5H2.75a.75.75 0 1 1 0-1.5h7.775Zm6.505-2.97-.97.97 2.939 2.94.97-.97a2.078 2.078 0 1 0-2.939-2.94ZM14.525 3l-1.5 1.5H2.75a.75.75 0 1 1 0-1.5h11.775Z",
  "dual-screen-clock-outline": "M10.019 6.002a6.632 6.632 0 0 0 .058 1.5H3.75a.25.25 0 0 0-.25.25v12.494c0 .138.112.25.25.25h7.498l-.001-10.167c.416.57.924 1.07 1.5 1.479v8.69h7.498a.25.25 0 0 0 .25-.25v-8.62a6.535 6.535 0 0 0 1.501-1.656V20.25a1.75 1.75 0 0 1-1.75 1.75h-8.998l-.001-.003H3.75A1.75 1.75 0 0 1 2 20.246V7.751c0-.966.784-1.75 1.75-1.75h6.269Zm6.22 11.498a.75.75 0 0 1 .101 1.493L16.24 19h-1.5a.75.75 0 0 1-.102-1.493l.102-.007h1.5Zm-6.996 0a.75.75 0 0 1 .102 1.493L9.243 19H7.74a.75.75 0 0 1-.102-1.493l.102-.007h1.502ZM16.498 1a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Zm-1 2a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h3.001a.5.5 0 0 0 0-1h-2.501V3.5a.5.5 0 0 0-.5-.5Z",
  "edit-outline": "M21.03 2.97a3.578 3.578 0 0 1 0 5.06L9.062 20a2.25 2.25 0 0 1-.999.58l-5.116 1.395a.75.75 0 0 1-.92-.921l1.395-5.116a2.25 2.25 0 0 1 .58-.999L15.97 2.97a3.578 3.578 0 0 1 5.06 0ZM15 6.06 5.062 16a.75.75 0 0 0-.193.333l-1.05 3.85 3.85-1.05A.75.75 0 0 0 8 18.938L17.94 9 15 6.06Zm2.03-2.03-.97.97L19 7.94l.97-.97a2.079 2.079 0 0 0-2.94-2.94Z",
--- a/app/models/message.rb
+++ b/app/models/message.rb
@@ -112,7 +112,6 @@ class Message < ApplicationRecord
      }
    )
    data.merge!(echo_id: echo_id) if echo_id.present?
-    validate_instagram_story if instagram_story_mention?
    data.merge!(attachments: attachments.map(&:push_event_data)) if attachments.present?
    merge_sender_attributes(data)
  end
--- a/spec/models/attachment_spec.rb
+++ b/spec/models/attachment_spec.rb
@@ -25,7 +25,6 @@ RSpec.describe Attachment, type: :model do
    it 'returns external url as data and thumb urls' do
      external_url = instagram_message.attachments.first.external_url
      expect(instagram_message.attachments.first.push_event_data[:data_url]).to eq external_url
-      expect(instagram_message.attachments.first.push_event_data[:thumb_url]).to eq external_url
    end
  end
 end
--- a/spec/models/channel/facebook_page_spec.rb
+++ b/spec/models/channel/facebook_page_spec.rb
@@ -30,6 +30,42 @@ RSpec.describe Channel::FacebookPage do
        channel.prompt_reauthorization!
      end
    end
+
+    context 'when fetch instagram story' do
+      let!(:account) { create(:account) }
+      let!(:instagram_channel) { create(:channel_instagram_fb_page, account: account, instagram_id: 'chatwoot-app-user-id-1') }
+      let!(:instagram_inbox) { create(:inbox, channel: instagram_channel, account: account, greeting_enabled: false) }
+      let(:fb_object) { double }
+      let(:message) { create(:message, inbox_id: instagram_inbox.id) }
+      let(:instagram_message) { create(:message, :instagram_story_mention, inbox_id: instagram_inbox.id) }
+
+      it '#fetch_instagram_story_link' do
+        allow(Koala::Facebook::API).to receive(:new).and_return(fb_object)
+        allow(fb_object).to receive(:get_object).and_return(
+          { story:
+            {
+              mention: {
+                link: 'https://www.example.com/test.jpeg',
+                id: '17920786367196703'
+              }
+            },
+            from: {
+              username: 'Sender-id-1', id: 'Sender-id-1'
+            },
+            id: 'instagram-message-id-1234' }.with_indifferent_access
+        )
+        story_link = instagram_channel.fetch_instagram_story_link(message)
+        expect(story_link).to eq('https://www.example.com/test.jpeg')
+      end
+
+      it '#delete_instagram_story' do
+        expect(instagram_message.attachments.count).to eq(1)
+
+        instagram_channel.delete_instagram_story(instagram_message)
+
+        expect(instagram_message.attachments.count).to eq(0)
+      end
+    end
  end

  it 'has a valid name' do
--- a/spec/models/message_spec.rb
+++ b/spec/models/message_spec.rb
@@ -198,21 +198,21 @@ RSpec.describe Message, type: :model do
      }.to_json, headers: {})
    end

-    it 'deletes the attachment for deleted stories' do
+    it 'keeps the attachment for deleted stories' do
      expect(instagram_message.attachments.count).to eq 1
      stub_request(:get, %r{https://graph.facebook.com/.*}).to_return(status: 404)
      instagram_message.push_event_data
-      expect(instagram_message.reload.attachments.count).to eq 0
+      expect(instagram_message.reload.attachments.count).to eq 1
    end

-    it 'deletes the attachment for expired stories' do
+    it 'keeps the attachment for expired stories' do
      expect(instagram_message.attachments.count).to eq 1
      # for expired stories, the link will be empty
      stub_request(:get, %r{https://graph.facebook.com/.*}).to_return(status: 200, body: {
        story: { mention: { link: '', id: '17920786367196703' } }
      }.to_json, headers: {})
      instagram_message.push_event_data
-      expect(instagram_message.reload.attachments.count).to eq 0
+      expect(instagram_message.reload.attachments.count).to eq 1
    end
  end
 end