feat: Add an SDK method for opening conversation in popout window (#4232)

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');

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();

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()) {

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);
+  }
+};