From 1a679da3291feb8d8e2592e3e7bc1ebc38c8af25 Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Thu, 9 Jul 2026 17:45:57 +0530
Subject: [PATCH] chore: Clean up

---
 .../routes/dashboard/suspended/Index.vue      | 54 +++++++++++++------
 1 file changed, 39 insertions(+), 15 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/suspended/Index.vue b/app/javascript/dashboard/routes/dashboard/suspended/Index.vue
index 027f75ff5..9daf9be7c 100644
--- a/app/javascript/dashboard/routes/dashboard/suspended/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/suspended/Index.vue
@@ -1,29 +1,51 @@
 <script setup>
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
-import { onMounted } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
 
-const toggleSupportWidgetVisibility = () => {
-  if (window.$chatwoot) {
-    window.$chatwoot.toggleBubbleVisibility('show');
-  }
+const globalConfig = useMapGetter('globalConfig/get');
+
+// Hide the CTA entirely when the installation has no support inbox — the widget
+// SDK never loads there, so window.$chatwoot stays undefined and the button
+// would be a no-op.
+const canContactSupport = computed(() =>
+  Boolean(globalConfig.value.chatwootInboxToken)
+);
+
+// The widget SDK loads asynchronously. Until it signals `chatwoot:ready` it
+// can't be opened, and poking it early throws (its bubble DOM isn't mounted yet),
+// so keep the button disabled with a loader till then.
+const isWidgetReady = ref(Boolean(window.$chatwoot?.hasLoaded));
+
+const showSupportBubble = () => {
+  window.$chatwoot?.toggleBubbleVisibility('show');
 };
 
 const toggleSupportWidget = () => {
-  if (window.$chatwoot) {
-    window.$chatwoot.toggle();
-  }
+  window.$chatwoot?.toggle();
 };
 
-const setupListenerForWidgetEvent = () => {
-  window.addEventListener('chatwoot:on-message', () => {
-    toggleSupportWidgetVisibility();
-  });
+const onWidgetReady = () => {
+  isWidgetReady.value = true;
+  showSupportBubble();
 };
 
 onMounted(() => {
-  toggleSupportWidgetVisibility();
-  setupListenerForWidgetEvent();
+  // Reveal the support bubble once the widget is ready (immediately if it
+  // already loaded before this view mounted), and keep it revealed whenever a
+  // new support message comes in.
+  if (isWidgetReady.value) {
+    showSupportBubble();
+  } else {
+    window.addEventListener('chatwoot:ready', onWidgetReady);
+  }
+  window.addEventListener('chatwoot:on-message', showSupportBubble);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('chatwoot:ready', onWidgetReady);
+  window.removeEventListener('chatwoot:on-message', showSupportBubble);
 });
 </script>
 
@@ -33,10 +55,12 @@ onMounted(() => {
       :title="$t('APP_GLOBAL.ACCOUNT_SUSPENDED.TITLE')"
       :message="$t('APP_GLOBAL.ACCOUNT_SUSPENDED.MESSAGE')"
     >
-      <div class="flex justify-center">
+      <div v-if="canContactSupport" class="flex justify-center">
         <NextButton
           icon="i-lucide-life-buoy"
           :label="$t('SIDEBAR_ITEMS.CONTACT_SUPPORT')"
+          :is-loading="!isWidgetReady"
+          :disabled="!isWidgetReady"
           @click="toggleSupportWidget"
         />
       </div>