feat: Render instagram reels in Chatwoot (#9829)

- Previously we were ignoring the reels shared over Instagram messages.
This PR will render the reels with in Chatwoot.

followup : we need to render reels in a better interface so that it is
clearly denoted to the user that its an Instagram reel

app/builders/messages/messenger/message_builder.rb

@@ -27,7 +27,7 @@ class Messages::Messenger::MessageBuilder
     file_type = attachment['type'].to_sym
     params = { file_type: file_type, account_id: @message.account_id }
 
-    if [:image, :file, :audio, :video, :share, :story_mention].include? file_type
+    if [:image, :file, :audio, :video, :share, :story_mention, :ig_reel].include? file_type
       params.merge!(file_type_params(attachment))
     elsif file_type == :location
       params.merge!(location_params(attachment))

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

@@ -501,7 +501,9 @@ export default {
   },
   methods: {
     isAttachmentImageVideoAudio(fileType) {
-      return ['image', 'audio', 'video', 'story_mention'].includes(fileType);
+      return ['image', 'audio', 'video', 'story_mention', 'ig_reel'].includes(
+        fileType
+      );
     },
     hasMediaAttachment(type) {
       if (this.hasAttachments && this.data.attachments.length > 0) {

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

@@ -40,6 +40,7 @@ const ALLOWED_FILE_TYPES = {
   IMAGE: 'image',
   VIDEO: 'video',
   AUDIO: 'audio',
+  IG_REEL: 'ig_reel',
 };
 
 export default {
@@ -66,7 +67,10 @@ export default {
       return this.attachment.file_type === ALLOWED_FILE_TYPES.IMAGE;
     },
     isVideo() {
-      return this.attachment.file_type === ALLOWED_FILE_TYPES.VIDEO;
+      return (
+        this.attachment.file_type === ALLOWED_FILE_TYPES.VIDEO ||
+        this.attachment.file_type === ALLOWED_FILE_TYPES.IG_REEL
+      );
     },
     isAudio() {
       return this.attachment.file_type === ALLOWED_FILE_TYPES.AUDIO;

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

@@ -189,6 +189,7 @@ import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 const ALLOWED_FILE_TYPES = {
   IMAGE: 'image',
   VIDEO: 'video',
+  IG_REEL: 'ig_reel',
   AUDIO: 'audio',
 };
 
@@ -242,7 +243,10 @@ export default {
       return this.activeFileType === ALLOWED_FILE_TYPES.IMAGE;
     },
     isVideo() {
-      return this.activeFileType === ALLOWED_FILE_TYPES.VIDEO;
+      return (
+        this.activeFileType === ALLOWED_FILE_TYPES.VIDEO ||
+        this.activeFileType === ALLOWED_FILE_TYPES.IG_REEL
+      );
     },
     isAudio() {
       return this.activeFileType === ALLOWED_FILE_TYPES.AUDIO;

app/models/attachment.rb

@@ -39,7 +39,7 @@ class Attachment < ApplicationRecord
   validate :acceptable_file
   validates :external_url, length: { maximum: Limits::URL_LENGTH_LIMIT }
   enum file_type: { :image => 0, :audio => 1, :video => 2, :file => 3, :location => 4, :fallback => 5, :share => 6, :story_mention => 7,
-                    :contact => 8 }
+                    :contact => 8, :ig_reel => 9 }
 
   def push_event_data
     return unless file_type

spec/builders/messages/instagram/message_builder_spec.rb

@@ -13,6 +13,7 @@ describe Messages::Instagram::MessageBuilder do
   let!(:instagram_inbox) { create(:inbox, channel: instagram_channel, account: account, greeting_enabled: false) }
   let!(:dm_params) { build(:instagram_message_create_event).with_indifferent_access }
   let!(:story_mention_params) { build(:instagram_story_mention_event).with_indifferent_access }
+  let!(:shared_reel_params) { build(:instagram_shared_reel_event).with_indifferent_access }
   let!(:instagram_story_reply_event) { build(:instagram_story_reply_event).with_indifferent_access }
   let!(:instagram_message_reply_event) { build(:instagram_message_reply_event).with_indifferent_access }
   let(:fb_object) { double }
@@ -79,6 +80,27 @@ describe Messages::Instagram::MessageBuilder do
       expect(instagram_inbox.messages.count).to be 1
     end
 
+    it 'creates message for shared reel' do
+      allow(Koala::Facebook::API).to receive(:new).and_return(fb_object)
+      allow(fb_object).to receive(:get_object).and_return(
+        {
+          name: 'Jane',
+          id: 'Sender-id-1',
+          account_id: instagram_inbox.account_id,
+          profile_pic: 'https://chatwoot-assets.local/sample.png'
+        }.with_indifferent_access
+      )
+      messaging = shared_reel_params[:entry][0]['messaging'][0]
+      contact_inbox
+      described_class.new(messaging, instagram_inbox).perform
+
+      message = instagram_channel.inbox.messages.first
+      expect(message.attachments.first.file_type).to eq('ig_reel')
+      expect(message.attachments.first.external_url).to eq(
+        shared_reel_params[:entry][0]['messaging'][0]['message']['attachments'][0]['payload']['url']
+      )
+    end
+
     it 'creates message with for reply with story id' do
       allow(Koala::Facebook::API).to receive(:new).and_return(fb_object)
       allow(fb_object).to receive(:get_object).and_return(

spec/factories/instagram/instagram_message_create_event.rb

@@ -204,6 +204,42 @@ FactoryBot.define do
     initialize_with { attributes }
   end
 
+  factory :instagram_shared_reel_event, class: Hash do
+    entry do
+      [
+        {
+          'id': 'instagram-message-id-1234',
+          'time': '2021-09-08T06:34:04+0000',
+          'messaging': [
+            {
+              'sender': {
+                'id': 'Sender-id-1'
+              },
+              'recipient': {
+                'id': 'chatwoot-app-user-id-1'
+              },
+              'timestamp': '2021-09-08T06:34:04+0000',
+              'message': {
+                'mid': 'message-id-1',
+                'attachments': [
+                  {
+                    'type': 'ig_reel',
+                    'payload': {
+                      'reel_video_id': '1234',
+                      'title': 'Reel title',
+                      'url': 'https://www.example.com/test.jpeg'
+                    }
+                  }
+                ]
+              }
+            }
+          ]
+        }
+      ]
+    end
+    initialize_with { attributes }
+  end
+
   factory :instagram_story_mention_event, class: Hash do
     entry do
       [