feat: Hides dismissed campaigns while browsing [cw-33] (#6842)

* Chore: moves localstorage helper as a shared utility and refactors constants

* Refactors constants file

* feat: Hides dismissed campaigns while browsing

* Snoozes all campaigns for an hour after dismissing

* Fixes error with date parsing

* Snooze ongoing campaigns

* Review fixes

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/sdk/IFrameHelper.js

@@ -36,6 +36,7 @@ import {
 } from 'shared/helpers/AudioNotificationHelper';
 import { isFlatWidgetStyle } from './settingsHelper';
 import { popoutChatWindow } from '../widget/helpers/popoutHelper';
+import addHours from 'date-fns/addHours';
 
 const updateAuthCookie = cookieContent =>
   Cookies.set('cw_conversation', cookieContent, {
@@ -43,6 +44,14 @@ const updateAuthCookie = cookieContent =>
     sameSite: 'Lax',
   });
 
+const updateCampaignReadStatus = () => {
+  const expireBy = addHours(new Date(), 1);
+  Cookies.set('cw_snooze_campaigns_till', Number(expireBy), {
+    expires: expireBy,
+    sameSite: 'Lax',
+  });
+};
+
 export const IFrameHelper = {
   getUrl({ baseUrl, websiteToken }) {
     return `${baseUrl}/widget?website_token=${websiteToken}`;
@@ -147,6 +156,7 @@ export const IFrameHelper = {
     loaded: message => {
       updateAuthCookie(message.config.authToken);
       window.$chatwoot.hasLoaded = true;
+      const campaignsSnoozedTill = Cookies.get('cw_snooze_campaigns_till');
       IFrameHelper.sendMessage('config-set', {
         locale: window.$chatwoot.locale,
         position: window.$chatwoot.position,
@@ -154,6 +164,7 @@ export const IFrameHelper = {
         showPopoutButton: window.$chatwoot.showPopoutButton,
         widgetStyle: window.$chatwoot.widgetStyle,
         darkMode: window.$chatwoot.darkMode,
+        campaignsSnoozedTill,
       });
       IFrameHelper.onLoad({
         widgetColor: message.config.channelConfig.widgetColor,
@@ -192,6 +203,10 @@ export const IFrameHelper = {
       updateAuthCookie(widgetAuthToken);
     },
 
+    setCampaignReadOn() {
+      updateCampaignReadStatus();
+    },
+
     toggleBubble: state => {
       let bubbleState = {};
       if (state === 'open') {

app/javascript/widget/App.vue

@@ -22,6 +22,7 @@
 <script>
 import { mapGetters, mapActions } from 'vuex';
 import { setHeader } from 'widget/helpers/axios';
+import addHours from 'date-fns/addHours';
 import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
 import configMixin from './mixins/configMixin';
 import availabilityMixin from 'widget/mixins/availability';
@@ -50,6 +51,7 @@ export default {
   data() {
     return {
       isMobile: false,
+      campaignsSnoozedTill: undefined,
     };
   },
   computed: {
@@ -179,11 +181,19 @@ export default {
         this.executeCampaign({ campaignId, websiteToken, customAttributes });
         this.replaceRoute('messages');
       });
+      bus.$on('snooze-campaigns', () => {
+        const expireBy = addHours(new Date(), 1);
+        this.campaignsSnoozedTill = Number(expireBy);
+      });
     },
     setCampaignView() {
       const { messageCount, activeCampaign } = this;
+      const shouldSnoozeCampaign =
+        this.campaignsSnoozedTill && this.campaignsSnoozedTill > Date.now();
       const isCampaignReadyToExecute =
-        !isEmptyObject(activeCampaign) && !messageCount;
+        !isEmptyObject(activeCampaign) &&
+        !messageCount &&
+        !shouldSnoozeCampaign;
       if (this.isIFrame && isCampaignReadyToExecute) {
         this.replaceRoute('campaigns').then(() => {
           this.setIframeHeight(true);
@@ -243,6 +253,7 @@ export default {
           this.fetchAvailableAgents(websiteToken);
           this.setAppConfig(message);
           this.$store.dispatch('contacts/get');
+          this.setCampaignReadData(message.campaignsSnoozedTill);
         } else if (message.event === 'widget-visible') {
           this.scrollConversationToBottom();
         } else if (message.event === 'change-url') {
@@ -320,6 +331,11 @@ export default {
     sendRNWebViewLoadedEvent() {
       RNHelper.sendMessage(loadedEventConfig());
     },
+    setCampaignReadData(snoozedTill) {
+      if (snoozedTill) {
+        this.campaignsSnoozedTill = Number(snoozedTill);
+      }
+    },
   },
 };
 </script>

app/javascript/widget/components/UnreadMessageList.vue

@@ -45,7 +45,6 @@
 </template>
 
 <script>
-import { IFrameHelper } from 'widget/helpers/utils';
 import { mapGetters } from 'vuex';
 import configMixin from '../mixins/configMixin';
 import { ON_UNREAD_MESSAGE_CLICK } from '../constants/widgetBusEvents';
@@ -84,9 +83,7 @@ export default {
       bus.$emit(ON_UNREAD_MESSAGE_CLICK);
     },
     closeFullView() {
-      if (IFrameHelper.isIFrame()) {
+      this.$emit('close');
-        IFrameHelper.sendMessage({ event: 'toggleBubble' });
-      }
     },
     getMessageContent(message) {
       const { attachments, content } = message;

app/javascript/widget/views/Campaigns.vue

@@ -1,9 +1,10 @@
 <template>
-  <unread-message-list :messages="messages" />
+  <unread-message-list :messages="messages" @close="closeFullView" />
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
+import { IFrameHelper } from 'widget/helpers/utils';
 import UnreadMessageList from '../components/UnreadMessageList.vue';
 
 export default {
@@ -24,5 +25,16 @@ export default {
       ];
     },
   },
+  methods: {
+    closeFullView() {
+      if (IFrameHelper.isIFrame()) {
+        IFrameHelper.sendMessage({
+          event: 'setCampaignReadOn',
+        });
+        IFrameHelper.sendMessage({ event: 'toggleBubble' });
+        bus.$emit('snooze-campaigns');
+      }
+    },
+  },
 };
 </script>

app/javascript/widget/views/UnreadMessages.vue

@@ -1,9 +1,10 @@
 <template>
-  <unread-message-list :messages="messages" />
+  <unread-message-list :messages="messages" @close="closeFullView" />
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
+import { IFrameHelper } from 'widget/helpers/utils';
 import UnreadMessageList from '../components/UnreadMessageList.vue';
 
 export default {
@@ -16,5 +17,12 @@ export default {
       messages: 'conversation/getUnreadTextMessages',
     }),
   },
+  methods: {
+    closeFullView() {
+      if (IFrameHelper.isIFrame()) {
+        IFrameHelper.sendMessage({ event: 'toggleBubble' });
+      }
+    },
+  },
 };
 </script>