feat: Add warnings for existing instagram messenger channels (#11303)

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

@@ -36,6 +36,7 @@ import { REPLY_POLICY } from 'shared/constants/links';
 import wootConstants from 'dashboard/constants/globals';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { FEATURE_FLAGS } from '../../../featureFlags';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
 
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
@@ -209,6 +210,17 @@ export default {
       return contactLastSeenAt;
     },
 
+    // Check there is a facebook inbox with the same instagram_id
+    hasDuplicateInstagramInbox() {
+      const instagramId = this.inbox.instagram_id;
+      const facebookInbox =
+        this.$store.getters['inboxes/getFacebookInboxByInstagramId'](
+          instagramId
+        );
+
+      return this.inbox.channel_type === INBOX_TYPES.FB && facebookInbox;
+    },
+
     replyWindowBannerMessage() {
       if (this.isAWhatsAppChannel) {
         return this.$t('CONVERSATION.TWILIO_WHATSAPP_CAN_REPLY');
@@ -503,6 +515,12 @@ export default {
       :href-link="replyWindowLink"
       :href-link-text="replyWindowLinkText"
     />
+    <Banner
+      v-else-if="hasDuplicateInstagramInbox"
+      color-scheme="alert"
+      class="mx-2 mt-2 overflow-hidden rounded-lg"
+      :banner-message="$t('CONVERSATION.OLD_INSTAGRAM_INBOX_REPLY_BANNER')"
+    />
     <div class="flex justify-end">
       <NextButton
         faded

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -37,6 +37,7 @@
     "ASSIGN_TO_ME": "Assign to me",
     "TWILIO_WHATSAPP_CAN_REPLY": "You can only reply to this conversation using a template message due to",
     "TWILIO_WHATSAPP_24_HOURS_WINDOW": "24 hour message window restriction",
+    "OLD_INSTAGRAM_INBOX_REPLY_BANNER": "This Instagram account was migrated to the new Instagram channel inbox. All new messages will show up there. You won’t be able to send messages from this conversation anymore.",
     "REPLYING_TO": "You are replying to:",
     "REMOVE_SELECTION": "Remove Selection",
     "DOWNLOAD": "Download",

app/javascript/dashboard/i18n/locale/en/inboxMgmt.json

@@ -51,7 +51,9 @@
         "CONNECT_YOUR_INSTAGRAM_PROFILE": "Connect your Instagram Profile",
         "HELP": "To add your Instagram profile as a channel, you need to authenticate your Instagram Profile by clicking on 'Continue with Instagram' ",
         "ERROR_MESSAGE": "There was an error connecting to Instagram, please try again",
-        "ERROR_AUTH": "There was an error connecting to Instagram, please try again"
+        "ERROR_AUTH": "There was an error connecting to Instagram, please try again",
+        "NEW_INBOX_SUGGESTION": "This Instagram account was previously linked to a different inbox and has now been migrated here. All new messages will appear here. The old inbox will no longer be able to send or receive messages for this account.",
+        "DUPLICATE_INBOX_BANNER": "This Instagram account was migrated to the new Instagram channel inbox. You won’t be able to send/receive Instagram messages from this inbox anymore."
       },
       "TWITTER": {
         "HELP": "To add your Twitter profile as a channel, you need to authenticate your Twitter Profile by clicking on 'Sign in with Twitter' ",

app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue

@@ -1,11 +1,13 @@
 <script>
 import EmptyState from '../../../../components/widgets/EmptyState.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
-
+import DuplicateInboxBanner from './channels/instagram/DuplicateInboxBanner.vue';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
 export default {
   components: {
     EmptyState,
     NextButton,
+    DuplicateInboxBanner,
   },
   computed: {
     currentInbox() {
@@ -16,6 +18,20 @@ export default {
     isATwilioInbox() {
       return this.currentInbox.channel_type === 'Channel::TwilioSms';
     },
+    // Check if a facebook inbox that has the same instagram_id
+    hasDuplicateInstagramInbox() {
+      const instagramId = this.currentInbox.instagram_id;
+      const facebookInbox =
+        this.$store.getters['inboxes/getFacebookInboxByInstagramId'](
+          instagramId
+        );
+
+      return (
+        this.currentInbox.channel_type === INBOX_TYPES.INSTAGRAM &&
+        facebookInbox
+      );
+    },
+
     isAEmailInbox() {
       return this.currentInbox.channel_type === 'Channel::Email';
     },
@@ -72,8 +88,12 @@ export default {
 
 <template>
   <div
-    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
+    class="w-full h-full col-span-6 p-6 overflow-auto border border-b-0 rounded-t-lg border-n-weak bg-n-solid-1"
   >
+    <DuplicateInboxBanner
+      v-if="hasDuplicateInstagramInbox"
+      :content="$t('INBOX_MGMT.ADD.INSTAGRAM.NEW_INBOX_SUGGESTION')"
+    />
     <EmptyState
       :title="$t('INBOX_MGMT.FINISH.TITLE')"
       :message="message"

app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -8,6 +8,7 @@ import SettingsSection from '../../../../components/SettingsSection.vue';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import FacebookReauthorize from './facebook/Reauthorize.vue';
 import InstagramReauthorize from './channels/instagram/Reauthorize.vue';
+import DuplicateInboxBanner from './channels/instagram/DuplicateInboxBanner.vue';
 import MicrosoftReauthorize from './channels/microsoft/Reauthorize.vue';
 import GoogleReauthorize from './channels/google/Reauthorize.vue';
 import PreChatFormSettings from './PreChatForm/Settings.vue';
@@ -20,6 +21,7 @@ import BotConfiguration from './components/BotConfiguration.vue';
 import { FEATURE_FLAGS } from '../../../../featureFlags';
 import SenderNameExamplePreview from './components/SenderNameExamplePreview.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
 
 export default {
   components: {
@@ -38,6 +40,7 @@ export default {
     GoogleReauthorize,
     NextButton,
     InstagramReauthorize,
+    DuplicateInboxBanner,
   },
   mixins: [inboxMixin],
   setup() {
@@ -207,6 +210,16 @@ export default {
     instagramUnauthorized() {
       return this.isAInstagramChannel && this.inbox.reauthorization_required;
     },
+    // Check if a facebook inbox that has the same instagram_id
+    hasDuplicateInstagramInbox() {
+      const instagramId = this.inbox.instagram_id;
+      const facebookInbox =
+        this.$store.getters['inboxes/getFacebookInboxByInstagramId'](
+          instagramId
+        );
+
+      return this.inbox.channel_type === INBOX_TYPES.FB && facebookInbox;
+    },
     microsoftUnauthorized() {
       return this.isAMicrosoftInbox && this.inbox.reauthorization_required;
     },
@@ -393,6 +406,11 @@ export default {
       <FacebookReauthorize v-if="facebookUnauthorized" :inbox="inbox" />
       <GoogleReauthorize v-if="googleUnauthorized" :inbox="inbox" />
       <InstagramReauthorize v-if="instagramUnauthorized" :inbox="inbox" />
+      <DuplicateInboxBanner
+        v-if="hasDuplicateInstagramInbox"
+        :content="$t('INBOX_MGMT.ADD.INSTAGRAM.DUPLICATE_INBOX_BANNER')"
+        class="mx-8 mt-5"
+      />
       <div v-if="selectedTabKey === 'inbox_settings'" class="mx-8">
         <SettingsSection
           :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_TITLE')"

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/instagram/DuplicateInboxBanner.vue

@@ -0,0 +1,16 @@
+<script setup>
+import Banner from 'dashboard/components-next/banner/Banner.vue';
+
+defineProps({
+  content: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <Banner color="ruby">
+    {{ content }}
+  </Banner>
+</template>

app/javascript/dashboard/store/modules/inboxes.js

@@ -122,6 +122,13 @@ export const getters = {
       item => item.channel_type !== INBOX_TYPES.EMAIL
     );
   },
+  getFacebookInboxByInstagramId: $state => instagramId => {
+    return $state.records.find(
+      item =>
+        item.instagram_id === instagramId &&
+        item.channel_type === INBOX_TYPES.FB
+    );
+  },
 };
 
 const sendAnalyticsEvent = channelType => {

app/javascript/dashboard/store/modules/specs/inboxes/fixtures.js

@@ -9,6 +9,7 @@ export default [
     widget_color: null,
     website_token: null,
     enable_auto_assignment: true,
+    instagram_id: 123456789,
   },
   {
     id: 2,

app/javascript/dashboard/store/modules/specs/inboxes/getters.spec.js

@@ -43,6 +43,7 @@ describe('#getters', () => {
       widget_color: null,
       website_token: null,
       enable_auto_assignment: true,
+      instagram_id: 123456789,
     });
   });
 
@@ -64,4 +65,20 @@ describe('#getters', () => {
       isDeleting: false,
     });
   });
+
+  it('getFacebookInboxByInstagramId', () => {
+    const state = { records: inboxList };
+    expect(getters.getFacebookInboxByInstagramId(state)(123456789)).toEqual({
+      id: 1,
+      channel_id: 1,
+      name: 'Test FacebookPage 1',
+      channel_type: 'Channel::FacebookPage',
+      avatar_url: 'random_image.png',
+      page_id: '12345',
+      widget_color: null,
+      website_token: null,
+      enable_auto_assignment: true,
+      instagram_id: 123456789,
+    });
+  });
 });

app/views/api/v1/models/_inbox.json.jbuilder

@@ -56,6 +56,7 @@ end
 
 ## Instagram Attributes
 json.reauthorization_required resource.channel.try(:reauthorization_required?) if resource.instagram?
+json.instagram_id resource.channel.try(:instagram_id) if resource.instagram?
 
 ## Twilio Attributes
 json.messaging_service_sid resource.channel.try(:messaging_service_sid)