chore: Execute campaigns based on matching URL (#2254)

app/javascript/sdk/DOMHelpers.js

@@ -1,4 +1,5 @@
 import { SDK_CSS } from './sdk.js';
+import { IFrameHelper } from './IFrameHelper';
 
 export const loadCSS = () => {
   const css = document.createElement('style');
@@ -65,3 +66,38 @@ export const toggleClass = (elm, classes) => {
 export const removeClass = (elm, classes) => {
   classHelper(classes, 'remove', elm);
 };
+
+export const onLocationChange = ({ referrerURL, referrerHost }) => {
+  IFrameHelper.events.onLocationChange({
+    referrerURL,
+    referrerHost,
+  });
+};
+
+export const onLocationChangeListener = () => {
+  let oldHref = document.location.href;
+  const referrerHost = document.location.host;
+  const config = {
+    childList: true,
+    subtree: true,
+  };
+  onLocationChange({
+    referrerURL: oldHref,
+    referrerHost,
+  });
+
+  const bodyList = document.querySelector('body');
+  const observer = new MutationObserver(mutations => {
+    mutations.forEach(() => {
+      if (oldHref !== document.location.href) {
+        oldHref = document.location.href;
+        onLocationChange({
+          referrerURL: oldHref,
+          referrerHost,
+        });
+      }
+    });
+  });
+
+  observer.observe(bodyList, config);
+};

app/javascript/sdk/IFrameHelper.js

@@ -1,5 +1,11 @@
 import Cookies from 'js-cookie';
-import { wootOn, addClass, loadCSS, removeClass } from './DOMHelpers';
+import {
+  wootOn,
+  addClass,
+  loadCSS,
+  removeClass,
+  onLocationChangeListener,
+} from './DOMHelpers';
 import {
   body,
   widgetHolder,
@@ -47,7 +53,6 @@ export const IFrameHelper = {
     widgetHolder.appendChild(iframe);
     body.appendChild(widgetHolder);
     IFrameHelper.initPostMessageCommunication();
-    IFrameHelper.initLocationListener();
     IFrameHelper.initWindowSizeListener();
     IFrameHelper.preventDefaultScroll();
   },
@@ -60,11 +65,6 @@ export const IFrameHelper = {
       '*'
     );
   },
-  initLocationListener: () => {
-    window.onhashchange = () => {
-      IFrameHelper.setCurrentUrl();
-    };
-  },
   initPostMessageCommunication: () => {
     window.onmessage = e => {
       if (
@@ -113,7 +113,6 @@ export const IFrameHelper = {
       IFrameHelper.onLoad({
         widgetColor: message.config.channelConfig.widgetColor,
       });
-      IFrameHelper.setCurrentUrl();
       IFrameHelper.toggleCloseButton();
 
       if (window.$chatwoot.user) {
@@ -140,6 +139,9 @@ export const IFrameHelper = {
         IFrameHelper.pushEvent('webwidget.triggered');
       }
     },
+    onLocationChange: ({ referrerURL, referrerHost }) => {
+      IFrameHelper.sendMessage('change-url', { referrerURL, referrerHost });
+    },
 
     setUnreadMode: message => {
       const { unreadMessageCount } = message;
@@ -167,6 +169,7 @@ export const IFrameHelper = {
   pushEvent: eventName => {
     IFrameHelper.sendMessage('push-event', { eventName });
   },
+
   onLoad: ({ widgetColor }) => {
     const iframe = IFrameHelper.getAppFrame();
     iframe.style.visibility = '';
@@ -175,9 +178,8 @@ export const IFrameHelper = {
     if (IFrameHelper.getBubbleHolder().length) {
       return;
     }
-
     createBubbleHolder();
-
+    onLocationChangeListener();
     if (!window.$chatwoot.hideMessageBubble) {
       const chatIcon = createBubbleIcon({
         className: 'woot-widget-bubble',
@@ -198,12 +200,6 @@ export const IFrameHelper = {
       onClickChatBubble();
     }
   },
-  setCurrentUrl: () => {
-    IFrameHelper.sendMessage('set-current-url', {
-      referrerURL: window.location.href,
-      referrerHost: window.location.host,
-    });
-  },
   toggleCloseButton: () => {
     if (window.matchMedia('(max-width: 668px)').matches) {
       IFrameHelper.sendMessage('toggle-close-button', {