From ecc95478b921574969d64a551edab847c2d2ebd0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Kube=C5=A1?=
 <46596180+KubesDavid@users.noreply.github.com>
Date: Thu, 24 Apr 2025 13:31:39 +0200
Subject: [PATCH] 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           |  8 +++--
 app/javascript/sdk/bubbleHelpers.js          | 35 ++++++++++++++------
 app/javascript/widget/constants/sdkEvents.js |  3 ++
 app/views/widget_tests/index.html.erb        |  7 ++++
 4 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/app/javascript/sdk/IFrameHelper.js b/app/javascript/sdk/IFrameHelper.js
index 66e25902b..21b2fb8d4 100644
--- a/app/javascript/sdk/IFrameHelper.js
+++ b/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,
       });
     },
diff --git a/app/javascript/sdk/bubbleHelpers.js b/app/javascript/sdk/bubbleHelpers.js
index 609fe04da..05c67f478 100644
--- a/app/javascript/sdk/bubbleHelpers.js
+++ b/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) {
-    const newIsOpen = toggleValue === undefined ? !isOpen : toggleValue;
-    window.$chatwoot.isOpen = newIsOpen;
+  if (isOpen === toggleValue) return;
 
-    toggleClass(chatBubble, 'woot--hide');
-    toggleClass(closeBubble, 'woot--hide');
-    toggleClass(widgetHolder, 'woot--hide');
-    IFrameHelper.events.onBubbleToggle(newIsOpen);
+  const newIsOpen = toggleValue === undefined ? !isOpen : toggleValue;
+  window.$chatwoot.isOpen = newIsOpen;
 
-    if (!newIsOpen) {
-      chatBubble.focus();
-    }
-  }
+  toggleClass(chatBubble, 'woot--hide');
+  toggleClass(closeBubble, 'woot--hide');
+  toggleClass(widgetHolder, 'woot--hide');
+
+  handleBubbleToggle(newIsOpen);
 };
 
 export const onClickChatBubble = () => {
diff --git a/app/javascript/widget/constants/sdkEvents.js b/app/javascript/widget/constants/sdkEvents.js
index 766fa1742..305aa16d7 100644
--- a/app/javascript/widget/constants/sdkEvents.js
+++ b/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';
diff --git a/app/views/widget_tests/index.html.erb b/app/views/widget_tests/index.html.erb
index 45769bb45..2809b6944 100644
--- a/app/views/widget_tests/index.html.erb
+++ b/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)