Enhancement: Show unread marker on widget bubble (#3390)

* add unread marker

* add removeClass in IFramehelper

* Update app/javascript/sdk/sdk.js

* Update app/javascript/sdk/sdk.js

Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>

app/javascript/sdk/IFrameHelper.js

@@ -3,6 +3,7 @@ import {
   wootOn,
   addClass,
   loadCSS,
+  removeClass,
   onLocationChangeListener,
 } from './DOMHelpers';
 import {
@@ -197,6 +198,18 @@ export const IFrameHelper = {
       removeUnreadClass();
     },
 
+    handleNotificationDot: event => {
+      const bubbleElement = document.querySelector('.woot-widget-bubble');
+      if (
+        event.unreadMessageCount > 0 &&
+        !bubbleElement.classList.contains('unread-notification')
+      ) {
+        addClass(bubbleElement, 'unread-notification');
+      } else if (event.unreadMessageCount === 0) {
+        removeClass(bubbleElement, 'unread-notification');
+      }
+    },
+
     closeChat: () => {
       onBubbleClick({ toggleValue: false });
     },

app/javascript/sdk/sdk.js

@@ -37,6 +37,19 @@ export const SDK_CSS = `.woot-widget-holder {
   user-select: none;
 }
 
+.woot-widget-bubble.unread-notification::after {
+  content: '';
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background: #ff4040;
+  border-radius: 100%;
+  top: 0px;
+  right: 0px;
+  border: 2px solid #ffffff;
+  transition: background 0.2s ease;
+}
+
 .woot-widget-bubble.woot-widget--expanded {
   bottom: 24px;
   display: flex;

app/javascript/widget/App.vue

@@ -200,12 +200,23 @@ export default {
           unreadMessageCount,
         });
         this.setIframeHeight(this.isMobile);
+        this.handleUnreadNotificationDot();
       }
     },
     unsetUnreadView() {
       if (this.isIFrame) {
         IFrameHelper.sendMessage({ event: 'resetUnreadMode' });
         this.setIframeHeight();
+        this.handleUnreadNotificationDot();
+      }
+    },
+    handleUnreadNotificationDot() {
+      const { unreadMessageCount } = this;
+      if (this.isIFrame) {
+        IFrameHelper.sendMessage({
+          event: 'handleNotificationDot',
+          unreadMessageCount,
+        });
       }
     },
     createWidgetEvents(message) {
@@ -281,6 +292,7 @@ export default {
           }
           this.showUnreadView = false;
           this.showCampaignView = false;
+          this.handleUnreadNotificationDot();
         } else if (message.event === 'toggle-open') {
           this.isWidgetOpen = message.isOpen;
           this.toggleOpen();