From 9689bbf0dd674c5945ef7f067e861cd08145f5c2 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 11 Jun 2024 08:14:58 +0530
Subject: [PATCH] feat: Adds the ability to  disable the "new message
 notification" popup (#9594)

---
 app/javascript/packs/sdk.js                            |  1 +
 app/javascript/sdk/IFrameHelper.js                     |  1 +
 app/javascript/widget/App.vue                          | 10 ++++++++--
 app/javascript/widget/store/modules/appConfig.js       |  5 +++++
 .../store/modules/specs/appConfig/getters.spec.js      |  6 ++++++
 app/views/widget_tests/index.html.erb                  |  1 +
 6 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/app/javascript/packs/sdk.js b/app/javascript/packs/sdk.js
index 84cf5fe2d..0aac9104e 100755
--- a/app/javascript/packs/sdk.js
+++ b/app/javascript/packs/sdk.js
@@ -62,6 +62,7 @@ const runSDK = ({ baseUrl, websiteToken }) => {
     type: getBubbleView(chatwootSettings.type),
     launcherTitle: chatwootSettings.launcherTitle || '',
     showPopoutButton: chatwootSettings.showPopoutButton || false,
+    showUnreadMessagesDialog: chatwootSettings.showUnreadMessagesDialog ?? true,
     widgetStyle: getWidgetStyle(chatwootSettings.widgetStyle) || 'standard',
     resetTriggered: false,
     darkMode: getDarkMode(chatwootSettings.darkMode),
diff --git a/app/javascript/sdk/IFrameHelper.js b/app/javascript/sdk/IFrameHelper.js
index 3687fa311..275d082f5 100644
--- a/app/javascript/sdk/IFrameHelper.js
+++ b/app/javascript/sdk/IFrameHelper.js
@@ -160,6 +160,7 @@ export const IFrameHelper = {
         showPopoutButton: window.$chatwoot.showPopoutButton,
         widgetStyle: window.$chatwoot.widgetStyle,
         darkMode: window.$chatwoot.darkMode,
+        showUnreadMessagesDialog: window.$chatwoot.showUnreadMessagesDialog,
         campaignsSnoozedTill,
       });
       IFrameHelper.onLoad({
diff --git a/app/javascript/widget/App.vue b/app/javascript/widget/App.vue
index ddfcc8ecb..072323d53 100755
--- a/app/javascript/widget/App.vue
+++ b/app/javascript/widget/App.vue
@@ -71,6 +71,7 @@ export default {
       messageCount: 'conversation/getMessageCount',
       unreadMessageCount: 'conversation/getUnreadMessageCount',
       isWidgetStyleFlat: 'appConfig/isWidgetStyleFlat',
+      showUnreadMessagesDialog: 'appConfig/getShowUnreadMessagesDialog',
     }),
     isIFrame() {
       return IFrameHelper.isIFrame();
@@ -209,8 +210,13 @@ export default {
     },
     setUnreadView() {
       const { unreadMessageCount } = this;
-
-      if (this.isIFrame && unreadMessageCount > 0 && !this.isWidgetOpen) {
+      if (!this.showUnreadMessagesDialog) {
+        this.handleUnreadNotificationDot();
+      } else if (
+        this.isIFrame &&
+        unreadMessageCount > 0 &&
+        !this.isWidgetOpen
+      ) {
         this.replaceRoute('unread-messages').then(() => {
           this.setIframeHeight(true);
           IFrameHelper.sendMessage({ event: 'setUnreadMode' });
diff --git a/app/javascript/widget/store/modules/appConfig.js b/app/javascript/widget/store/modules/appConfig.js
index b1b67f0dc..a7df60d29 100644
--- a/app/javascript/widget/store/modules/appConfig.js
+++ b/app/javascript/widget/store/modules/appConfig.js
@@ -10,6 +10,7 @@ import {
 const state = {
   hideMessageBubble: false,
   isCampaignViewClicked: false,
+  showUnreadMessagesDialog: true,
   isWebWidgetTriggered: false,
   isWidgetOpen: false,
   position: 'right',
@@ -29,6 +30,7 @@ export const getters = {
   getReferrerHost: $state => $state.referrerHost,
   isWidgetStyleFlat: $state => $state.widgetStyle === 'flat',
   darkMode: $state => $state.darkMode,
+  getShowUnreadMessagesDialog: $state => $state.showUnreadMessagesDialog,
 };
 
 export const actions = {
@@ -38,6 +40,7 @@ export const actions = {
       showPopoutButton,
       position,
       hideMessageBubble,
+      showUnreadMessagesDialog,
       widgetStyle = 'rounded',
       darkMode = 'light',
     }
@@ -46,6 +49,7 @@ export const actions = {
       hideMessageBubble: !!hideMessageBubble,
       position: position || 'right',
       showPopoutButton: !!showPopoutButton,
+      showUnreadMessagesDialog: !!showUnreadMessagesDialog,
       widgetStyle,
       darkMode,
     });
@@ -75,6 +79,7 @@ export const mutations = {
     $state.widgetStyle = data.widgetStyle;
     $state.darkMode = data.darkMode;
     $state.locale = data.locale || $state.locale;
+    $state.showUnreadMessagesDialog = data.showUnreadMessagesDialog;
   },
   [TOGGLE_WIDGET_OPEN]($state, isWidgetOpen) {
     $state.isWidgetOpen = isWidgetOpen;
diff --git a/app/javascript/widget/store/modules/specs/appConfig/getters.spec.js b/app/javascript/widget/store/modules/specs/appConfig/getters.spec.js
index 045933aa8..ab0c6e6ca 100644
--- a/app/javascript/widget/store/modules/specs/appConfig/getters.spec.js
+++ b/app/javascript/widget/store/modules/specs/appConfig/getters.spec.js
@@ -13,4 +13,10 @@ describe('#getters', () => {
       expect(getters.getReferrerHost(state)).toEqual('www.chatwoot.com');
     });
   });
+  describe('#getShowUnreadMessagesDialog', () => {
+    it('returns correct value', () => {
+      const state = { showUnreadMessagesDialog: true };
+      expect(getters.getShowUnreadMessagesDialog(state)).toEqual(true);
+    });
+  });
 });
diff --git a/app/views/widget_tests/index.html.erb b/app/views/widget_tests/index.html.erb
index 42e7583fb..cfc084384 100644
--- a/app/views/widget_tests/index.html.erb
+++ b/app/views/widget_tests/index.html.erb
@@ -14,6 +14,7 @@
 
 window.chatwootSettings = {
   hideMessageBubble: false,
+  // showUnreadMessagesDialog: false,
   // baseDomain: '.loca.lt',
   position: '<%= @widget_position %>',
   locale: 'en',