feat: widget opened and closed events (#11240)

Fixes #9272

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/sdk/IFrameHelper.js

@@ -22,7 +22,11 @@ import {
 } from './bubbleHelpers';
 import { isWidgetColorLighter } from 'shared/helpers/colorHelper';
 import { dispatchWindowEvent } from 'shared/helpers/CustomEventHelper';
-import { CHATWOOT_ERROR, CHATWOOT_READY } from '../widget/constants/sdkEvents';
+import {
+  CHATWOOT_ERROR,
+  CHATWOOT_POSTBACK,
+  CHATWOOT_READY,
+} from '../widget/constants/sdkEvents';
 import { SET_USER_ERROR } from '../widget/constants/errorTypes';
 import { getUserCookieName, setCookieWithDomain } from './cookieHelpers';
 import {
@@ -205,7 +209,7 @@ export const IFrameHelper = {
 
     postback(data) {
       dispatchWindowEvent({
-        eventName: 'chatwoot:postback',
+        eventName: CHATWOOT_POSTBACK,
         data,
       });
     },

app/javascript/sdk/bubbleHelpers.js

@@ -1,6 +1,11 @@
 import { addClasses, removeClasses, toggleClass } from './DOMHelpers';
 import { IFrameHelper } from './IFrameHelper';
 import { isExpandedView } from './settingsHelper';
+import {
+  CHATWOOT_CLOSED,
+  CHATWOOT_OPENED,
+} from '../widget/constants/sdkEvents';
+import { dispatchWindowEvent } from 'shared/helpers/CustomEventHelper';
 
 export const bubbleSVG =
   'M240.808 240.808H122.123C56.6994 240.808 3.45695 187.562 3.45695 122.122C3.45695 56.7031 56.6994 3.45697 122.124 3.45697C187.566 3.45697 240.808 56.7031 240.808 122.122V240.808Z';
@@ -65,22 +70,30 @@ export const createBubbleHolder = hideMessageBubble => {
   body.appendChild(bubbleHolder);
 };
 
+const handleBubbleToggle = newIsOpen => {
+  IFrameHelper.events.onBubbleToggle(newIsOpen);
+
+  if (newIsOpen) {
+    dispatchWindowEvent({ eventName: CHATWOOT_OPENED });
+  } else {
+    dispatchWindowEvent({ eventName: CHATWOOT_CLOSED });
+    chatBubble.focus();
+  }
+};
+
 export const onBubbleClick = (props = {}) => {
   const { toggleValue } = props;
   const { isOpen } = window.$chatwoot;
-  if (isOpen !== toggleValue) {
+  if (isOpen === toggleValue) return;
-    const newIsOpen = toggleValue === undefined ? !isOpen : toggleValue;
-    window.$chatwoot.isOpen = newIsOpen;
 
-    toggleClass(chatBubble, 'woot--hide');
+  const newIsOpen = toggleValue === undefined ? !isOpen : toggleValue;
-    toggleClass(closeBubble, 'woot--hide');
+  window.$chatwoot.isOpen = newIsOpen;
-    toggleClass(widgetHolder, 'woot--hide');
-    IFrameHelper.events.onBubbleToggle(newIsOpen);
 
-    if (!newIsOpen) {
+  toggleClass(chatBubble, 'woot--hide');
-      chatBubble.focus();
+  toggleClass(closeBubble, 'woot--hide');
-    }
+  toggleClass(widgetHolder, 'woot--hide');
-  }
+
+  handleBubbleToggle(newIsOpen);
 };
 
 export const onClickChatBubble = () => {

app/javascript/widget/constants/sdkEvents.js

@@ -1,4 +1,7 @@
 export const CHATWOOT_ERROR = 'chatwoot:error';
 export const CHATWOOT_ON_MESSAGE = 'chatwoot:on-message';
 export const CHATWOOT_ON_START_CONVERSATION = 'chatwoot:on-start-conversation';
+export const CHATWOOT_POSTBACK = 'chatwoot:postback';
 export const CHATWOOT_READY = 'chatwoot:ready';
+export const CHATWOOT_OPENED = 'chatwoot:opened';
+export const CHATWOOT_CLOSED = 'chatwoot:closed';

app/views/widget_tests/index.html.erb

@@ -66,6 +66,13 @@ window.addEventListener('chatwoot:postback', function(e) {
   console.log('chatwoot:postback', e.detail)
 })
 
+window.addEventListener('chatwoot:opened', function() {
+  console.log('chatwoot:opened')
+})
+
+window.addEventListener('chatwoot:closed', function() {
+  console.log('chatwoot:closed')
+})
 
 window.addEventListener('chatwoot:on-start-conversation', function(e) {
   console.log('chatwoot:on-start-conversation', e.detail)