From 26b5c2c1364186cb3409d758cbcf71bb9a8737f6 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 5 Dec 2024 15:08:37 +0530
Subject: [PATCH] feat: setup instagram

---
 .../components-next/message/Message.vue       |   5 +
 .../components-next/message/bubbles/Image.vue |   9 +-
 .../message/bubbles/InstagramStory.vue        |  91 +++++
 .../components-next/message/bubbles/Video.vue |  11 +-
 .../message/fixtures/instagramConversation.js | 381 +++++++-----------
 5 files changed, 260 insertions(+), 237 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue

diff --git a/app/javascript/dashboard/components-next/message/Message.vue b/app/javascript/dashboard/components-next/message/Message.vue
index ef5f7bbe3..2cd868601 100644
--- a/app/javascript/dashboard/components-next/message/Message.vue
+++ b/app/javascript/dashboard/components-next/message/Message.vue
@@ -18,6 +18,7 @@ import ImageBubble from './bubbles/Image.vue';
 import FileBubble from './bubbles/File.vue';
 import AudioBubble from './bubbles/Audio.vue';
 import VideoBubble from './bubbles/Video.vue';
+import InstagramStoryBubble from './bubbles/InstagramStory.vue';
 import AttachmentsBubble from './bubbles/Attachments.vue';
 import EmailBubble from './bubbles/Email/Index.vue';
 
@@ -238,6 +239,10 @@ const componentToRender = computed(() => {
     if (emailInboxTypes.includes(props.messageType)) return EmailBubble;
   }
 
+  if (props.contentAttributes.imageType === 'story_mention') {
+    return InstagramStoryBubble;
+  }
+
   if (props.attachments.length === 1 && !props.content) {
     const fileType = props.attachments[0].fileType;
     if (fileType === ATTACHMENT_TYPES.IMAGE) return ImageBubble;
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Image.vue b/app/javascript/dashboard/components-next/message/bubbles/Image.vue
index 5d3770ce4..7cdd8106f 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Image.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Image.vue
@@ -29,12 +29,19 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['error']);
+
 const attachment = computed(() => {
   return props.attachments[0];
 });
 
 const hasError = ref(false);
 
+const handleError = () => {
+  hasError.value = true;
+  emit('error');
+};
+
 const downloadAttachment = async () => {
   const response = await fetch(attachment.value.dataUrl);
   const blob = await response.blob();
@@ -51,7 +58,7 @@ const downloadAttachment = async () => {
 
 <template>
   <BaseBubble class="overflow-hidden relative group">
-    <img :src="attachment.thumbUrl" @click="onClick" @error="hasError = true" />
+    <img :src="attachment.thumbUrl" @click="onClick" @error="handleError" />
     <div
       class="inset-0 p-2 absolute bg-gradient-to-tl from-n-slate-12/30 dark:from-n-slate-1/50 via-transparent to-transparent hidden group-hover:flex items-end justify-end gap-1.5"
     >
diff --git a/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue b/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue
new file mode 100644
index 000000000..c5d9418f9
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue
@@ -0,0 +1,91 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useMessageContext } from '../provider.js';
+import Icon from 'next/icon/Icon.vue';
+import ImageBubble from './Image.vue';
+import VideoBubble from './Video.vue';
+import BaseBubble from 'next/message/bubbles/Base.vue';
+
+import MessageFormatter from 'shared/helpers/MessageFormatter.js';
+import { MESSAGE_VARIANTS } from '../constants';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+const props = defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+  attachments: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['error']);
+
+const attachment = computed(() => {
+  return props.attachments[0];
+});
+
+const { variant } = useMessageContext();
+const hasImgStoryError = ref(false);
+const hasVideoStoryError = ref(false);
+
+const formattedContent = computed(() => {
+  if (variant.value === MESSAGE_VARIANTS.ACTIVITY) {
+    return props.content;
+  }
+
+  return new MessageFormatter(props.content).formattedMessage;
+});
+
+const onImageLoadError = () => {
+  hasImgStoryError.value = true;
+  emit('error');
+};
+
+const onVideoLoadError = () => {
+  hasVideoStoryError.value = true;
+  emit('error');
+};
+</script>
+
+<template>
+  <BaseBubble class="p-3 overflow-hidden">
+    <div v-if="content" class="mb-2" v-html="formattedContent" />
+    <img
+      v-if="!hasImgStoryError"
+      class="rounded-lg max-w-80"
+      :src="attachment.dataUrl"
+      @error="onImageLoadError"
+    />
+    <video
+      v-else-if="!hasVideoStoryError"
+      class="rounded-lg max-w-80"
+      controls
+      :src="attachment.dataUrl"
+      @error="onVideoLoadError"
+    />
+    <div
+      v-else
+      class="flex items-center bg-n-alpha-1 gap-1 text-center px-5 py-4 rounded-lg"
+    >
+      <Icon icon="i-lucide-circle-off" class="text-n-slate-11" />
+      <p class="mb-0 text-n-slate-11">
+        {{ $t('COMPONENTS.FILE_BUBBLE.INSTAGRAM_STORY_UNAVAILABLE') }}
+      </p>
+    </div>
+  </BaseBubble>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Video.vue b/app/javascript/dashboard/components-next/message/bubbles/Video.vue
index f9a06a0db..40168aee7 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Video.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Video.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { ref, computed } from 'vue';
 import BaseBubble from './Base.vue';
 import Icon from 'next/icon/Icon.vue';
 import { ATTACHMENT_TYPES } from '../constants';
@@ -29,6 +29,13 @@ const props = defineProps({
     required: true,
   },
 });
