From 685cf5681961ac4f5637e9b25f723b5ef4ef630e Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Thu, 5 Dec 2024 17:37:50 +0530 Subject: [PATCH] feat: add support for unsupported --- .../components-next/message/Message.vue | 7 ++++ .../components-next/message/bubbles/Base.vue | 2 ++ .../message/bubbles/Unsupported.vue | 9 ++++++ .../components-next/message/constants.js | 1 + .../message/fixtures/instagramConversation.js | 32 +++++++++++++++++++ .../i18n/locale/en/conversation.json | 2 +- 6 files changed, 52 insertions(+), 1 deletion(-) create mode 100644 app/javascript/dashboard/components-next/message/bubbles/Unsupported.vue 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 @@ + + + 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",