From 8801a7b09afc41e99a16485fbd921de7caf6c199 Mon Sep 17 00:00:00 2001 From: Muhsin <12408980+muhsin-k@users.noreply.github.com> Date: Thu, 16 Jul 2026 15:53:28 +0400 Subject: [PATCH] feat(inboxes): show connection action indicators --- .../components-next/sidebar/ChannelLeaf.vue | 20 ++++++ .../components-next/sidebar/Sidebar.vue | 34 +++++++++ .../dashboard/i18n/locale/en/inboxMgmt.json | 4 +- .../dashboard/i18n/locale/en/settings.json | 1 + .../routes/dashboard/settings/inbox/Index.vue | 72 +++++++++++++++++-- 5 files changed, 124 insertions(+), 7 deletions(-) diff --git a/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue b/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue index a995cf510..67cefd115 100644 --- a/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue +++ b/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue @@ -22,11 +22,21 @@ const props = defineProps({ type: [Number, String], default: 0, }, + manualMigrationRecommended: { + type: Boolean, + default: false, + }, }); +const emit = defineEmits(['reviewManualMigration']); + const reauthorizationRequired = computed(() => { return props.inbox.reauthorization_required; }); + +const showManualMigrationRecommendation = computed(() => { + return props.manualMigrationRecommended && !reauthorizationRequired.value; +}); diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue index 294e0dd5d..d8ead60a1 100644 --- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue +++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue @@ -6,6 +6,8 @@ import { useKbd } from 'dashboard/composables/utils/useKbd'; import { useMapGetter } from 'dashboard/composables/store'; import { useStore } from 'vuex'; import { useI18n } from 'vue-i18n'; +import { useRouter } from 'vue-router'; +import { useAdmin } from 'dashboard/composables/useAdmin'; import { useSidebarKeyboardShortcuts } from './useSidebarKeyboardShortcuts'; import { vOnClickOutside } from '@vueuse/components'; import { FEATURE_FLAGS } from 'dashboard/featureFlags'; @@ -43,6 +45,8 @@ const emit = defineEmits([ ]); const { accountScopedRoute, isOnChatwootCloud } = useAccount(); +const { isAdmin } = useAdmin(); +const router = useRouter(); const store = useStore(); const searchShortcut = useKbd([`$mod`, 'k']); const { t } = useI18n(); @@ -92,6 +96,32 @@ const hasDataImport = computed(() => { ); }); +const hasWhatsAppManualTransfer = computed(() => { + return isFeatureEnabledonAccount.value( + accountId.value, + FEATURE_FLAGS.WHATSAPP_MANUAL_TRANSFER + ); +}); + +const isWhatsAppManualMigrationRecommended = inbox => { + return ( + isAdmin.value && + hasWhatsAppManualTransfer.value && + inbox.channel_type === 'Channel::Whatsapp' && + inbox.provider === 'whatsapp_cloud' && + inbox.provider_config?.source === 'embedded_signup' && + !inbox.reauthorization_required + ); +}; + +const reviewWhatsAppManualMigration = inboxId => { + router.push( + accountScopedRoute('settings_inbox_show', { + inboxId, + }) + ); +}; + const fetchConversationUnreadCounts = ([currentAccountId, isEnabled]) => { if (!currentAccountId) return; @@ -458,6 +488,10 @@ const menuItems = computed(() => { active: leafProps.active, inbox, badgeCount: leafProps.badgeCount, + manualMigrationRecommended: + isWhatsAppManualMigrationRecommended(inbox), + onReviewManualMigration: () => + reviewWhatsAppManualMigration(inbox.id), }), })), }, diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json index 07506c20f..c9f79b800 100644 --- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json +++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json @@ -11,7 +11,9 @@ "WHATSAPP_REGISTRATION_INCOMPLETE": "Your WhatsApp Business registration isn’t complete. Please check your display name status in Meta Business Manager before reconnecting.", "COMPLETE_REGISTRATION": "Complete Registration", "LIST": { - "404": "There are no inboxes attached to this account." + "404": "There are no inboxes attached to this account.", + "REAUTHORIZATION_REQUIRED": "Reauthorization required", + "MANUAL_SETUP_RECOMMENDED": "Manual setup recommended" }, "CREATE_FLOW": { "CHANNEL": { diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json index ceb0438b1..afa859eb2 100644 --- a/app/javascript/dashboard/i18n/locale/en/settings.json +++ b/app/javascript/dashboard/i18n/locale/en/settings.json @@ -380,6 +380,7 @@ "BETA": "Beta", "REPORTS_OVERVIEW": "Overview", "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages", + "WHATSAPP_MANUAL_MIGRATION": "Manual setup recommended. Reconnect this WhatsApp inbox with your own Meta app.", "HELP_CENTER": { "TITLE": "Help Center", "ARTICLES": "Articles", diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue index 0026cd8a9..fe9b0d568 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue @@ -15,6 +15,9 @@ import { import ChannelName from './components/ChannelName.vue'; import ChannelIcon from 'next/icon/ChannelIcon.vue'; import Button from 'dashboard/components-next/button/Button.vue'; +import Label from 'dashboard/components-next/label/Label.vue'; +import Icon from 'dashboard/components-next/icon/Icon.vue'; +import { FEATURE_FLAGS } from 'dashboard/featureFlags'; const getters = useStoreGetters(); const store = useStore(); @@ -26,6 +29,27 @@ const selectedInbox = ref({}); const searchQuery = ref(''); const inboxes = useMapGetter('inboxes/getInboxes'); +const accountId = useMapGetter('getCurrentAccountId'); +const isFeatureEnabledonAccount = useMapGetter( + 'accounts/isFeatureEnabledonAccount' +); + +const hasWhatsAppManualTransfer = computed(() => { + return isFeatureEnabledonAccount.value( + accountId.value, + FEATURE_FLAGS.WHATSAPP_MANUAL_TRANSFER + ); +}); + +const isWhatsAppManualMigrationRecommended = inbox => { + return ( + hasWhatsAppManualTransfer.value && + inbox.channel_type === 'Channel::Whatsapp' && + inbox.provider === 'whatsapp_cloud' && + inbox.provider_config?.source === 'embedded_signup' && + !inbox.reauthorization_required + ); +}; onActivated(() => { store.dispatch('inboxes/get'); @@ -146,12 +170,48 @@ const openDelete = inbox => { {{ inbox.name }} - +
+ + + + + + + +