From 12ee7e5d82efc16e421c32e59a83a97b5eadf80e Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@thoughtwoot.com>
Date: Sat, 25 Jul 2020 21:54:58 +0530
Subject: [PATCH] feat: Add `chatwoot:ready` event listener on window (#1091)

* feat: Add `chatwoot:ready` event listener on window

* Add specs

* Rename customEventHelper.js -> CustomEventHelper.js
---
 app/javascript/sdk/IFrameHelper.js                |  5 +++++
 .../shared/helpers/CustomEventHelper.js           | 15 +++++++++++++++
 .../helpers/specs/CustomEventHelper.spec.js       |  9 +++++++++
 app/views/widget_tests/index.html.erb             |  4 ++++
 docs/channels/website-sdk.md                      |  9 +++++++++
 5 files changed, 42 insertions(+)
 create mode 100644 app/javascript/shared/helpers/CustomEventHelper.js
 create mode 100644 app/javascript/shared/helpers/specs/CustomEventHelper.spec.js

diff --git a/app/javascript/sdk/IFrameHelper.js b/app/javascript/sdk/IFrameHelper.js
index c1ac73046..f42afcd64 100644
--- a/app/javascript/sdk/IFrameHelper.js
+++ b/app/javascript/sdk/IFrameHelper.js
@@ -13,6 +13,9 @@ import {
   onClickChatBubble,
   onBubbleClick,
 } from './bubbleHelpers';
+import { dispatchWindowEvent } from 'shared/helpers/CustomEventHelper';
+
+const EVENT_NAME = 'chatwoot:ready';
 
 export const IFrameHelper = {
   getUrl({ baseUrl, websiteToken }) {
@@ -89,6 +92,7 @@ export const IFrameHelper = {
     loaded: message => {
       Cookies.set('cw_conversation', message.config.authToken, {
         expires: 365,
+        sameSite: 'Lax',
       });
       window.$chatwoot.hasLoaded = true;
       IFrameHelper.sendMessage('config-set', {
@@ -103,6 +107,7 @@ export const IFrameHelper = {
       if (window.$chatwoot.user) {
         IFrameHelper.sendMessage('set-user', window.$chatwoot.user);
       }
+      dispatchWindowEvent(EVENT_NAME);
     },
 
     toggleBubble: () => {
diff --git a/app/javascript/shared/helpers/CustomEventHelper.js b/app/javascript/shared/helpers/CustomEventHelper.js
new file mode 100644
index 000000000..df5d4bb0c
--- /dev/null
+++ b/app/javascript/shared/helpers/CustomEventHelper.js
@@ -0,0 +1,15 @@
+export const createEvent = eventName => {
+  let event;
+  if (typeof window.CustomEvent === 'function') {
+    event = new CustomEvent(eventName);
+  } else {
+    event = document.createEvent('CustomEvent');
+    event.initCustomEvent(eventName, false, false, null);
+  }
+  return event;
+};
+
+export const dispatchWindowEvent = eventName => {
+  const event = createEvent(eventName);
+  window.dispatchEvent(event);
+};
diff --git a/app/javascript/shared/helpers/specs/CustomEventHelper.spec.js b/app/javascript/shared/helpers/specs/CustomEventHelper.spec.js
new file mode 100644
index 000000000..f6fe0908f
--- /dev/null
+++ b/app/javascript/shared/helpers/specs/CustomEventHelper.spec.js
@@ -0,0 +1,9 @@
+import { dispatchWindowEvent } from '../CustomEventHelper';
+
+describe('dispatchWindowEvent', () => {
+  it('dispatches correct event', () => {
+    window.dispatchEvent = jest.fn();
+    dispatchWindowEvent('chatwoot:ready');
+    expect(dispatchEvent).toHaveBeenCalled();
+  });
+});
diff --git a/app/views/widget_tests/index.html.erb b/app/views/widget_tests/index.html.erb
index 51ede71bd..241047e16 100644
--- a/app/views/widget_tests/index.html.erb
+++ b/app/views/widget_tests/index.html.erb
@@ -20,4 +20,8 @@ window.chatwootSettings = {
     })
   }
 })(document,"script");
+
+window.addEventListener('chatwoot:ready', function() {
+  console.log(window.$chatwoot)
+})
 </script>
diff --git a/docs/channels/website-sdk.md b/docs/channels/website-sdk.md
index be59f8f69..b1ecb3d11 100644
--- a/docs/channels/website-sdk.md
+++ b/docs/channels/website-sdk.md
@@ -8,6 +8,15 @@ Additional information about a contact is always useful, Chatwoot website SDK en
 
 If you have installed our code on your website, SDK would expose `window.$chatwoot` object.
 
+Inorder to make sure that the SDK has been loaded completely, please make sure that you listen to `chatwoot:ready` event as follows
+
+```js
+window.addEventListener('chatwoot:ready', function() {
+  // Use window.$chatwoot here
+  // ...
+})
+```
+
 To hide the bubble, you can use the following setting. Please not if you use this, then you have to trigger the widget by yourself.
 
 ```js