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

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

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

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import { getCampaigns } from 'widget/api/campaign';
+import { getCampaigns, triggerCampaign } from 'widget/api/campaign';
 import campaignTimer from 'widget/helpers/campaignTimer';
 import {
   formatCampaigns,
@@ -11,6 +11,7 @@ const state = {
     isError: false,
     hasFetched: false,
   },
+  activeCampaign: {},
 };
 
 const resetCampaignTimers = (campaigns, currentURL) => {
@@ -26,6 +27,7 @@ const resetCampaignTimers = (campaigns, currentURL) => {
 export const getters = {
   getHasFetched: $state => $state.uiFlags.hasFetched,
   getCampaigns: $state => $state.records,
+  getActiveCampaign: $state => $state.activeCampaign,
 };
 
 export const actions = {
@@ -41,7 +43,7 @@ export const actions = {
       commit('setHasFetched', true);
     }
   },
-  startCampaigns: async (
+  initCampaigns: async (
     { getters: { getCampaigns: campaigns }, dispatch },
     { currentURL, websiteToken }
   ) => {
@@ -51,12 +53,31 @@ export const actions = {
       resetCampaignTimers(campaigns, currentURL);
     }
   },
+  startCampaign: async (
+    { getters: { getCampaigns: campaigns }, commit },
+    { campaignId }
+  ) => {
+    const campaign = campaigns.find(item => item.id === campaignId);
+    commit('setActiveCampaign', campaign);
+  },
+
+  executeCampaign: async ({ commit }, { campaignId, websiteToken }) => {
+    try {
+      await triggerCampaign({ campaignId, websiteToken });
+      commit('setActiveCampaign', {});
+    } catch (error) {
+      commit('setError', true);
+    }
+  },
 };
 
 export const mutations = {
   setCampaigns($state, data) {
     Vue.set($state, 'records', data);
   },
+  setActiveCampaign($state, data) {
+    Vue.set($state, 'activeCampaign', data);
+  },
   setError($state, value) {
     Vue.set($state.uiFlags, 'isError', value);
   },

app/javascript/widget/store/modules/conversation/getters.js

@@ -27,6 +27,9 @@ export const getters = {
     }));
   },
   getIsFetchingList: _state => _state.uiFlags.isFetchingList,
+  getMessageCount: _state => {
+    return Object.values(_state.conversations).length;
+  },
   getUnreadMessageCount: _state => {
     const { userLastSeenAt } = _state.meta;
     const count = Object.values(_state.conversations).filter(chat => {

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

@@ -39,14 +39,14 @@ describe('#actions', () => {
     });
   });
 
-  describe('#startCampaigns', () => {
+  describe('#initCampaigns', () => {
     const actionParams = {
       websiteToken: 'XDsafmADasd',
       currentURL: 'https://chatwoot.com',
     };
 
     it('sends correct actions if campaigns are empty', async () => {
-      await actions.startCampaigns(
+      await actions.initCampaigns(
         { dispatch, getters: { getCampaigns: [] } },
         actionParams
       );
@@ -54,7 +54,7 @@ describe('#actions', () => {
       expect(campaignTimer.initTimers).not.toHaveBeenCalled();
     });
     it('resets time if campaigns are available', async () => {
-      await actions.startCampaigns(
+      await actions.initCampaigns(
         { dispatch, getters: { getCampaigns: campaigns } },
         actionParams
       );
@@ -64,4 +64,34 @@ describe('#actions', () => {
       });
     });
   });
+  describe('#startCampaign', () => {
+    it('reset campaign if campaign id is not present in the campaign list', async () => {
+      await actions.startCampaign(
+        { dispatch, getters: { getCampaigns: campaigns }, commit },
+        { campaignId: 32 }
+      );
+      expect(commit.mock.calls).toEqual([['setActiveCampaign', undefined]]);
+    });
+    it('start campaign if campaign id passed', async () => {
+      await actions.startCampaign(
+        { dispatch, getters: { getCampaigns: campaigns }, commit },
+        { campaignId: 1 }
+      );
+      expect(commit.mock.calls).toEqual([['setActiveCampaign', campaigns[0]]]);
+    });
+  });
+  describe('#executeCampaign', () => {
+    it('sends correct actions if  execute campaign API is success', async () => {
+      const params = { campaignId: 12, websiteToken: 'XDsafmADasd' };
+      API.post.mockResolvedValue({});
+      await actions.executeCampaign({ commit }, params);
+      expect(commit.mock.calls).toEqual([['setActiveCampaign', {}]]);
+    });
+    it('sends correct actions if  execute campaign API is failed', async () => {
+      const params = { campaignId: 12, websiteToken: 'XDsafmADasd' };
+      API.post.mockRejectedValue({ message: 'Authentication required' });
+      await actions.executeCampaign({ commit }, params);
+      expect(commit.mock.calls).toEqual([['setError', true]]);
+    });
+  });
 });

app/javascript/widget/store/modules/specs/campaign/getters.spec.js

@@ -1,5 +1,6 @@
 import { getters } from '../../campaign';
 import { campaigns } from './data';
+jest.mock('widget/store/index.js');
 
 describe('#getters', () => {
   it('getCampaigns', () => {
@@ -93,4 +94,39 @@ describe('#getters', () => {
       },
     ]);
   });
+
+  it('getActiveCampaign', () => {
+    const state = {
+      records: campaigns[0],
+    };
+    expect(getters.getCampaigns(state)).toEqual({
+      id: 1,
+      title: 'Welcome',
+      description: null,
+      account_id: 1,
+      inbox: {
+        id: 37,
+        channel_id: 1,
+        name: 'Chatwoot',
+        channel_type: 'Channel::WebWidget',
+      },
+      sender: {
+        account_id: 1,
+        availability_status: 'offline',
+        confirmed: true,
+        email: 'sojan@chatwoot.com',
+        available_name: 'Sojan',
+        id: 10,
+        name: 'Sojan',
+      },
+      message: 'Hey, What brings you today',
+      enabled: true,
+      trigger_rules: {
+        url: 'https://github.com',
+        time_on_page: 10,
+      },
+      created_at: '2021-05-03T04:53:36.354Z',
+      updated_at: '2021-05-03T04:53:36.354Z',
+    });
+  });
 });

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

@@ -1,6 +1,6 @@
 import { mutations } from '../../campaign';
 import { campaigns } from './data';
-
+jest.mock('widget/store/index.js');
 describe('#mutations', () => {
   describe('#setCampaigns', () => {
     it('set campaign records', () => {
@@ -25,4 +25,12 @@ describe('#mutations', () => {
       expect(state.uiFlags.hasFetched).toEqual(true);
     });
   });
+
+  describe('#setActiveCampaign', () => {
+    it('set active campaign', () => {
+      const state = { records: [] };
+      mutations.setActiveCampaign(state, campaigns[0]);
+      expect(state.activeCampaign).toEqual(campaigns[0]);
+    });
+  });
 });

app/javascript/widget/store/modules/specs/conversation/getters.spec.js

@@ -434,4 +434,15 @@ describe('#getters', () => {
       ]);
     });
   });
+
+  it('getMessageCount', () => {
+    const state = {
+      conversations: {
+        1: {
+          content: 'hey, how are you?',
+        },
+      },
+    };
+    expect(getters.getMessageCount(state)).toEqual(1);
+  });
 });