feat: Add the SDK method to programatically toggle live chat bubble (#4223)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/widget/App.vue

@@ -38,6 +38,9 @@ import {
   ON_CAMPAIGN_MESSAGE_CLICK,
   ON_UNREAD_MESSAGE_CLICK,
 } from './constants/widgetBusEvents';
+
+import { SDK_SET_BUBBLE_VISIBILITY } from '../shared/constants/sharedFrameEvents';
+
 export default {
   name: 'App',
   components: {
@@ -103,6 +106,7 @@ export default {
       'setAppConfig',
       'setReferrerHost',
       'setWidgetColor',
+      'setBubbleVisibility',
     ]),
     ...mapActions('conversation', ['fetchOldConversations', 'setUserLastSeen']),
     ...mapActions('campaign', [
@@ -285,6 +289,8 @@ export default {
           if (!message.isOpen) {
             this.resetCampaign();
           }
+        } else if (message.event === SDK_SET_BUBBLE_VISIBILITY) {
+          this.setBubbleVisibility(message.hideMessageBubble);
         }
       });
     },

app/javascript/widget/store/modules/appConfig.js

@@ -1,4 +1,5 @@
 import {
+  SET_BUBBLE_VISIBILITY,
   SET_REFERRER_HOST,
   SET_WIDGET_APP_CONFIG,
   SET_WIDGET_COLOR,
@@ -57,6 +58,9 @@ export const actions = {
   setReferrerHost({ commit }, referrerHost) {
     commit(SET_REFERRER_HOST, referrerHost);
   },
+  setBubbleVisibility({ commit }, hideMessageBubble) {
+    commit(SET_BUBBLE_VISIBILITY, hideMessageBubble);
+  },
 };
 
 export const mutations = {
@@ -76,6 +80,9 @@ export const mutations = {
   [SET_REFERRER_HOST]($state, referrerHost) {
     $state.referrerHost = referrerHost;
   },
+  [SET_BUBBLE_VISIBILITY]($state, hideMessageBubble) {
+    $state.hideMessageBubble = hideMessageBubble;
+  },
 };
 
 export default {

app/javascript/widget/store/modules/specs/appConfig/actions.spec.js

@@ -11,6 +11,13 @@ describe('#actions', () => {
     });
   });
 
+  describe('#setBubbleVisibility', () => {
+    it('creates actions properly', () => {
+      actions.setBubbleVisibility({ commit }, false);
+      expect(commit.mock.calls).toEqual([['SET_BUBBLE_VISIBILITY', false]]);
+    });
+  });
+
   describe('#setWidgetColor', () => {
     it('creates actions properly', () => {
       actions.setWidgetColor({ commit }, '#eaeaea');

app/javascript/widget/store/modules/specs/appConfig/mutations.spec.js

@@ -9,6 +9,14 @@ describe('#mutations', () => {
     });
   });
 
+  describe('#SET_BUBBLE_VISIBILITY', () => {
+    it('sets bubble visibility properly', () => {
+      const state = { hideMessageBubble: false };
+      mutations.SET_BUBBLE_VISIBILITY(state, true);
+      expect(state.hideMessageBubble).toEqual(true);
+    });
+  });
+
   describe('#SET_WIDGET_COLOR', () => {
     it('sets widget color properly', () => {
       const state = { widgetColor: '' };

app/javascript/widget/store/types.js

@@ -5,3 +5,4 @@ export const SET_WIDGET_COLOR = 'SET_WIDGET_COLOR';
 export const UPDATE_CONVERSATION_ATTRIBUTES = 'UPDATE_CONVERSATION_ATTRIBUTES';
 export const TOGGLE_WIDGET_OPEN = 'TOGGLE_WIDGET_OPEN';
 export const SET_REFERRER_HOST = 'SET_REFERRER_HOST';
+export const SET_BUBBLE_VISIBILITY = 'SET_BUBBLE_VISIBILITY';