From 30ac8054ba09338bb80f860990221f84c7d84399 Mon Sep 17 00:00:00 2001
From: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>
Date: Mon, 28 Mar 2022 13:31:51 +0530
Subject: [PATCH] feat: Add an SDK method for opening conversation in popout
 window (#4232)

---
 app/javascript/packs/sdk.js                   |  8 ++++++
 app/javascript/sdk/IFrameHelper.js            |  7 +++++
 .../widget/components/HeaderActions.vue       | 15 +++--------
 app/javascript/widget/helpers/popoutHelper.js | 26 +++++++++++++++++++
 4 files changed, 45 insertions(+), 11 deletions(-)
 create mode 100644 app/javascript/widget/helpers/popoutHelper.js

diff --git a/app/javascript/packs/sdk.js b/app/javascript/packs/sdk.js
index 66f6ba790..76e1a2cd8 100755
--- a/app/javascript/packs/sdk.js
+++ b/app/javascript/packs/sdk.js
@@ -31,6 +31,14 @@ const runSDK = ({ baseUrl, websiteToken }) => {
       IFrameHelper.events.toggleBubble(state);
     },
 
+    popoutChatWindow() {
+      IFrameHelper.events.popoutChatWindow({
+        baseUrl: window.$chatwoot.baseUrl,
+        websiteToken: window.$chatwoot.websiteToken,
+        locale: window.$chatwoot.locale,
+      });
+    },
+
     setUser(identifier, user) {
       if (typeof identifier !== 'string' && typeof identifier !== 'number') {
         throw new Error('Identifier should be a string or a number');
diff --git a/app/javascript/sdk/IFrameHelper.js b/app/javascript/sdk/IFrameHelper.js
index ba495bbc8..df36d8e0d 100644
--- a/app/javascript/sdk/IFrameHelper.js
+++ b/app/javascript/sdk/IFrameHelper.js
@@ -31,6 +31,7 @@ import {
   initOnEvents,
 } from 'shared/helpers/AudioNotificationHelper';
 import { isFlatWidgetStyle } from './settingsHelper';
+import { popoutChatWindow } from '../widget/helpers/popoutHelper';
 
 export const IFrameHelper = {
   getUrl({ baseUrl, websiteToken }) {
@@ -190,6 +191,12 @@ export const IFrameHelper = {
       onBubbleClick(bubbleState);
     },
 
+    popoutChatWindow: ({ baseUrl, websiteToken, locale }) => {
+      const cwCookie = Cookies.get('cw_conversation');
+      window.$chatwoot.toggle('close');
+      popoutChatWindow(baseUrl, websiteToken, locale, cwCookie);
+    },
+
     closeWindow: () => {
       onBubbleClick({ toggleValue: false });
       removeUnreadClass();
diff --git a/app/javascript/widget/components/HeaderActions.vue b/app/javascript/widget/components/HeaderActions.vue
index 4d6e5faa9..1090d54b0 100644
--- a/app/javascript/widget/components/HeaderActions.vue
+++ b/app/javascript/widget/components/HeaderActions.vue
@@ -29,7 +29,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
-import { buildPopoutURL } from '../helpers/urlParamsHelper';
+import { popoutChatWindow } from '../helpers/popoutHelper';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
 export default {
@@ -69,19 +69,12 @@ export default {
         chatwootWebChannel: { websiteToken },
         authToken,
       } = window;
-
-      const popoutWindowURL = buildPopoutURL({
+      popoutChatWindow(
         origin,
         websiteToken,
-        locale: this.$root.$i18n.locale,
-        conversationCookie: authToken,
-      });
-      const popoutWindow = window.open(
-        popoutWindowURL,
-        `webwidget_session_${websiteToken}`,
-        'resizable=off,width=400,height=600'
+        this.$root.$i18n.locale,
+        authToken
       );
-      popoutWindow.focus();
     },
     closeWindow() {
       if (IFrameHelper.isIFrame()) {
diff --git a/app/javascript/widget/helpers/popoutHelper.js b/app/javascript/widget/helpers/popoutHelper.js
new file mode 100644
index 000000000..e1d0699d3
--- /dev/null
+++ b/app/javascript/widget/helpers/popoutHelper.js
@@ -0,0 +1,26 @@
+import { buildPopoutURL } from './urlParamsHelper';
+
+export const popoutChatWindow = (
+  origin,
+  websiteToken,
+  locale,
+  conversationCookie
+) => {
+  try {
+    const windowUrl = buildPopoutURL({
+      origin,
+      websiteToken,
+      locale,
+      conversationCookie,
+    });
+    const popoutWindow = window.open(
+      windowUrl,
+      `webwidget_session_${websiteToken}`,
+      'resizable=off,width=400,height=600'
+    );
+    popoutWindow.focus();
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.log(err);
+  }
+};