+const emit = defineEmits(['error']);
+const hasError = ref(false);
+
+const handleError = () => {
+  hasError.value = true;
+  emit('error');
+};
 
 const attachment = computed(() => {
   return props.attachments[0];
@@ -54,7 +61,7 @@ const isReel = computed(() => {
         'max-w-48': isReel,
         'max-w-full': !isReel,
       }"
-      @error="hasError = true"
+      @error="handleError"
     />
   </BaseBubble>
 </template>
diff --git a/app/javascript/dashboard/components-next/message/fixtures/instagramConversation.js b/app/javascript/dashboard/components-next/message/fixtures/instagramConversation.js
index 362bf8aa9..10ef125a6 100644
--- a/app/javascript/dashboard/components-next/message/fixtures/instagramConversation.js
+++ b/app/javascript/dashboard/components-next/message/fixtures/instagramConversation.js
@@ -2,6 +2,151 @@ import camelcaseKeys from 'camelcase-keys';
 
 export default camelcaseKeys(
   [
+    {
+      id: 25281804,
+      content: 'cwtestinglocal mentioned you in the story: ',
+      inbox_id: 27355,
+      conversation_id: 23731,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {
+        story_sender: 'cwtestinglocal',
+        story_id: '17889220763812855',
+        image_type: 'story_mention',
+      },
+      created_at: 1692765935,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMDk0OTEyODIyODExNDI0MDczNjkxMTozMTE5MjcwODk3OTU5MTM2NDg4NTg2OTU1NTEzOTczOTY0OAZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 53375128,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+      attachments: [
+        {
+          id: 2053726,
+          message_id: 25281804,
+          file_type: 'image',
+          account_id: 1,
+          extension: null,
+          data_url:
+            'https://videos.pexels.com/video-files/7722989/7722989-uhd_1440_2560_25fps.mp4',
+          thumb_url:
+            'https://videos.pexels.com/video-files/7722989/7722989-uhd_1440_2560_25fps.mp4',
+          file_size: 376973,
+          width: 1179,
+          height: 2096,
+        },
+      ],
+    },
+    {
+      id: 25281804,
+      content: 'cwtestinglocal mentioned you in the story: ',
+      inbox_id: 27355,
+      conversation_id: 23731,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {
+        story_sender: 'cwtestinglocal',
+        story_id: '17889220763812855',
+        image_type: 'story_mention',
+      },
+      created_at: 1692765935,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMDk0OTEyODIyODExNDI0MDczNjkxMTozMTE5MjcwODk3OTU5MTM2NDg4NTg2OTU1NTEzOTczOTY0OAZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 53375128,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+      attachments: [
+        {
+          id: 2053726,
+          message_id: 25281804,
+          file_type: 'image',
+          account_id: 1,
+          extension: null,
+          data_url:
+            'https://images.pexels.com/photos/2587370/pexels-photo-2587370.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
+          thumb_url:
+            'https://images.pexels.com/photos/2587370/pexels-photo-2587370.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
+          file_size: 376973,
+          width: 1179,
+          height: 2096,
+        },
+      ],
+    },
+    {
+      id: 25281804,
+      content: 'cwtestinglocal mentioned you in the story: ',
+      inbox_id: 27355,
+      conversation_id: 23731,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {
+        story_sender: 'cwtestinglocal',
+        story_id: '17889220763812855',
+        image_type: 'story_mention',
+      },
+      created_at: 1692765935,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMDk0OTEyODIyODExNDI0MDczNjkxMTozMTE5MjcwODk3OTU5MTM2NDg4NTg2OTU1NTEzOTczOTY0OAZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 53375128,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+      attachments: [
+        {
+          id: 2053726,
+          message_id: 25281804,
+          file_type: 'image',
+          account_id: 1,
+          extension: null,
+          data_url: 'https://chatwoot.dev/definitely-broken-image',
+          thumb_url: 'https://chatwoot.dev/definitely-broken-image',
+          file_size: 376973,
+          width: 1179,
+          height: 2096,
+        },
+      ],
+    },
     {
       id: 26433202,
       content: 'Hi, Jane here (testing)',
@@ -55,238 +200,6 @@ export default camelcaseKeys(
         thumbnail: 'https://xsgames.co/randomusers/assets/avatars/pixel/22.jpg',
       },
     },
-    {
-      id: 26433221,
-      content: 'Hi',
-      inbox_id: 27355,
-      conversation_id: 26942,
-      message_type: 0,
-      content_type: 'text',
-      status: 'sent',
-      content_attributes: {},
-      created_at: 1692765971,
-      private: false,
-      source_id:
-        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjAyMDYzMDMyMTgyMjA1MTgxMDYwOTM4OTg5NTY4MAZDZD',
-      sender: {
-        additional_attributes: {
-          social_profiles: {
-            instagram: 'cwtestinglocal',
-          },
-        },
-        custom_attributes: {},
-        email: null,
-        id: 70222869,
-        identifier: null,
-        name: 'Jane Doe',
-        phone_number: null,
-        thumbnail: '',
-        type: 'contact',
-      },
-    },
-    {
-      id: 26433223,
-      content: 'Hi',
-      inbox_id: 27355,
-      conversation_id: 26942,
-      message_type: 0,
-      content_type: 'text',
-      status: 'sent',
-      content_attributes: {},
-      created_at: 1692765973,
-      private: false,
-      source_id:
-        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjAyMDY1MDUzNTAwNzg5MTI3NDUxMzk1OTA5MjIyNAZDZD',
-      sender: {
-        additional_attributes: {
-          social_profiles: {
-            instagram: 'cwtestinglocal',
-          },
-        },
-        custom_attributes: {},
-        email: null,
-        id: 70222869,
-        identifier: null,
-        name: 'Jane Doe',
-        phone_number: null,
-        thumbnail: '',
-        type: 'contact',
-      },
-    },
-    {
-      id: 26433224,
-      content: 'Test',
-      inbox_id: 27355,
-      conversation_id: 26942,
-      message_type: 0,
-      content_type: 'text',
-      status: 'sent',
-      content_attributes: {},
-      created_at: 1692765975,
-      private: false,
-      source_id:
-        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjAyMDY3ODc5NTIzNTM0NDc1NjgwOTkzOTI4ODA2NAZDZD',
-      sender: {
-        additional_attributes: {
-          social_profiles: {
-            instagram: 'cwtestinglocal',
-          },
-        },
-        custom_attributes: {},
-        email: null,
-        id: 70222869,
-        identifier: null,
-        name: 'Jane Doe',
-        phone_number: null,
-        thumbnail: '',
-        type: 'contact',
-      },
-    },
-    {
-      id: 26433229,
-      content: 'One',
-      inbox_id: 27355,
-      conversation_id: 26942,
-      message_type: 0,
-      content_type: 'text',
-      status: 'sent',
-      content_attributes: {},
-      created_at: 1692765976,
-      private: false,
-      source_id:
-        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjAyMDcyOTA1Mzg2OTE4ODkyNDM5OTc2NTQyMjA4MAZDZD',
-      sender: {
-        additional_attributes: {
-          social_profiles: {
-            instagram: 'cwtestinglocal',
-          },
-        },
-        custom_attributes: {},
-        email: null,
-        id: 70222869,
-        identifier: null,
-        name: 'Jane Doe',
-        phone_number: null,
-        thumbnail: '',
-        type: 'contact',
-      },
-    },
-    {
-      id: 26433230,
-      content: 'Two',
-      inbox_id: 27355,
-      conversation_id: 26942,
-      message_type: 0,
-      content_type: 'text',
-      status: 'sent',
-      content_attributes: {},
-      created_at: 1692765978,
-      private: false,
-      source_id:
-        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjAyMDc3MDQ1NzU4NjI2MjM2NTQ4ODM2NzUzNDA4MAZDZD',
-      sender: {
-        additional_attributes: {
-          social_profiles: {
-            instagram: 'cwtestinglocal',
-          },
-        },
-        custom_attributes: {},
-        email: null,
-        id: 70222869,
-        identifier: null,
-        name: 'Jane Doe',
-        phone_number: null,
-        thumbnail: '',
-        type: 'contact',
-      },
-    },
-    {
-      id: 26433231,
-      content: 'Three',
-      inbox_id: 27355,
-      conversation_id: 26942,
-      message_type: 0,
-      content_type: 'text',
-      status: 'sent',
-      content_attributes: {},
-      created_at: 1692765979,
-      private: false,
-      source_id:
-        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjAyMDc4OTQ2MTQ0MDQ1Mzg0NTE0MjE1MTg4ODg5NgZDZD',
-      sender: {
-        additional_attributes: {
-          social_profiles: {
-            instagram: 'cwtestinglocal',
-          },
-        },
-        custom_attributes: {},
-        email: null,
-        id: 70222869,
-        identifier: null,
-        name: 'Jane Doe',
-        phone_number: null,
-        thumbnail: '',
-        type: 'contact',
-      },
-    },
-    {
-      id: 26433232,
-      content: 'Four',
-      inbox_id: 27355,
-      conversation_id: 26942,
-      message_type: 0,
-      content_type: 'text',
-      status: 'sent',
-      content_attributes: {},
-      created_at: 1692765981,
-      private: false,
-      source_id:
-        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjAyMDgxNTIxMDAzMzAyMTIyNzQ0MDQyMjI1NjY0MAZDZD',
-      sender: {
-        additional_attributes: {
-          social_profiles: {
-            instagram: 'cwtestinglocal',
-          },
-        },
-        custom_attributes: {},
-        email: null,
-        id: 70222869,
-        identifier: null,
-        name: 'Jane Doe',
-        phone_number: null,
-        thumbnail: '',
-        type: 'contact',
-      },
-    },
-    {
-      id: 26433234,
-      content: 'Five',
-      inbox_id: 27355,
-      conversation_id: 26942,
-      message_type: 0,
-      content_type: 'text',
-      status: 'sent',
-      content_attributes: {},
-      created_at: 1692765982,
-      private: false,
-      source_id:
-        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjAyMDgzOTc4MzYwNDg4NDYwMjU4NzY3Mzc4ODQxNgZDZD',
-      sender: {
-        additional_attributes: {
-          social_profiles: {
-            instagram: 'cwtestinglocal',
-          },
-        },
-        custom_attributes: {},
-        email: null,
-        id: 70222869,
-        identifier: null,
-        name: 'Jane Doe',
-        phone_number: null,
-        thumbnail: '',
-        type: 'contact',
-      },
-    },
     {
       id: 26433277,
       content: 'Conversation was marked resolved by Jane Doe',
@@ -502,8 +415,8 @@ export default camelcaseKeys(
         'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjEwNzM4NDA4NTgwMzUxNzY3OTYxNTM4MDI5MTU4NAZDZD',
       sender: {
         id: 10,
-        name: 'Sojan',
-        available_name: 'Sojan',
+        name: 'Jane',
+        available_name: 'Jane',
         avatar_url:
           'https://app.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBDZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4a2c0c8e787a381c0a809905e7cb172d5a40f589/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lKYW5CbFp3WTZCa1ZVT2hOeVpYTnBlbVZmZEc5ZlptbHNiRnNIYVFINk1BPT0iLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--533c3ad7218e24c4b0e8f8959dc1953ce1d279b9/73185.jpeg',
         type: 'user',