feat(inboxes): show connection action indicators

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;
+});
 </script>
 
 <template>
@@ -42,4 +52,14 @@ const reauthorizationRequired = computed(() => {
   >
     <Icon icon="i-woot-alert" class="size-3 text-n-ruby-9" />
   </div>
+  <button
+    v-else-if="showManualMigrationRecommendation"
+    v-tooltip.top-end="$t('SIDEBAR.WHATSAPP_MANUAL_MIGRATION')"
+    type="button"
+    :aria-label="$t('SIDEBAR.WHATSAPP_MANUAL_MIGRATION')"
+    class="grid place-content-center size-5 bg-n-blue-5/60 rounded-full hover:bg-n-blue-5 focus-visible:bg-n-blue-5 focus-visible:outline-none"
+    @click.stop.prevent="emit('reviewManualMigration')"
+  >
+    <Icon icon="i-lucide-info" class="size-3 text-n-blue-9" />
+  </button>
 </template>

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),
               }),
           })),
         },