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/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()) {
-        IFrameHelper.sendMessage({ event: 'toggleBubble' });
-      }
+      this.$emit('close');
     },
     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>