diff --git a/app/javascript/dashboard/components-next/message/Message.vue b/app/javascript/dashboard/components-next/message/Message.vue
index 75219bfd7..d9f38d699 100644
--- a/app/javascript/dashboard/components-next/message/Message.vue
+++ b/app/javascript/dashboard/components-next/message/Message.vue
@@ -22,6 +22,7 @@ import InstagramStoryBubble from './bubbles/InstagramStory.vue';
import AttachmentsBubble from './bubbles/Attachments.vue';
import EmailBubble from './bubbles/Email/Index.vue';
import LocationBubble from './bubbles/Location.vue';
+import UnsupportedBubble from './bubbles/Unsupported.vue';
import MessageError from './MessageError.vue';
import MessageMeta from './MessageMeta.vue';
@@ -150,6 +151,8 @@ const variant = computed(() => {
}
}
if (props.status === MESSAGE_STATUS.FAILED) return MESSAGE_VARIANTS.ERROR;
+ if (props.contentAttributes.isUnsupported)
+ return MESSAGE_VARIANTS.UNSUPPORTED;
const variants = {
[MESSAGE_TYPES.INCOMING]: MESSAGE_VARIANTS.USER,
@@ -240,6 +243,10 @@ const componentToRender = computed(() => {
if (emailInboxTypes.includes(props.messageType)) return EmailBubble;
}
+ if (props.contentAttributes.isUnsupported) {
+ return UnsupportedBubble;
+ }
+
if (props.contentAttributes.imageType === 'story_mention') {
return InstagramStoryBubble;
}
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Base.vue b/app/javascript/dashboard/components-next/message/bubbles/Base.vue
index e5bd64c5d..ee8faf71d 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Base.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Base.vue
@@ -20,6 +20,8 @@ const varaintBaseMap = {
[MESSAGE_VARIANTS.TEMPLATE]: 'bg-n-solid-iris text-n-slate-12',
[MESSAGE_VARIANTS.ERROR]: 'bg-n-ruby-4 text-n-ruby-12',
[MESSAGE_VARIANTS.EMAIL]: 'bg-n-alpha-2 w-full',
+ [MESSAGE_VARIANTS.UNSUPPORTED]:
+ 'bg-n-solid-amber/70 border border-dashed border-n-amber-12 text-n-amber-12',
};
const orientationMap = {
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Unsupported.vue b/app/javascript/dashboard/components-next/message/bubbles/Unsupported.vue
new file mode 100644
index 000000000..775703587
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Unsupported.vue
@@ -0,0 +1,9 @@
+
+
+
+
+ {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE') }}
+
+
diff --git a/app/javascript/dashboard/components-next/message/constants.js b/app/javascript/dashboard/components-next/message/constants.js
index bd0a879c3..5868fb5f5 100644
--- a/app/javascript/dashboard/components-next/message/constants.js
+++ b/app/javascript/dashboard/components-next/message/constants.js
@@ -14,6 +14,7 @@ export const MESSAGE_VARIANTS = {
ERROR: 'error',
TEMPLATE: 'template',
EMAIL: 'email',
+ UNSUPPORTED: 'unsupported',
};
export const SENDER_TYPES = {
diff --git a/app/javascript/dashboard/components-next/message/fixtures/instagramConversation.js b/app/javascript/dashboard/components-next/message/fixtures/instagramConversation.js
index 10ef125a6..2fbbf11d5 100644
--- a/app/javascript/dashboard/components-next/message/fixtures/instagramConversation.js
+++ b/app/javascript/dashboard/components-next/message/fixtures/instagramConversation.js
@@ -1059,6 +1059,38 @@ export default camelcaseKeys(
type: 'contact',
},
},
+ {
+ id: 89129832,
+ content: null,
+ inbox_id: 27355,
+ conversation_id: 26942,
+ message_type: 0,
+ content_type: 'text',
+ status: 'sent',
+ content_attributes: {
+ in_reply_to_external_id: null,
+ is_unsupported: true,
+ },
+ created_at: 1733399171,
+ private: false,
+ source_id:
+ 'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTk3NTU3MDg2NDAzNzQ0ODY5NjA0NDc2MzA5MjA5MDg4MAZDZD',
+ sender: {
+ additional_attributes: {
+ social_profiles: {
+ instagram: 'cwtestinglocal',
+ },
+ },
+ custom_attributes: {},
+ email: null,
+ id: 70222869,
+ identifier: null,
+ name: 'Jane Doe',
+ phone_number: null,
+ thumbnail: '',
+ type: 'contact',
+ },
+ },
],
{ deep: true }
);
diff --git a/app/javascript/dashboard/i18n/locale/en/conversation.json b/app/javascript/dashboard/i18n/locale/en/conversation.json
index 485f50796..32e995379 100644
--- a/app/javascript/dashboard/i18n/locale/en/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/en/conversation.json
@@ -41,7 +41,7 @@
"SAVE_CONTACT": "Save",
"UPLOADING_ATTACHMENTS": "Uploading attachments...",
"REPLIED_TO_STORY": "Replied to your story",
- "UNSUPPORTED_MESSAGE": "This message is unsupported.",
+ "UNSUPPORTED_MESSAGE": "This message is unsupported. You can view this message on the Facebook / Instagram app.",
"UNSUPPORTED_MESSAGE_FACEBOOK": "This message is unsupported. You can view this message on the Facebook Messenger app.",
"UNSUPPORTED_MESSAGE_INSTAGRAM": "This message is unsupported. You can view this message on the Instagram app.",
"SUCCESS_DELETE_MESSAGE": "Message deleted successfully",