Feature: Website SDK (#653)

Add SDK functions

Co-authored-by: Sojan <sojan@pepalo.com>

app/javascript/sdk/IFrameHelper.js

@@ -0,0 +1,134 @@
+import Cookies from 'js-cookie';
+import { wootOn, loadCSS } from './DOMHelpers';
+import {
+  body,
+  widgetHolder,
+  createBubbleHolder,
+  disableScroll,
+  enableScroll,
+  createBubbleIcon,
+  bubbleImg,
+  chatBubble,
+  closeBubble,
+  bubbleHolder,
+  createNotificationBubble,
+  onClickChatBubble,
+  onBubbleClick,
+} from './bubbleHelpers';
+
+export const IFrameHelper = {
+  getUrl({ baseUrl, websiteToken }) {
+    return `${baseUrl}/widget?website_token=${websiteToken}`;
+  },
+  createFrame: ({ baseUrl, websiteToken }) => {
+    const iframe = document.createElement('iframe');
+    const cwCookie = Cookies.get('cw_conversation');
+    let widgetUrl = IFrameHelper.getUrl({ baseUrl, websiteToken });
+    if (cwCookie) {
+      widgetUrl = `${widgetUrl}&cw_conversation=${cwCookie}`;
+    }
+    iframe.src = widgetUrl;
+
+    iframe.id = 'chatwoot_live_chat_widget';
+    iframe.style.visibility = 'hidden';
+    widgetHolder.className = 'woot-widget-holder woot--hide';
+    widgetHolder.appendChild(iframe);
+    body.appendChild(widgetHolder);
+    IFrameHelper.initPostMessageCommunication();
+    IFrameHelper.initLocationListener();
+    IFrameHelper.initWindowSizeListener();
+  },
+  getAppFrame: () => document.getElementById('chatwoot_live_chat_widget'),
+  sendMessage: (key, value) => {
+    const element = IFrameHelper.getAppFrame();
+    element.contentWindow.postMessage(
+      `chatwoot-widget:${JSON.stringify({ event: key, ...value })}`,
+      '*'
+    );
+  },
+  initLocationListener: () => {
+    window.onhashchange = () => {
+      IFrameHelper.setCurrentUrl();
+    };
+  },
+  initPostMessageCommunication: () => {
+    window.onmessage = e => {
+      if (
+        typeof e.data !== 'string' ||
+        e.data.indexOf('chatwoot-widget:') !== 0
+      ) {
+        return;
+      }
+      const message = JSON.parse(e.data.replace('chatwoot-widget:', ''));
+      if (typeof IFrameHelper.events[message.event] === 'function') {
+        IFrameHelper.events[message.event](message);
+      }
+    };
+  },
+  initWindowSizeListener: () => {
+    wootOn(window, 'resize', () => {
+      IFrameHelper.toggleCloseButton();
+    });
+  },
+  events: {
+    loaded: message => {
+      Cookies.set('cw_conversation', message.config.authToken, {
+        expires: 365,
+      });
+      window.$chatwoot.hasLoaded = true;
+      IFrameHelper.sendMessage('config-set', {});
+      IFrameHelper.onLoad(message.config.channelConfig);
+      IFrameHelper.setCurrentUrl();
+      IFrameHelper.toggleCloseButton();
+
+      if (window.$chatwoot.user) {
+        IFrameHelper.sendMessage('set-user', window.$chatwoot.user);
+      }
+    },
+
+    toggleBubble: () => {
+      onBubbleClick();
+    },
+  },
+  onLoad: ({ widget_color: widgetColor }) => {
+    const iframe = IFrameHelper.getAppFrame();
+    iframe.style.visibility = '';
+    iframe.setAttribute('id', `chatwoot_live_chat_widget`);
+    iframe.onmouseenter = disableScroll;
+    iframe.onmouseleave = enableScroll;
+
+    loadCSS();
+    createBubbleHolder();
+
+    if (!window.$chatwoot.hideMessageBubble) {
+      const chatIcon = createBubbleIcon({
+        className: 'woot-widget-bubble',
+        src: bubbleImg,
+        target: chatBubble,
+      });
+
+      const closeIcon = closeBubble;
+      closeIcon.className = 'woot-widget-bubble woot--close woot--hide';
+
+      chatIcon.style.background = widgetColor;
+      closeIcon.style.background = widgetColor;
+
+      bubbleHolder.appendChild(chatIcon);
+      bubbleHolder.appendChild(closeIcon);
+      bubbleHolder.appendChild(createNotificationBubble());
+      onClickChatBubble();
+    }
+  },
+  setCurrentUrl: () => {
+    IFrameHelper.sendMessage('set-current-url', {
+      refererURL: window.location.href,
+    });
+  },
+  toggleCloseButton: () => {
+    if (window.matchMedia('(max-width: 668px)').matches) {
+      IFrameHelper.sendMessage('toggle-close-button', { showClose: true });
+    } else {
+      IFrameHelper.sendMessage('toggle-close-button', { showClose: false });
+    }
+  },
+};