[Enhancement] Use JS-Cookie to set Cookies (#193)

* Update js-cookie

* Add sdk css

* Remove conversation padding

app/javascript/packs/sdk.js

@@ -1,4 +1,6 @@
-import sdkStyles from '../widget/assets/scss/sdk.css';
+import Cookies from 'js-cookie';
+
+import { SDK_CSS } from '../widget/assets/scss/sdk';
 /* eslint-disable no-param-reassign */
 const bubbleImg =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAUVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////8IN+deAAAAGnRSTlMAAwgJEBk0TVheY2R5eo+ut8jb5OXs8fX2+cjRDTIAAADsSURBVHgBldZbkoMgFIThRgQv8SKKgGf/C51UnJqaRI30/9zfe+NQUQ3TvG7bOk9DVeCmshmj/CuOTYnrdBfkUOg0zlOtl9OWVuEk4+QyZ3DIevmSt/ioTvK1VH/s5bY3YdM9SBZ/mUUyWgx+U06ycgp7D8msxSvtc4HXL9BLdj2elSEfhBJAI0QNgJEBI1BEBsQClVBVGDgwYOLAhJkDM1YOrNg4sLFAsLJgZsHEgoEFFQt0JAFGFjQsKAMJ0LFAexKgZYFyJIDxJIBNJEDNAtSJBLCeBDCOBFAPzwFA94ED+zmhwDO9358r8ANtIsMXi7qVAwAAAABJRU5ErkJggg==';
@@ -6,7 +8,6 @@ const closeImg =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAP1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////9Du/pqAAAAFHRSTlMACBstLi8wMVB+mcbT2err7O3w8n+sjtQAAAEuSURBVHgBtNLdcoMgGITh1SCGH9DId//X2mnTg7hYxj0oh8w8r+MqgDnmlsIE6UwhtRxnAHge9n2KV7wvP+h4AvPbm73W+359/aJjRjQTCuTNIrJJBfKW0UwqkLeGZJ8Ff2O/T28JwZQCewuYilJgX6buavdDv188br1RIE+jc2H5yy+9VwrXXij0nsflwth7YFRw7N3Y88BcYL+z7wubO/lt6AcFwQMLF9irP8r2eF8/ei8VLrxUkDzguMDejX03WK3dsGJB9lxgrxd0T8PTRxUL5OUCealQz76KXg/or/CvI36VXgcEAAAgCMP6t16IZVDg3zPuI+0rb5g2zlsoW2lbqlvrOyw7bTuuO+8LGIs4C1mLeQuai7oL2437LRytPC1drX0tnq2+Ld+r/wDPIIIJkfdlbQAAAABJRU5ErkJggg==';
 
 const body = document.getElementsByTagName('body')[0];
-const iframe = document.createElement('iframe');
 const holder = document.createElement('div');
 
 const bubbleHolder = document.createElement('div');
@@ -16,16 +17,10 @@ const closeBubble = document.createElement('div');
 const notification_bubble = document.createElement('span');
 const bodyOverFlowStyle = document.body.style.overflow;
 
-function addClass(elm, classes) {
-  if (classes) {
-    elm.className += ` ${classes}`;
-  }
-}
-
 function loadCSS() {
   const css = document.createElement('style');
   css.type = 'text/css';
-  css.innerHTML = sdkStyles;
+  css.innerHTML = `${SDK_CSS}`;
   document.body.appendChild(css);
 }
 
@@ -45,14 +40,13 @@ function wootOn(elm, event, fn) {
 }
 
 function classHelper(classes, action, elm) {
-  let classarray;
   let search;
   let replace;
   let i;
   let has = false;
   if (classes) {
     // Trim any whitespace
-    classarray = classes.split(/\s+/);
+    const classarray = classes.split(/\s+/);
     for (i = 0; i < classarray.length; i += 1) {
       search = new RegExp(`\\b${classarray[i]}\\b`, 'g');
       replace = new RegExp(` *${classarray[i]}\\b`, 'g');
@@ -75,6 +69,12 @@ function classHelper(classes, action, elm) {
   return has;
 }
 
+function addClass(elm, classes) {
+  if (classes) {
+    elm.className += ` ${classes}`;
+  }
+}
+
 // Toggle class
 function toggleClass(elm, classes) {
   classHelper(classes, 'toggle', elm);
@@ -117,42 +117,81 @@ function enableScroll() {
   document.body.style.overflow = bodyOverFlowStyle;
 }
 
-function loadCallback() {
-  iframe.style.visibility = '';
-  iframe.setAttribute('id', `chatwoot_live_chat_widget`);
-  iframe.onmouseenter = disableScroll;
-  iframe.onmouseleave = enableScroll;
+const IFrameHelper = {
+  createFrame: ({ baseUrl, websiteToken }) => {
+    const iframe = document.createElement('iframe');
+    const cwCookie = Cookies.get('cw_conversation');
+    let widgetUrl = `${baseUrl}/widgets?website_token=${websiteToken}`;
+    if (cwCookie) {
+      widgetUrl = `${widgetUrl}&cw_conversation=${cwCookie}`;
+    }
+    iframe.src = widgetUrl;
 
-  loadCSS();
-  createBubbleHolder();
+    iframe.id = 'chatwoot_web_widget';
+    iframe.style.visibility = 'hidden';
+    holder.className = 'woot-widget-holder woot--hide';
+    holder.appendChild(iframe);
+    body.appendChild(holder);
+    IFrameHelper.initPostMessageCommunication();
+  },
+  getAppFrame: () => document.getElementById('chatwoot_web_widget'),
+  sendMessage: (key, value) => {
+    const element = IFrameHelper.getAppFrame();
+    element.contentWindow.postMessage(
+      `chatwoot-widget:${JSON.stringify({ event: key, ...value })}`,
+      '*'
+    );
+  },
+  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 (message.event === 'loaded') {
+        Cookies.set('cw_conversation', message.config.authToken);
+        IFrameHelper.sendMessage('config-set', {});
+        IFrameHelper.onLoad();
+      }
+    };
+  },
+  onLoad: () => {
+    const iframe = IFrameHelper.getAppFrame();
+    iframe.style.visibility = '';
+    iframe.setAttribute('id', `chatwoot_live_chat_widget`);
+    iframe.onmouseenter = disableScroll;
+    iframe.onmouseleave = enableScroll;
 
-  bubbleHolder.appendChild(
-    createBubbleIcon({
-      className: 'woot-widget-bubble',
-      src: bubbleImg,
-      target: chatBubble,
-    })
-  );
-  bubbleHolder.appendChild(
-    createBubbleIcon({
-      className: 'woot-widget-bubble woot--close woot--hide',
-      src: closeImg,
-      target: closeBubble,
-    })
-  );
-  bubbleHolder.appendChild(createNotificationBubble());
-  onClickChatBubble();
-}
+    loadCSS();
+    createBubbleHolder();
 
-function loadIframe({ websiteToken, baseUrl }) {
-  iframe.style.visibility = 'hidden';
-  iframe.src = `${baseUrl}/widgets?website_token=${websiteToken}`;
-  iframe.onload = loadCallback;
+    bubbleHolder.appendChild(
+      createBubbleIcon({
+        className: 'woot-widget-bubble',
+        src: bubbleImg,
+        target: chatBubble,
+      })
+    );
+    bubbleHolder.appendChild(
+      createBubbleIcon({
+        className: 'woot-widget-bubble woot--close woot--hide',
+        src: closeImg,
+        target: closeBubble,
+      })
+    );
+    bubbleHolder.appendChild(createNotificationBubble());
+    onClickChatBubble();
+  },
+};
 
-  holder.className = 'woot-widget-holder woot--hide';
-  holder.appendChild(iframe);
-
-  body.appendChild(holder);
+function loadIframe({ baseUrl, websiteToken }) {
+  IFrameHelper.createFrame({
+    baseUrl,
+    websiteToken,
+  });
 }
 
 window.chatwootSDK = {