feat: Create campaign conversation only if user interacts with the bubble (#2335)

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

app/javascript/widget/App.vue

@@ -1,6 +1,7 @@
 <template>
   <router
     :show-unread-view="showUnreadView"
+    :show-campaign-view="showCampaignView"
     :is-mobile="isMobile"
     :has-fetched="hasFetched"
     :unread-message-count="unreadMessageCount"
@@ -17,6 +18,7 @@ import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
 import Router from './views/Router';
 import { getLocale } from './helpers/urlParamsHelper';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { isEmptyObject } from 'widget/helpers/utils';
 
 export default {
   name: 'App',
@@ -26,6 +28,7 @@ export default {
   data() {
     return {
       showUnreadView: false,
+      showCampaignView: false,
       isMobile: false,
       hideMessageBubble: false,
       widgetPosition: 'right',
@@ -35,8 +38,10 @@ export default {
   computed: {
     ...mapGetters({
       hasFetched: 'agent/getHasFetched',
+      messageCount: 'conversation/getMessageCount',
       unreadMessageCount: 'conversation/getUnreadMessageCount',
       campaigns: 'campaign/getCampaigns',
+      activeCampaign: 'campaign/getActiveCampaign',
     }),
     isLeftAligned() {
       const isLeft = this.widgetPosition === 'left';
@@ -49,6 +54,11 @@ export default {
       return RNHelper.isRNWebView();
     },
   },
+  watch: {
+    activeCampaign() {
+      this.setCampaignView();
+    },
+  },
   mounted() {
     const { websiteToken, locale } = window.chatwootWebChannel;
     this.setLocale(locale);
@@ -69,11 +79,12 @@ export default {
     this.$store.dispatch('conversationAttributes/get');
     this.setWidgetColor(window.chatwootWebChannel);
     this.registerUnreadEvents();
+    this.registerCampaignEvents();
   },
   methods: {
     ...mapActions('appConfig', ['setWidgetColor']),
     ...mapActions('conversation', ['fetchOldConversations', 'setUserLastSeen']),
-    ...mapActions('campaign', ['startCampaigns']),
+    ...mapActions('campaign', ['initCampaigns', 'executeCampaign']),
     ...mapActions('agent', ['fetchAvailableAgents']),
     scrollConversationToBottom() {
       const container = this.$el.querySelector('.conversation-wrap');
@@ -110,9 +121,30 @@ export default {
         this.setUserLastSeen();
       });
     },
+    registerCampaignEvents() {
+      bus.$on('on-campaign-view-clicked', campaignId => {
+        const { websiteToken } = window.chatwootWebChannel;
+        this.showCampaignView = false;
+        this.showUnreadView = false;
+        this.unsetUnreadView();
+        this.setUserLastSeen();
+        this.executeCampaign({ campaignId, websiteToken });
+      });
+    },
     setPopoutDisplay(showPopoutButton) {
       this.showPopoutButton = showPopoutButton;
     },
+    setCampaignView() {
+      const { messageCount, activeCampaign } = this;
+      const isCampaignReadyToExecute =
+        !isEmptyObject(activeCampaign) && !messageCount;
+      if (this.isIFrame && isCampaignReadyToExecute) {
+        this.showCampaignView = true;
+        IFrameHelper.sendMessage({
+          event: 'setCampaignMode',
+        });
+      }
+    },
     setUnreadView() {
       const { unreadMessageCount } = this;
       if (this.isIFrame && unreadMessageCount > 0) {
@@ -156,7 +188,7 @@ export default {
           this.scrollConversationToBottom();
         } else if (message.event === 'change-url') {
           const { referrerURL, referrerHost } = message;
-          this.startCampaigns({ currentURL: referrerURL, websiteToken });
+          this.initCampaigns({ currentURL: referrerURL, websiteToken });
           window.referrerURL = referrerURL;
           bus.$emit(BUS_EVENTS.SET_REFERRER_HOST, referrerHost);
         } else if (message.event === 'toggle-close-button') {
@@ -183,8 +215,10 @@ export default {
           this.setBubbleLabel();
         } else if (message.event === 'set-unread-view') {
           this.showUnreadView = true;
+          this.showCampaignView = false;
         } else if (message.event === 'unset-unread-view') {
           this.showUnreadView = false;
+          this.showCampaignView = false;
         }
       });
     },