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 });
     },