feat: Add a popout option on webwidget (#1174)

* feat: Add a popout option on webwidget

app/javascript/widget/helpers/constants.js

@@ -12,3 +12,5 @@ export const MESSAGE_TYPE = {
   ACTIVITY: 2,
   TEMPLATE: 3,
 };
+
+export const WOOT_PREFIX = 'chatwoot-widget:';

app/javascript/widget/helpers/specs/urlParamsHelper.spec.js

@@ -1,4 +1,8 @@
-import { buildSearchParamsWithLocale } from '../urlParamsHelper';
+import {
+  buildSearchParamsWithLocale,
+  getLocale,
+  buildPopoutURL,
+} from '../urlParamsHelper';
 
 jest.mock('vue', () => ({
   config: {
@@ -14,3 +18,29 @@ describe('#buildSearchParamsWithLocale', () => {
     expect(buildSearchParamsWithLocale('')).toEqual('?locale=el');
   });
 });
+
+describe('#getLocale', () => {
+  it('returns correct locale', () => {
+    expect(getLocale('?test=1&cw_conv=2&locale=fr')).toEqual('fr');
+    expect(getLocale('?test=1&locale=fr')).toEqual('fr');
+    expect(getLocale('?test=1&cw_conv=2&website_token=3&locale=fr')).toEqual(
+      'fr'
+    );
+    expect(getLocale('')).toEqual(undefined);
+  });
+});
+
+describe('#buildPopoutURL', () => {
+  it('returns popout URL', () => {
+    expect(
+      buildPopoutURL({
+        origin: 'https://chatwoot.com',
+        conversationCookie: 'random-jwt-token',
+        websiteToken: 'random-website-token',
+        locale: 'ar',
+      })
+    ).toEqual(
+      'https://chatwoot.com/widget?cw_conversation=random-jwt-token&website_token=random-website-token&locale=ar'
+    );
+  });
+});

app/javascript/widget/helpers/specs/utils.spec.js

@@ -0,0 +1,42 @@
+import { IFrameHelper } from '../utils';
+
+jest.mock('vue', () => ({
+  config: {
+    lang: 'el',
+  },
+}));
+
+describe('#IFrameHelper', () => {
+  describe('#isAValidEvent', () => {
+    it('returns if the event is valid', () => {
+      expect(
+        IFrameHelper.isAValidEvent({
+          data:
+            'chatwoot-widget:{"event":"config-set","locale":"fr","position":"left","hideMessageBubble":false,"showPopoutButton":true}',
+        })
+      ).toEqual(true);
+      expect(
+        IFrameHelper.isAValidEvent({
+          data:
+            '{"event":"config-set","locale":"fr","position":"left","hideMessageBubble":false,"showPopoutButton":true}',
+        })
+      ).toEqual(false);
+    });
+  });
+  describe('#getMessage', () => {
+    it('returns parsed message', () => {
+      expect(
+        IFrameHelper.getMessage({
+          data:
+            'chatwoot-widget:{"event":"config-set","locale":"fr","position":"left","hideMessageBubble":false,"showPopoutButton":true}',
+        })
+      ).toEqual({
+        event: 'config-set',
+        locale: 'fr',
+        position: 'left',
+        hideMessageBubble: false,
+        showPopoutButton: true,
+      });
+    });
+  });
+});

app/javascript/widget/helpers/urlParamsHelper.js

@@ -1,4 +1,5 @@
 import Vue from 'vue';
+
 export const buildSearchParamsWithLocale = search => {
   const locale = Vue.config.lang;
   if (search) {
@@ -8,3 +9,23 @@ export const buildSearchParamsWithLocale = search => {
   }
   return search;
 };
+
+export const getLocale = (search = '') => {
+  const searchParamKeyValuePairs = search.split('&');
+  return searchParamKeyValuePairs.reduce((acc, keyValuePair) => {
+    const [key, value] = keyValuePair.split('=');
+    if (key === 'locale') {
+      return value;
+    }
+    return acc;
+  }, undefined);
+};
+
+export const buildPopoutURL = ({
+  origin,
+  conversationCookie,
+  websiteToken,
+  locale,
+}) => {
+  return `${origin}/widget?cw_conversation=${conversationCookie}&website_token=${websiteToken}&locale=${locale}`;
+};

app/javascript/widget/helpers/utils.js

@@ -1,3 +1,5 @@
+import { WOOT_PREFIX } from './constants';
+
 export const isEmptyObject = obj =>
   Object.keys(obj).length === 0 && obj.constructor === Object;
 
@@ -16,4 +18,11 @@ export const IFrameHelper = {
       '*'
     );
   },
+  isAValidEvent: e => {
+    const isDataAString = typeof e.data === 'string';
+    const isAValidWootEvent =
+      isDataAString && e.data.indexOf(WOOT_PREFIX) === 0;
+    return isAValidWootEvent;
+  },
+  getMessage: e => JSON.parse(e.data.replace(WOOT_PREFIX, '')),
 };