From 76efe3c5c395ad4ef0c8c2ac269d7561f93ad650 Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Thu, 6 Jun 2024 16:39:39 -0700
Subject: [PATCH] fix: Update the suspended page to show the chat bubble
 (#9604)

- This PR updates the implementation of chat bubble on suspended account.
---
 .../routes/dashboard/suspended/Index.vue      | 40 +++++++++++--------
 1 file changed, 23 insertions(+), 17 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/suspended/Index.vue b/app/javascript/dashboard/routes/dashboard/suspended/Index.vue
index 5691bb300..550a02a23 100644
--- a/app/javascript/dashboard/routes/dashboard/suspended/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/suspended/Index.vue
@@ -1,24 +1,30 @@
+<script setup>
+import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
+import { onMounted } from 'vue';
+
+const toggleSupportWidgetVisibility = () => {
+  if (window.$chatwoot) {
+    window.$chatwoot.toggleBubbleVisibility('show');
+  }
+};
+
+const setupListenerForWidgetEvent = () => {
+  window.addEventListener('chatwoot:on-message', () => {
+    toggleSupportWidgetVisibility();
+  });
+};
+
+onMounted(() => {
+  toggleSupportWidgetVisibility();
+  setupListenerForWidgetEvent();
+});
+</script>
+
 <template>
-  <div class="suspended-page">
+  <div class="items-center bg-slate-50 flex justify-center h-full w-full">
     <empty-state
       :title="$t('APP_GLOBAL.ACCOUNT_SUSPENDED.TITLE')"
       :message="$t('APP_GLOBAL.ACCOUNT_SUSPENDED.MESSAGE')"
     />
   </div>
 </template>
-<script>
-import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-export default {
-  components: { EmptyState },
-};
-</script>
-<style scoped>
-.suspended-page {
-  align-items: center;
-  background: var(--s-50);
-  display: flex;
-  justify-content: center;
-  height: 100%;
-  width: 100%;
-}
-</style>